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:	13
Size:	61.4 KB
ID:	6470
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        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?
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        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
        If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

        Comment


          #9
          Any update on this Glenn?
          If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

          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.
          If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

          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!

                If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                Comment


                  #14
                  Glenn, I'll send you the code.
                  If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

                  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