[Resolved] How to add custom specific icon and color to each category und tag

[Maike]

Thank you for your work. I really like GeneratePress.

I’ve been looking for plugins for a while now, but either they stopped working or there is actually nothing that works.

I would like to give each category a specific custom icon, color and image.
When I’m on the search results page:
– the icon should be in front of the category name,
– the color should appear as the border-bottom-color (like an underlining) of the category name and appear as the background color of the preview template with a certain opacity

When I’m on the individual blog post page:
– the icon should be in front of the category name,
– the color should appear as the border-bottom-color (like an underlining) of the category name and appear as the background color of the individual blog post page with a certain opacity

(I’m using elements for the layout and the blocks of the preview template).

Can you think of a solution so that it is always implemented dynamically on the website?

My website is currently only a local installation. But if you need it, I could put it for testing online?

Thanks for help!

[David]

Hi there,

thats tricky to do – as you say most plugins that provide things like category icons are no longer support or are only for the backend.

It can be done with some CSS – but the big question there is how many different categories are you using ? As each category would require its own specific CSS.

[Maike]

Hey David,
Thank you for your fast reaction. That’s not a problem if I have to adjust the CSS for each category. Only in the Inspector of the browser I was not able to select a specific category. Each styling was only taken generally for all categories at the same time.

Can you help me with code examples for my questions? That would be great.

[David]

So for the cat links it will be something like this:

/* apply a default style to all cat links */
.entry-meta .cat-links a {
    /* Your styles here */
}
/* Create a Psuedo element before all cat links for image */
.entry-meta .cat-links a:before {
    content: url('full_url_to_the_image');
    display: inline;
    margin-right: 10px;
}

/* Specific Category Link Styles */
.entry-meta .cat-links a[href*='category-slug'] {
    /* Styles for the specific category */
}
/* Change pseudo element image for the specific category */
.entry-meta .cat-links a[href*='category-slug']:before {
    content: url('full_url_to_the_category_specific_image');
}

Note the content: url('full_url_to_the_category_specific_image'); this method will only display an image file at its exact size – it cannot be manipulated by CSS – so the image you use will have to be the exact size required.

You can look up the content property as it supports other content as well such as Font Icons.

[Maike]

Thank you, that helped me a lot. Now I can change the styling of a certain category link.

You can adjust the size of the image with this

 content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-right: 2px;
  background: url('image-url.svg');
  background-size: cover;

[David]

Yes – if its output as a background image you can resize the ‘element’ 🙂
Is this resolved ?

[Maike]

Thanks, it’s solved

[David]

Glad to hear that!

[Author]

Posts