I want only the icon color of the subcategory to be visible. Main category should not have an icon color I don’t want it to look two-tone. how can i do this? [image] [ert]

I’m not sure if there’s a setting for this, but I can show you how I would try to change using CSS: Right click on the icon and choose ‘Inspect’. [image] This will open up the browser dev tools. (Note: I’m using Chrome here but most browsers can do the same thing!) There’s a lot to look at, but there’s two main sections we’ll focus on–Elements, which shows the parts of the page in a nested hierarchy, and Styles, which shows what CSS is affecting the selected element. [image] Using right click → Inspect usually gets us pretty close to the element we want to edit, but often times you need to dig around a bit. In this case, it selected a element, but it looks like the element responsible for the icon is inside of it: a ::before element. [image] One of the ways you can find the right element is to watch the page as you hover over the items listed in the elements panel. When I hovered over the ::before, just the icon was highlighted: [image] Over in the Styles panel, we can see that there’s a declaration setting the background to red, but it’s being overridden by a different rule that sets it to a 2-color background. (Note: Feel free to edit any of the CSS in the Styles panel to experiment. Any changes are temporary and will be reverted when the page is refreshed. You can also toggle individual declarations on and off to see their effects) [image] We can make a new rule to override it again by copying the selector part from the top rule and the original background declaration from the bottom rule. [image] This new rule would go in your custom/theme CSS and, if it all worked correctly, the icons should be solid colors representing the subcategories! .badge-category__wrapper .badge-category.--has-parent:before { background: var(--category-badge-color); }

Thanks for the detailed explanation

Hmm, that’s strange. When I use the mobile view on my computer, it shows the same CSS rules, so I’m not sure why it would be displaying differently. The only thing I can think of is to make sure the new code is in the Common.scss section so it’s used for both.

oh it’s all my fault It works fine, no problems

No worries, glad it’s working! :slight_smile:

How can I make the category icon color single color?

Development

Ahmed26 April 5, 2024, 1:38pm 4

@Bryce_Huhtala desktop worked

Didn’t work on mobile

Which code should I enter for mobile?

Topic		Replies	Views
Coloring for categories Product Support	1	157	May 26, 2025
CSS trick to change color of icons? Development css	1	1645	November 16, 2023
Only show sub-category color in icon? Product Support	1	471	November 18, 2021
Inline category badge styles - Change to Stylesheet Feature	10	3757	April 25, 2017
Colors of texts and titles and icon UX	1	596	August 12, 2020

How can I make the category icon color single color?

Related topics