Announcement

Collapse
No announcement yet.

Color of "double-arrow-down"

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Color of "double-arrow-down"

    I'd like to change the color of the double down arrow in the Topics list. When I inspect it, it appears to have the class:

    b-icon__double-arrow-down--blue

    are there any other options and where can I change that at?

  • #2
    Icons are controlled by the icon group of Style Variables. This will change all icons.

    To change a single icon, you would have to override that class or find the specific classes for the icons in the sprite_icons_general.svg and write custom CSS for them.

    You can see all icons on the /special/css-examples page on your site. You need to be logged in as an Administrator with Site Builder and Style editing permissions to see this page. Scroll down to the Sprite shown on the page. Clicking on an icon will give you its name and base class as a starting point.
    Translations provided by Google.

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

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      Icons are controlled by the icon group of Style Variables. This will change all icons.
      So I don't mind changing them all (I don't think). When I go into a specific template's Style Variable Editor, I scroll down and found "Icons". I want my icons to have a yellow theme. So I see there is a icon_color_yellow and I can tweak the color. But how do I tell the template to use the "yellow" theme, instead of appending --blue to all of the icons? Or am I off in the weeds?

      Originally posted by Wayne Luke View Post
      You can see all icons on the /special/css-examples page on your site. You need to be logged in as an Administrator with Site Builder and Style editing permissions to see this page. Scroll down to the Sprite shown on the page. Clicking on an icon will give you its name and base class as a starting point.
      This is cool.

      Comment


      • #4
        Would it be easier to just throw that sprite image into photoshop and swap colors that way? Will I have to remember to swap it out after each upgrade, if I do that?

        Comment


        • #5
          The images themselves are SVG images. Basically a series of text commands that tells the browser how to draw the image. They get their colors from CSS.
          Translations provided by Google.

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

          Comment


          • #6
            SVG -- Now I get it!

            But that puts me back to this question then: "When I go into a specific template's Style Variable Editor, I scroll down and found 'Icons'. I want my icons to have a yellow theme. But how do I tell the template to use the 'icon_color_yellow' theme?"

            Comment


            • #7
              The names can be a little confusing. There aren't multiple themes. Look at your current sprite. The default theme is blue icons with gray highlights. I believe yellow is only used in the Infraction Cards shown on the sprite. Other colors just fill in where it makes sense.

              If you want the blue colors to be yellow, change those style variables to shades of yellow.
              If you want the grays to be yellow, change those style variables.
              Etc...

              As you make changes, you can refresh the css-examples page and they will take affect immediately.
              Translations provided by Google.

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

              Comment


              • #8
                Or you can load sprite.php?sprite=sprite_icons_general.svg&styleid=1 on your site. Replace the styleid number with your style's id as seen in the Style Manager when hovering over the style name. 1 is the default style.
                Translations provided by Google.

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

                Comment


                • #9
                  Originally posted by Wayne Luke View Post
                  If you want the blue colors to be yellow, change those style variables to shades of yellow.
                  If you want the grays to be yellow, change those style variables.
                  Etc...
                  Oohhhhh. So let the theme color remain "blue" but change the actual color to yellow (or whatever). Got it. The trick is finding colors that work on both light and dark background templates.

                  Comment


                  • #10
                    nvm ... got it!
                    Last edited by alfreema; Fri 4 Oct '19, 3:17pm.

                    Comment

                    Related Topics

                    Collapse

                    Working...
                    X