Modifying post/voting tools using css

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Craig
    Senior Member
    • Jan 2008
    • 996
    • 6.X

    Modifying post/voting tools using css

    I'm looking to change the colors of each icon using css. I am not very familiar with css coding, but can identify areas using the inspector tool. Is there anyone willing to share one format that would change the color of one of the icons background images? I think i can figure the others out from there.

    I did a search and found no instructions for this specific css change.

    Click image for larger version

Name:	icons.PNG
Views:	531
Size:	2.8 KB
ID:	4415632
    adktramping ~ my happy place.

    "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

    Vote for your favorite feature requests and the bugs you want to see fixed.
  • In Omnibus
    Senior Member
    • Apr 2010
    • 2310

    #2
    The easiest way would be to edit the hex values in the sprite CSS

    Find the sprite_icons_general.svg template

    Identify the specific element using the inspector tool.

    Search for each element in the CSS and change the hex value as you like.

    Comment

    • Wayne Luke
      vBulletin Technical Support Lead
      • Aug 2000
      • 73981

      #3
      While logged in as an administrator on your site, go to /special/css-examples on the front end. Scroll down to the SVG Sprite. Click on the icon you want to change and the system will tell you the class it uses.

      Update its CSS in the blank sprite CSS template shown in Sitebuilder under Style -> Edit CSS.
      Last edited by Wayne Luke; Tue 21 May '19, 7:24am.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud demonstration site.
      vBulletin 5 API

      Comment

      • Craig
        Senior Member
        • Jan 2008
        • 996
        • 6.X

        #4
        Ok, that is very helpful identifying the class it is using.

        .b-icon b-icon__like

        However I am not familiar with assigning the color I want using css.

        Code:
        [COLOR=brown].[/COLOR]b-icon b-icon__like[COLOR=brown] [COLOR=black]{[/COLOR]
        [COLOR=red]  background-color[COLOR=mediumblue][COLOR=black]:[/COLOR] #[/COLOR][/COLOR][/COLOR]F9EDC7[COLOR=brown][COLOR=red][COLOR=mediumblue][COLOR=black];[/COLOR][/COLOR][/COLOR]
        [COLOR=black]}[/COLOR][/COLOR]
        adktramping ~ my happy place.

        "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • In Omnibus
          In Omnibus commented
          Editing a comment
          I can give you any number of cheat sheets but this one might serve your purposes. Just replace the existing six character hex code with the one that corresponds to your chosen color. https://www.colorhexa.com/color-names

        • Craig
          Craig commented
          Editing a comment
          Yeah I must be doing something wrong. Even the change didnt take.

          APCO-Atlantic is the home of the largest Chapter in APCO. We proudly represent 8 wonderful states. We have a unique Chapter, our family is comprised of the states of Connecticut, Massachusetts, Maine, New Hampshire, New Jersey, New York, Rhode Island, and Vermont. We were chartered in August, 1966.
      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

        #5
        You should be able to use something like this:

        Code:
        .b-icon .b-icon__like {
            color: blue;
            fill: blue !important;
        }
        However, it seems our code doesn't allow it for some reason. So you need to get more specific.

        In your css_additional.css template put this code:
        Code:
        [id^="vote"] .b-icon {
            background-color: #F9EDC7 !important;
        }
        In your css_sprite_icons_general.css template add something similar to this code:
        Code:
        // Outline of like icon
        #vb-svg-vote{
            fill: blue !important;
        }
        
        // Fill of like icon
        #vb-svg-fill-4 {
            fill:orange !important;
        }
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • Craig
          Craig commented
          Editing a comment
          I only copied and pasted the code to the locations stated, with no modifications.

        • Craig
          Craig commented
          Editing a comment
          If it helps it is still in place. https://apco-atlantic.org/

        • Craig
          Craig commented
          Editing a comment
          Ok, I see it but only when I set the icon to non transparent, then all icons are gone and only see a square the color designated
      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #6
        Originally posted by Wayne Luke
        In your css_sprite_icons_general.css template add something similar to this code:
        Code:
        // Outline of like icon
        #vb-svg-vote{
        fill: blue !important;
        }
        
        // Fill of like icon
        #vb-svg-fill-4 {
        fill:orange !important;
        }
        I think that should go in sprite_icons_general.svg template.

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73981

          #7
          Users shouldn't edit the svg template. It can cause template merge problems. It is also inaccessible to cloud users.

          We provided the css_sprite_icons_general.css template for this purpose.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment

          • In Omnibus
            Senior Member
            • Apr 2010
            • 2310

            #8
            What I did (and it's working) was to copy the code from the sprite_icons_general.svg template to the css_sprite_icons_general.css template and then edit the hex codes as needed.

            Comment


            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              Code:
              .b-icon b-icon__like {
              background-color: #e32636 !important;
              }
              will not work.

            • Craig
              Craig commented
              Editing a comment
              Just to verify, is it allowing a unique color for each icon, or are they all the same color (the ones you have working on your test sites)?

            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              The single icon specified in my code. Exactly how I laid it out in my post above. See the attachment in the post below.
          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

            #9
            Click image for larger version

Name:	2019-05-22_10-22-02.png
Views:	471
Size:	3.7 KB
ID:	4415789


            One single icon altered.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment


            • Craig
              Craig commented
              Editing a comment
              That is exactly what I am trying to achieve!

            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              This is what I am using -

              Originally posted by Wayne Luke
              In your css_sprite_icons_general.css template add something similar to this code:
              Code:
              // Outline of like icon
              #vb-svg-vote{
              fill: blue !important;
              }
              
              // Fill of like icon
              #vb-svg-fill-4 {
              fill:orange !important;
              }
          • Craig
            Senior Member
            • Jan 2008
            • 996
            • 6.X

            #10
            I am using in css_additional.css;

            Code:
            [id^="vote"] .b-icon {
                background-color: #F9EDC7 !important;
            }
            In the css_sprite_icons_general.css;

            Code:
            // Outline of like icon
            #vb-svg-vote{
            fill: blue !important;
            }
            
            // Fill of like icon
            #vb-svg-fill-4 {
            fill:orange !important;
            }
            What would trip it up?
            adktramping ~ my happy place.

            "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment

            • Carrfixr
              Senior Member
              • May 2017
              • 1364
              • 5.5.x

              #11
              I can't get it to work either

              Comment

              • Wayne Luke
                vBulletin Technical Support Lead
                • Aug 2000
                • 73981

                #12
                I'd need to see URLs of where it is supposed to be working.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment

                • Craig
                  Senior Member
                  • Jan 2008
                  • 996
                  • 6.X

                  #13
                  Here is mine, https://apco-atlantic.org/
                  adktramping ~ my happy place.

                  "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

                  Vote for your favorite feature requests and the bugs you want to see fixed.

                  Comment

                  • glennrocksvb
                    Former vBulletin Developer
                    • Mar 2011
                    • 4011
                    • 5.7.X

                    #14
                    I checked your svg sprite at https://apco-atlantic.org/sprite.php...&ts=1558604815 and saw that you are using // as your comment delimiter in CSS. Comments in CSS should be inside /* and */. That's why your code is not working.

                    Click image for larger version  Name:	Capture.PNG Views:	0 Size:	102.4 KB ID:	4415832

                    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                    Comment


                    • Craig
                      Craig commented
                      Editing a comment
                      Thank you, Glenn. Something so simple too. That's the difference between experience, and not.
                  • Craig
                    Senior Member
                    • Jan 2008
                    • 996
                    • 6.X

                    #15
                    All,

                    Thanks for all the help and guidance on this.

                    I posted in Tutorials in hopes these steps and instructions from you folks will help someone else.
                    adktramping ~ my happy place.

                    "Whoever said practice makes perfect was an idiot. Humans can't be perfect because we're not machines." ~ Sam Gardner.

                    Vote for your favorite feature requests and the bugs you want to see fixed.

                    Comment

                    Related Topics

                    Collapse

                    Working...