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

    Official - Free 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:

    Product Installation 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.

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

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

              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!

                    Comment

                    Working...
                    X