How can I make the category icon color single color?

dev
1

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
ert905×371 27.8 KB

2

I’m not sure if there’s a setting for this, but I can show you how I would try to change using CSS:

  1. Right click on the icon and choose ‘Inspect’.
    image

  2. 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
    image786×804 178 KB

  3. 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 <span> element, but it looks like the element responsible for the icon is inside of it: a ::before element.

    image
    image766×644 113 KB

  4. 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

  5. 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
    image768×282 80.4 KB

  6. 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
    image1139×504 106 KB

  7. 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);
}
5 Likes
3

Thanks for the detailed explanation

1 Like
4

@Bryce_Huhtala desktop worked

Didn’t work on mobile

Which code should I enter for mobile?

5

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.

2 Likes
6

oh it’s all my fault

It works fine, no problems

7

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

2 Likes