Need Help with my CSS Regarding Category Icons

gqninja

So I found this CSS script to put icons in Vanilla Forums. Dropped it in my style.css.. made some icons and dropped those in my themes images directory. Tried changing the CSS around putting the icons in the theme directory so instead of images/icon-cat1.png I just had icon-cat1.png.. I even tried putting the entire URL in the field and nothing....

/* Category icons on the discussions page */
.DiscussionCategory {
width:40px !important; height:40px !important;
padding:0; margin:0;
text-indent:-9999px;
position:absolute; top:4px; left:2px;
}
.DiscussionCategory span{
display:none;
}
.DiscussionCategory a:link,
.DiscussionCategory a:visited,
.DiscussionCategory a:hover{
display:block;
width:40px !important; height:40px !important;
padding:0; margin:0 !important;
}
.Category_1 .DiscussionCategory a{
background: url("images/icon-cat1.png") 50% 50% no-repeat transparent;
}
.Category_2 .DiscussionCategory a{
background: transparent url(icon-cat2.png) 2px 50% no-repeat;
}
.Category_3 .DiscussionCategory a{
background: transparent url(icon-cat3.png) 2px 50% no-repeat;
}
.Category_4 .DiscussionCategory a{
background: transparent url(icon-cat4.png) 2px 50% no-repeat;
}
.Category_5 .DiscussionCategory a{
background: transparent url(icon-cat5.png) 2px 50% no-repeat;
}
.Category_6 .DiscussionCategory a{
background: transparent url(icon-cat6.png) 2px 50% no-repeat;
}
.Category_7 .DiscussionCategory a{
background: transparent url(icon-cat7.png) 2px 50% no-repeat;
}
.Category_8 .DiscussionCategory a{
background: transparent url(icon-cat8.png) 2px 50% no-repeat;
}
/* Follow this pattern to whatever number of categories you have set up */

/* Add paddings for the linked icons */
.CategoryDescription,
.CategoryDiscussionCount,
.CategoryOptions,
#Discussions li ul{
padding-left:45px;
}

/* Add the icons to the categories page */
#Categories .Category_1 .CategoryDescription{
background: url("images/icon-cat1.png") 50% 50% no-repeat transparent;
min-height:40px;
}
#Categories .Category_2 .CategoryDescription{
background: transparent url(icon-cat2.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_3 .CategoryDescription{
background: transparent url(icon-cat3.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_4 .CategoryDescription{
background: transparent url(icon-cat4.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_5 .CategoryDescription{
background: transparent url(icon-cat5.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_6 .CategoryDescription{
background: transparent url(icon-cat6.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_7 .CategoryDescription{
background: transparent url(icon-cat7.png) 2px 50% no-repeat;
min-height:40px;
}
#Categories .Category_8 .CategoryDescription{
background: transparent url(icon-cat8.png) 2px 50% no-repeat;
min-height:40px;
}
/* Same thing with following the pattern to match the number of cats */

Here is my site: http://www.forums.shadowriot.com

If anyone can help me I'll give a shadowriot.com email or something. Please?!

Kasper

The stylesheet relies on a class (e.g. "Category_1") being added to the category elements. You should do something like this instead which relies on classes already existing in Vanilla:

.Category-comments-and-suggestions .CategoryDescription {
    /* Your icon related CSS here */
}

gqninja

I'll try that out! Thank you for replying. I got that CSS from
http://vanillaforums.org/discussion/3554/style-clickable-category-icons

and people said it worked but I guess I'm just retarded.. >.<

Kasper

It probably worked out fine with Vanilla 1 as the thread is from 2006 :-) ...and you're welcome!