Replace Quick Setup, Notifications, Messages, Edit Site text labels and add icon for Login button with pure CSS icons

[Fleiding]

This is done. Check it out in the first post!

I'm not sure why, but in Firefox it's displayed as follows:


In all other browsers it's displayed correctly:


(also using the default style)

[glennrocksvb]

To fix the Firefox issue, add a width. See added code in red below:

/* Quick Setup Icon - START */
.js-config-site {
    text-indent: -999999px;
    position: relative;
[COLOR=#FF0000]    [B]width: 33px;[/B][/COLOR]
}

I have updated the first post to add this fix.

[glennrocksvb]

I also plan to change Edit Site into an icon. Which one do you think is better?

[NumNum]

Wrench!

Also, is there a way to allow a certain number of messages to display when you click on the message icon (defaultvB does this)?

I find this very useful when carrying on more than 1 or 2 conversations.

[Megabink]

The second one looks better.

[glennrocksvb]

Thanks for the feedback. I'll post both the equalizer and wrench icons to give you options to choose the one you prefer.

[delicjous]

Here is the css for the wrench. Had the same idea before initialized by your great free css-based icons for pm and notifications :-)

After I post the code here I looked a little bit deeper at my not opened site and found some bugs in the code.
Hope this one is working well now. updated it below

.switch-container label {
    content: '';
    text-indent: 100%;
    white-space: nowrap;
    margin-left: 3px;
    margin-top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aaa;
    transform-origin: center 10.5px;
    transform: rotate(-45deg);
}
.switch-container label:after,.switch-container label:before{
    content: '';
    position: absolute;
    display: block;}
.switch-container label:before{
    width: 2px;
    height: 5px;
    background-color: white;
    left: 4px;
    border-radius: 0 0 1px 1px;
    box-shadow: 0 15px 0px 1px #aaa, 0 11px 0px 1px #aaa, 0 8px 0px 1px #aaa;
}
.switch-container label:after {
    border-radius: 0 0 1px 1px;
    background-color: #aaa;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
    border-top: solid 1px white;
    border-bottom: solid 1px transparent;
    left: 4px;
    top: 4px;
}

[glennrocksvb]

FYI. I have updated the first post to add pure CSS code for wrench, equalizer and login icons.

[glennrocksvb]

There was a missing step in the instructions for the Login or Sign Up icon. Updated it in the first post.

[Fleiding]

There was a missing step in the instructions for the Login or Sign Up icon. Updated it in the first post.

For some reason I cannot get this to work on my forum. I edited the phrase and added the code, but it won't appear.

[chicoynano]

Thank you works perfect

[William]

.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger >; span:first-child:before {

Minor typo. Looks like there is an unwanted semi-colon ;

It should be:
.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child:before {

Also, the text indent makes the page scroll on forever.

/*Edit Site Wrench Icon - START */
.edit-switch-container label {
margin-left: 5px;
margin-top: 4px;
margin-right: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #aaa;
transform-origin: center 10.5px;
transform: rotate(-45deg);
display: inline-block;
text-indent: -999px;
position: relative;
}

I changed it from -99999px to -999px and the page height went back to normal:

[glennrocksvb]

Good catch William! I have updated the CSS in the first post. Thank you!

[Daryn]

Is there any way to get the 'Notifications' and 'Messages label to appear on hover beneath the icon?

[willie53]

The wrench css works as it is supposed to but with one little drawback when you view who is online which of course can be only seen by admin as seen in pic below