Category Icons for 2.0.18.8

Pixiepop

Hello, Can anyone tell me the steps to add category icons in this version. I have tried to upgrade to a beta version of the software but it doesnt work, everytime it says update successful then when i go to a page i says oops something is wrong here.
So I will stick with version 2.0.18.8 But I really need icons for each category on my main page.
I tried to google etc but no solutions are working or make sense ( not a programmer ) So can anyone give me the basic steps please? I would really appreciate, thank you x

UnderDog

@Pixiepop said:
when i go to a page i says oops something is wrong here.

Awesome. Does it say that with the beta version only or also with 2.0.18.8?

I tried to google etc but no solutions are working or make sense

Can you show the Urls of the search results / solutions that don't make sense?

vrijvlinder

You can probably add icons by simply using css and either an image sprite or make separate images.

Just find the part for the Categories in a web inspector, extract their classes and write new css for them including a background image which will be the icon.

You will need to make room for the icon on the side of the link to the categories etc. It really is all about css and positioning of the image.

Since the categories use the same class of link you would need to do first child, last child etc to indicate which of the links they are.

example of css to add icon to categories

#Panel .PanelInfo.PanelCategories li:first-child > a.ItemLink { 
   padding-right: 18px;
   background: transparent url(icon.gif) no-repeat center right;
}

http://www.vision.to/add-a-small-icon-to-your-links-css-only.php

Tama

@vrijvlinder said:

#Panel .PanelInfo.PanelCategories li:first-child > a.ItemLink { 
   padding-right: 18px;
   background: transparent url(icon.gif) no-repeat center right;
}

http://www.vision.to/add-a-small-icon-to-your-links-css-only.php

Not sure if you mean the main category display but on the category list, categories have their own css class
e.g. : .Category-category-name-in-lower-case
so in css

.CategoryList .Category-category-name-in-lower-case { padding-right: 18px; background: url('pathtourl.png'); }

vrijvlinder

I meant the main category display in my example yes I picked it out of this forum, just as an example of how to add your own icons to a certain link.

This also applies to any links you want to iconize. You either find their class or use the children technique it's only CSS and I like it !!!

hgtonight

This is an upcoming feature in 2.1. I did backport it to 2.0.18.8 for a community member here, so let me know if you want the patch.

I also wrote a plugin that does this called Category Images: https://github.com/hgtonight/Vanilla-Plugins/tree/master/CategoryImages

It isn't very user friendly, but it gets the job done.