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

    #16
    Originally posted by glennrocksvb View Post
    This is done. Check it out in the first post!
    I'm not sure why, but in Firefox it's displayed as follows:
    Click image for larger version

Name:	bad.png
Views:	408
Size:	491 Bytes
ID:	6709

    In all other browsers it's displayed correctly:
    Click image for larger version

Name:	good.png
Views:	392
Size:	572 Bytes
ID:	6710

    (also using the default style)

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Why oh why Firefox? Thanks for reporting. I'll take a look.

    #17
    To fix the Firefox issue, add a width. See added code in red below:

    Code:
    /* Quick Setup Icon - START */
    .js-config-site {
        text-indent: -999999px;
        position: relative;
    [COLOR=#FF0000]    [B]width: 33px;[/B][/COLOR]
    }
    I have updated the first post to add this fix.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


    • Fleiding
      Fleiding commented
      Editing a comment
      Thanks!

    #18
    I also plan to change Edit Site into an icon. Which one do you think is better?

    Click image for larger version  Name:	edit-site-icon.png Views:	1 Size:	37.6 KB ID:	6715
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


    • Fleiding
      Fleiding commented
      Editing a comment
      I prefer the top one.

    #19
    Wrench!

    Also, is there a way to allow a certain number of messages to display when you click on the message icon (defaultvB does this)?

    I find this very useful when carrying on more than 1 or 2 conversations.

    Comment


      #20
      The second one looks better.

      Comment


        #21
        Thanks for the feedback. I'll post both the equalizer and wrench icons to give you options to choose the one you prefer.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #22
          Here is the css for the wrench. Had the same idea before initialized by your great free css-based icons for pm and notifications :-)

          After I post the code here I looked a little bit deeper at my not opened site and found some bugs in the code.
          Hope this one is working well now. updated it below




          HTML Code:
          .switch-container label {
              content: '';
              text-indent: 100%;
              white-space: nowrap;
              margin-left: 3px;
              margin-top: 3px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #aaa;
              transform-origin: center 10.5px;
              transform: rotate(-45deg);
          }
          .switch-container label:after,.switch-container label:before{
              content: '';
              position: absolute;
              display: block;}
          .switch-container label:before{
              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;
          }
          .switch-container label:after {
              border-radius: 0 0 1px 1px;
              background-color: #aaa;
              border-left: solid 1px transparent;
              border-right: solid 1px transparent;
              border-top: solid 1px white;
              border-bottom: solid 1px transparent;
              left: 4px;
              top: 4px;
          }
          Last edited by delicjous; 10-08-2017, 10:28 AM.
          My forum closed !

          Comment


            #23
            FYI. I have updated the first post to add pure CSS code for wrench, equalizer and login icons.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #24
              There was a missing step in the instructions for the Login or Sign Up icon. Updated it in the first post.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #25
                Originally posted by glennrocksvb View Post
                There was a missing step in the instructions for the Login or Sign Up icon. Updated it in the first post.
                For some reason I cannot get this to work on my forum. I edited the phrase and added the code, but it won't appear.

                Comment


                #26
                Thank you works perfect
                A cordial greeting

                Comment


                  #27
                  Originally posted by glennrocksvb View Post
                  .notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger >; span:first-child:before {
                  Minor typo. Looks like there is an unwanted semi-colon ;

                  It should be:
                  .notifications-container.js-pmchat__dropdown .b-comp-menu-dropdown__trigger > span:first-child:before {

                  Also, the text indent makes the page scroll on forever.

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

                  I changed it from -99999px to -999px and the page height went back to normal:

                  Comment


                    #28
                    Good catch William! I have updated the CSS in the first post. Thank you!
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #29
                      Is there any way to get the 'Notifications' and 'Messages label to appear on hover beneath the icon?

                      Comment


                        #30
                        The wrench css works as it is supposed to but with one little drawback when you view who is online which of course can be only seen by admin as seen in pic below
                        Click image for larger version

Name:	wrench.png
Views:	104
Size:	24.0 KB
ID:	10299
                        Wise men say nothing Fools never listen

                        Comment


                        • William
                          William commented
                          Editing a comment
                          I have the same issue

                      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 "|||"