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.
Quick Setup:
Add the below additional CSS to transform "Quick Setup" into a pure CSS lightning icon.
Edit Site:
To replace "Edit Site" with wrench icon:
OR to replace "Edit Site" with equalizer icon:
Login or Sign Up:
To add icon to Login or Sign Up button, do the following steps:
Color Customizations:
Enjoy!
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.
Code:
/* 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.
Code:
/* 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:
Code:
/*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 */
Code:
/*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)
HTML Code:
<span class="loginIcon"></span>Login or Sign Up
- Add the below CSS in css_additional template in AdminCP or CSS Editor in Sitebuilder.
Code:
/* 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:
- Replace all instances of #aaa or #8e8e8e (gray) with the desired icon color as needed.
- Replace all instances of #000 (black) with the desired icon color when hovered as needed.
- Replace all instances of #f3f1f2 (gray) with the same color as the top bar background color.
Enjoy!
Comment