Category images and colors

Can you please post a link to your site? Many theme’s will add a class name to the blog excerpt that tells what class it belongs to. Not sure about the Avada theme; because it’s a commercial theme I can’t install it myself to see. And do you have images already uploaded that you want to use as icons?

Do you ever have a case where a blog entry can belong to more than one category?

Oops, I should have said, “Many theme’s will add a class name to the blog excerpt that tells what category it belongs to.”

Yes I can, but there’s a coming soon cc plugin activated. https://profirendszerezes.hu
Avada’s demo site, you can see what you want I think. https://theme-fusion.com/avada/medium-alternate-right-sidebar/ I’m using that template for blog. I hope this will help. Yes, I have the pictures uploaded.

No. One post for one categoy only.

OK, from the demo it looks like each post excerpt does have a class associated with the category included in it. So, here’s a very general rule that you can try:

.fusion-posts-container .category-photography .entry-title:before {
   content: url(/images/photo-icon.jpg);
}

You will want to add this rule either through the theme’s Custom CSS option (if it has one), using a child theme, or using a CSS plugin like Jetpack or Custom CSS Manager. You will create one rule for each category that you have. What this rule will do is place the icon just before the excerpt title.

Notice that the middle part of the selector is a class name for the photography category. When you created your categories, you associated a category slug with each category. The category slug is appended to the word category to make up the class name. So you will want to use whatever category slugs you’ve created for your own categories.

The content url, of course, points to the image icon that you want to use for that category. You will have to add some other CSS to style it correctly.

Thanks, will try it today. Oh, my timezone is UTC +1.

I’ve just added 3 pictures. One from frontend, and 2 from Chrome Dev.
There are my classes. Just can’t find the perfect class. Sorry if I’m too lame. ??

Should I add some div to index.php too?

I’m using child theme.

Pics:
Frontend

Code1

Code2

You should not have to touch any of the .php files, you only need to add CSS rules using a child theme (in the child theme’s style.css file) or using a CSS plugin.

From the Code1 picture, you can see that the hentry <div> has a class called category-bevetel-kiadas, so your rule would be something like:

.fusion-posts-container .category-bevetel-kiadas .entry-title:before {
   content: url(/images/icon-bevetelkiadas.jpg);
}

Where the content url points to the image that you’ve uploaded for the Bevetel Kiadas category.

It works! Thanks.

Only difference is that’s not fusion-posts-container class, it’s just post-container, and ID. Now, it works fine. So the right code is:

#posts-container .category-bevetel-kiadas .entry-title:before {
   content: url(/images/icon-bevetelkiadas.jpg);
}