Whisper 2

[yavuz]

You should import the style and call it Whisper 2 - Update, then hide it from users.
Then create new empty style called Whisper 2. Use it as a primary style and make all the changes there.

I leave the style name that is hidden from the users as it is (Whisper 2) and rename the child style (which I apply changes). Same thing I guess

 

[CyberAP]

I thought that on the second step you don't create a new empty style but import Whisper 2 again.

 

[CyberAP]

Here is a quick fix for AzuCloud and Who has read a thread.
Will post new version in the first post when there will be more improvements.

 

[yavuz]

My users love the freshened theme so far and thank you for your help. Since the new chances created a good flow of ideas some of my moderators said that the like, reply, unlike features are often missed. They suggested to transform it into buttons with tiny images. You've already done something like that with the modeartion tools, witch is very well received. Something like this:



I have to remind some users & show users where the message box is, where they can access their settings. Luckily XenForo's instant alert option have gain their attention but still supporting it with tiny images would be very nice:

 

[CyberAP]

This is possible to do but I won't include that in release (it is a bit distracting thing). But I'll give the code:

.message .publicControls .item
{
background-color: @secondaryLighter;
border: 1px solid @secondaryLight;
border-radius: 4px; 
padding: 6px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}

To add an image to the message buttons use this code:

.message .publicControls .item
{
background-image: url('@imagePath/whisper/widgets/your_icon.png');
background-position: 4px 50%;
background-repeat: no-repeat;
padding-left: 20px;
}

To add icons in navTabs here is the example code:

body .navTabs .inbox.navTab .navLink
{
background-image: url('@imagePath/whisper/widgets/your_icon.png');
background-position: 4px 50%;
background-repeat: no-repeat;
padding-left: 20px;
}

That code will add an icon on the left of the inbox link .

 

[yavuz]

You're the best CyberAP, thanks. Tiny thing, I would like to add to each button (Like, Reply ... ) a different image. Is there an easy way to find out whichis which ?

Thank you.

 

[CyberAP]

Yes, each button has its own class. So in code it will look like:

.message .publicControls .LikeLink.item -> for like link

.message .publicControls .ReplyQuote.item -> for quote link

 

[yavuz]

Do you have a list saved somewhere

 

[CyberAP]

Updated my post with border-radius

 

[yavuz]

Looks much nicer this way. I'm gonna try find out which .message .publicControls is which.

 

[yavuz]

I couldn't find the ones for the navigation other than body .navTabs .inbox.navTab .navLink
What would be the appropriate one for Logout, account and alerts?

Thank you.

 

[CyberAP]

The selectors are:

.navTabs .navTab.account .navLink

.navTabs .navTab.alerts .navLink

.navTabs .visitorTabs .navTab:last-child .navLink

 

[Itworx4me]

Instead of a fluid style I would like to have the fixed width. What is the fixed width supposed to be for this style?

 

[CyberAP]

Create new empty child style of Whisper 2, then go to its style properties -> General -> PageWidth and change the pageWidth to the one that you want. Instructions are also avaliable on that page.

 

[CyberAP]

Latest version supports XenForo 1.1.1, no update needed.

 

[Diablotic]

I have recently updated to XF 1.1.1 from 1.0.4. I have been using your whisper style since day one. After updating to newer version I have decided to let you know that I totally love it!!
Thanks a lot a keep it up

 

[Shinjiru]

CyberAP, is there something new about your new XenForo Skin? I really like Whisper, and i am using it since 1 Year, but i am also curious about the new Skin.

 

[Robert F Schmitz]

CyberAP, is there something new about your new XenForo Skin? I really like Whisper, and i am using it since 1 Year, but i am also curious about the new Skin.

As noted on page one I believe:

Changes from original Whisper

1. Done completely via CSS3. No more extra files for gradients. In fact, there are only 3 files now to upload.
2. No more templates editing. All the changes done via extra.css (there is only 1 include there, extra.css is still usable).
3. Refreshed look of most of the elements.

XenForo version support
Latest version supports XenForo 1.1 Final and XenForo 1.1.1. For previous versions use the old Whipser.

Source files also avaliable for download.