CSS question

Zhaan

This might sound a bit weird.. but I use a lot of color coding for categories and navigation on my site, and I would like to give my top-navbar different background colours depending on which category the user is viewing.

Example: it turns green when you're viewing the Gaming category, Blue for tech etc.

Is this possible? Thanks in advance.

vrijvlinder

There is a plugin for that.

http://vanillaforums.org/addon/categoryimageheader-plugin

Adrian

Which version are you using?

Zhaan

Sorry, I forgot to mention that. I'm using 2.1b

Adrian

Firebug is your friend

Just get the number of the category. For example with the below CSS I can make the category head for my second category yellow:

 li#Category_2.Item div.ItemContent div.TitleWrap a.Title
{
background-color:yellow;
}

Adrian

Also if you want the color to change in the nav, when you create a category add a class

jeongwee

i also wanted to ask this question,don even realize i can add a class when i cr8ing a category.thx

jeongwee

i added a class "hello" to my sub gategory when i cr8ing sub gategory at dashboard,but after i added that.i checked theres no class. why? @adriansonline

Adrian

@jeongwee, i see it under ul class="PanelInfo PanelCategories". My class name was "created-this-class" for category 2. See below image

jeongwee

edited. i know how its working now thx.

Zhaan

Hmmm applying #Category_2 to my CSS doesn't seem to work at all

anything wrong with this?

#Category_2 .Row {
width: 100%;
margin-top: 0;
margin-bottom: 0;
 background: #eee0dc url(images/gaming_header_bg.png) repeat-x;
   height: 187px;

}

Adrian

@Zhaan can you share a link to your site so I can look at it? It might also help if you include a screen shot of what you are trying to do, and to know what theme you are using

Zhaan

My site is in maintenance mode atm, and only admins can view it.

Basically, I have a universal menu bar on top of each page with a custom background image. I would simply like to display a different background image on each category page, to make them stand out a bit more.

This is the default code, which works:

.Row {
width: 100%;
margin-top: 0;
margin-bottom: 0;
background: #eee0dc url(images/header_bg.png) repeat-x;
height: 187px;
}

and I thought I could just copy that and add in #Category_2 plus a different background image.. but nothing happens. It doesn't seem to acknowledge #Category_2 (or any other category) at all.

EDIT: will post a screen in a bit!

vrijvlinder

There is a plugin for that.

http://vanillaforums.org/addon/categoryimageheader-plugin

Zhaan

Thanks, I'll play around with that for a bit.