- This topic has 7 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
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 opacityWhen 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!
Customer Support
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.
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.
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
contentproperty as it supports other content as well such as Font Icons.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;Yes – if its output as a background image you can resize the ‘element’ 🙂
Is this resolved ?Thanks, it’s solved
Glad to hear that!
- You must be logged in to reply to this topic.
