Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:

    Click image for larger version  Name:	notification-icons-mobile-min.png Views:	1 Size:	17.6 KB ID:	6159
    Click image for larger version  Name:	notification-icons-min.png Views:	1 Size:	26.8 KB ID:	6160

    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:

    Click image for larger version  Name:	quick-setup-icon.png Views:	1 Size:	10.0 KB ID:	6677

    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 */
    OR to replace "Edit Site" with equalizer icon:​

    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:

    Click image for larger version  Name:	image.png Views:	1 Size:	35.8 KB ID:	7070

    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:
    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.

    Buy Now Add to Cart View Cart
    Last edited by glennrocksvb; 11-08-2017, 06:42 AM. Reason: Corrected typo in CSS and fixed scrolling issue cause by CSS. Thanks to William.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    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?

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      I have to take a look at your site to check if the css is there.

    • rnedelkow
      rnedelkow commented
      Editing a comment
      pm sent Glenn.

    #3
    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.

    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #4
      Nice catch Glenn! Enjoy a coffee on me.

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Thanks! Glad to help

      #5
      It wiorks finde for me. THX Glenn

      Comment


        #6
        Any idea what would cause the vertical dotted line?
        Click image for larger version

Name:	Untitled.png
Views:	391
Size:	61.4 KB
ID:	6470

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          I have to see the page and inspect the css

        • delicjous
          delicjous commented
          Editing a comment
          Comes with this css:

          .b-comp-menu-dropdown__content-item {
          display: block;
          padding: 0.375rem 0.75rem;
          cursor: pointer;
          white-space: nowrap;
          border-top: 1px dotted #C9CED2;
          }

        • delicjous
          delicjous commented
          Editing a comment
          Sorry, I did not read and look carefully enough :-( didn't mention the word vertical and the vertical line :-) Could you fix it?

        • NumNum
          NumNum commented
          Editing a comment
          No worries delicjous.

        #7
        My intranet site. You still have credentials?

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          I think so. But I will not be able to take a look right now.

        #8
        When you get time

        Comment


          #9
          Any update on this Glenn?

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Sorry I haven't had a chance to check. Did the issue occur after adding the css for this mod?

          #10
          Yes, I didn’t notice it right away.

          Comment


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

            Comment


              #12
              Originally posted by Mark.B View Post
              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.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #13
                Originally posted by glennrocksvb View Post
                also replace the Quick Setup with a pure css lightning icon or something.
                Looking forward to it!

                Comment


                  #14
                  Glenn, I'll send you the code.

                  Comment


                    #15
                    Originally posted by glennrocksvb View Post
                    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!
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment

                    Users Viewing This Page

                    Collapse

                    There is 1 user viewing this forum topic.

                    • Guest Guest

                    Latest Posts

                    Collapse

                    Working...
                    X
                    Searching...Please wait.
                    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                    Please push the back button and reload the previous window.'
                    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                    Please push the back button and reload the previous window.'
                    An internal error has occurred and the module cannot be displayed.
                    There are no results that meet this criteria.
                    Search Result for "|||"