Color of "double-arrow-down"

[alfreema]

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?

[Wayne Luke]

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.

[alfreema]

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?

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.

[alfreema]

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?

[Wayne Luke]

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.

[alfreema]

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

[Wayne Luke]

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.

[Wayne Luke]

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.

[alfreema]

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.

[alfreema]

nvm ... got it!