Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

CSS question

ZhaanZhaan Professional fool ✭✭
edited July 2013 in Vanilla 2.0 - 2.8

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.

Answers

  • Options
    AdrianAdrian Wandering Spirit Montreal MVP

    Which version are you using?

  • Options
    ZhaanZhaan Professional fool ✭✭

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

  • Options
    AdrianAdrian Wandering Spirit Montreal MVP

    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;
    }
    
  • Options
    AdrianAdrian Wandering Spirit Montreal MVP

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

  • Options
    jeongweejeongwee Vanilla version 2.6 ✭✭

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

  • Options
    jeongweejeongwee Vanilla version 2.6 ✭✭
    edited July 2013

    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

  • Options
    AdrianAdrian Wandering Spirit Montreal MVP
    edited July 2013

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

  • Options
    jeongweejeongwee Vanilla version 2.6 ✭✭
    edited July 2013

    edited. i know how its working now thx.

  • Options
    ZhaanZhaan Professional fool ✭✭

    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;
    
    }
    
  • Options
    AdrianAdrian Wandering Spirit Montreal MVP

    @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 :)

  • Options
    ZhaanZhaan Professional fool ✭✭
    edited July 2013

    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!

  • Options
    ZhaanZhaan Professional fool ✭✭

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

Sign In or Register to comment.