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

[glennrocksvb]

As they say, a picture is worth a thousand words. If you want to minimize space on the top bar of your vBulletin 5 forum especially on mobile, you can replace the Quick Setup, Notifications, Messages, Edit Site and Login or Sign Up text with image-less and color-customizable pure CSS icons as shown in the following screenshots.

Notifications and Messages:




Add the below custom CSS in css_additional template in Style Manager in AdminCP or in Sitebuilder (Edit Site ON) > Style > CSS Editor.

/* Notification Icons - START */
.notifications-container > a {
    padding: 0 20px !important;
}
.notifications-container > a > span:first-child {
    background-color: #aaa;
    border: 1px solid #aaa;
    position: relative;
    margin: 5px 0 0;
    width: 9px;
    height: 10px;
    border-radius: 5px 5px 0 0;
    text-indent: -99999px;
}

.notifications-container > a > span:first-child:hover {
    background-color: #000;
    border-color: #000;
}

.notifications-container > a > span:first-child:before {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #f3f1f2;
    width: 15px;
    height: 0px;
    bottom: -2px;
    left: -3px;
    z-index: 2;
    content: '';
    position: absolute;
    display: block;
}

.notifications-container > a > span:first-child:hover:before {
    border-top-color: #000;
}

.notifications-container > a > span:first-child:after {
    background-color: #aaa;
    border: 1px solid #aaa;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    bottom: -5px;
    left: 2px;
    content: '';
    display: block;
    position: absolute;
}

.notifications-container > a > span:first-child:hover:after {
    border-color: #000;
    background-color: #000;
}

.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child {
    background-color: #aaa;
    border: 1px solid #aaa;
    text-indent: -99999px;
    position: relative;
    margin: 7px 0 0 2px;
    width: 15px;
    height: 10px;
    border-radius: 1px;
}

.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child:hover {
    background-color: #000;
    border-color: #000;
}

.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child:before {
    content: '';
    width: 1px;
    height: 10px;
    left: 7px;
    top: -4px;
    position: absolute;
    -webkit-transform: rotate(-54deg);
    -webkit-transform-origin: bottom;
    -ms-transform: rotate(-54deg);
    -ms-transform-origin: bottom;
    transform: rotate(-54deg);
    transform-origin: bottom;
    background-color: #f3f1f2;
}

.notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child:after {
    content: '';
    width: 1px;
    height: 10px;
    left: 7px;
    top: -4px;
    position: absolute;
    -webkit-transform: rotate(54deg);    
    -webkit-transform-origin: bottom;
    -ms-transform: rotate(54deg);    
    -ms-transform-origin: bottom;
    transform: rotate(54deg);
    transform-origin: bottom;
    background-color: #f3f1f2;
}

.notifications-count {
    line-height: 18px;
    border-radius: 100%;
}
/* Notification Icons - END */

Quick Setup:



Add the below additional CSS to transform "Quick Setup" into a pure CSS lightning icon.

/* Quick Setup Icon - START */
.js-config-site {
    text-indent: -999999px;
    position: relative;
    width: 33px;
}
.js-config-site:before {
    content: '';
    position: absolute;
    display: block;
    top: 4px;
    left: 21px;
    width: 0;
    height: 0;
    border-right: solid 7px #aaa;
    border-top: solid 11px transparent;
}
.js-config-site:after {
    content: '';
    position: absolute;
    display: block;
    top: 12px;
    left: 25px;
    width: 0;
    height: 0;
    border-left: solid 7px #aaa;
    border-bottom: solid 11px transparent;
}
.js-config-site:hover:before {
    border-right-color: #000;
}
.js-config-site:hover:after {
    border-left-color: #000;
}
/* Quick Setup Icon - END */

Edit Site:

To replace "Edit Site" with wrench icon:

/*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;
}

.edit-switch-container label:before {
    content: '';
    position: absolute;
    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;
}
/*Edit Site Wrench Icon - END */

OR to replace "Edit Site" with equalizer icon:

/*Edit Site Equalizer Icon - START */
.edit-switch-container label {
    margin-left: 18px;
    margin-top: 6px;
    width: 1px;
    height: 15px;
    background-color: #8e8e8e;
    box-shadow: 6px 0 0 0 #8e8e8e, 12px 0 0 0 #8e8e8e;
    display: inline-block;
    text-indent: -99999px;
    position: relative;
    left: -15px;
}

.edit-switch-container label:before {
    content: '';
    position: absolute;
    display:block;
    left: -1px;
    top: 2px;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background-color: #8e8e8e;
    box-shadow: 6px 8px 0 0 #8e8e8e, 12px 4px 0 0 #8e8e8e;
}
/*Edit Site Equalizer Icon - END */

Login or Sign Up:



To add icon to Login or Sign Up button, do the following steps:

• Edit the phrase login_or_sign_up variable in the Phrase Manager. In the Translation field, enter the below text: (Change the English text as needed)

<span class="loginIcon"></span>Login or Sign Up

• Add the below CSS in css_additional template in AdminCP or CSS Editor in Sitebuilder.

/* Login or Sign Up Icon - START */
#lnkLoginSignupMenu .loginIcon {
    margin: 3px 7px 0 0;
    width: 7px;
    height: 13px;
    border-radius: 0 1px 1px 0;
    border-top: 1px solid #8e8e8e;
    border-bottom: 1px solid #8e8e8e;
    border-right: 1px solid #8e8e8e;
    position: relative;
    display: inline-block;
    top: 3px
}

#lnkLoginSignupMenu .loginIcon:before {
    content: '';
    top: 3px;
    left: -6px;
    width: 6px;
    height: 6px;
    border-top: solid 1px #8e8e8e;
    border-right: solid 1px #8e8e8e;
    position: absolute;
    display: block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

#lnkLoginSignupMenu:hover .loginIcon,
#lnkLoginSignupMenu:hover .loginIcon:before,
.b-comp-menu-dropdown--open #lnkLoginSignupMenu .loginIcon,
.b-comp-menu-dropdown--open #lnkLoginSignupMenu .loginIcon:before {
    border-color: #000;
}

.signup-plus {
    position: relative;
    display: inline-block;
}

.signup-plus:before,
.signup-plus:after {
    content: '';
    width: 9px;
    height: 2px;
    background-color: #fff;
    display: block;
    position: absolute;
    left: -28px;
    top: -8px;
}

.signup-plus:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.signup-user {
    margin-left: 3px;
    margin-top: 11px;
    width: 14px;
    height: 6px;
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px transparent;
    border-radius: 6px 6px 0 0;
    background-color: #fff;
    position: absolute;
    display: inline-block;
    left: 16px;
    top: 7px;
}

.signup-user:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: solid 1px #fff;
    position: absolute;
    left: 2px;
    top: -10px;
    background-color: #fff;
    display: block;
}
/* Login or Sign Up Icon - END */

Color Customizations:

1. Replace all instances of #aaa or #8e8e8e (gray) with the desired icon color as needed.
2. Replace all instances of #000 (black) with the desired icon color when hovered as needed.
3. Replace all instances of #f3f1f2 (gray) with the same color as the top bar background color.

Enjoy!

Need help or not comfortable installing this mod? Purchase the installation service below:

vBulletin One-Time Plugin Installation Service Add-On: $20

Purchase this product add-on to get one-time professional installation of this mod from us.

[rnedelkow]

This is a great idea. Unfortunately, it doesn't render on my site when I place the css at the bottom of css_additional or via Sitebuilder (Edit Site ON) > Style > CSS Editor. Just curious, is there something else I can try to get this mod to show?

[glennrocksvb]

rnedelkow, I looked at your site and noticed there's a missing closing bracket } which breaks the subsequent CSS code which is for these notification icons.

[rnedelkow]

Nice catch Glenn! Enjoy a coffee on me.

[Menderley]

It wiorks finde for me. THX Glenn

[NumNum]

Any idea what would cause the vertical dotted line?

[NumNum]

My intranet site. You still have credentials?

[NumNum]

When you get time

[NumNum]

Any update on this Glenn?

[NumNum]

Yes, I didn’t notice it right away.

[Mark.B]

I added this to both my self-hosted demo and my Cloud demo, as I think it's cleaner than the default set up.

[glennrocksvb]

I added this to both my self-hosted demo and my Cloud demo, as I think it's cleaner than the default set up.

Thanks! I'm thinking to also replace the Quick Setup with a pure css lightning icon or something.

[NumNum]

also replace the Quick Setup with a pure css lightning icon or something.

Looking forward to it!

[NumNum]

Glenn, I'll send you the code.

[glennrocksvb]

I'm thinking to also replace the Quick Setup with a pure css lightning icon or something.

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