1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Changing the color of an individual category strip?

Discussion in 'Styling and Customization Questions' started by KenBrace, Nov 16, 2015.

  1. KenBrace

    KenBrace Active Member

    I'm creating a category in my forum that will be seen by members only so I want it to stand out from among the rest.

    A good way to do this would be to change the color of that particular strip.

    Any idea how to do this?
     
  2. Amaury

    Amaury Well-Known Member

    Code:
    .nodeList .categoryStrip .nodeTitle {
        background-color: #FF0000;
    }
    That's the CSS for the category strip. Then just include the node ID in it.
     
    KenBrace likes this.
  3. KenBrace

    KenBrace Active Member

    Thanks!

    Just one question. How exactly should I include the node ID?

    Is it targeted as a class, id, etc.?

    I tried...
    Code:
    .nodeList .categoryStrip .nodeTitle .17 {
        background-color: #FF0000;
    }
    ...and...
    Code:
    .nodeList .categoryStrip .nodeTitle #17 {
        background-color: #FF0000;
    }
    ...but neither worked.
     
  4. Amaury

    Amaury Well-Known Member

    I believe it would be .node_17 at the beginning.
     
    KenBrace likes this.
  5. KenBrace

    KenBrace Active Member

    Just tried it and it doesn't seem to work.
    Code:
    .node_17 .nodeList .categoryStrip .nodeTitle {
        background-color: #FF0000;
    }
    
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Code:
    .nodeList .node_x .categoryStrip {
    background-color: @primaryLighter;
    }
     
    Amaury, KenBrace and maszd like this.
  7. KenBrace

    KenBrace Active Member


    Doesn't seem to work either.
    Code:
    .nodeList .node_17 .categoryStrip {
        background-color: @primaryLighter;
    }
    
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    It works for me on a default style, so perhaps you have something in your custom style which is overriding it.
     
  9. KenBrace

    KenBrace Active Member

    Oh wait, I figured out the problem. The CSS works. It's just being over-written by a background-image (I'm using a theme). All I had to do was set the background-image value to "none".
     
  10. KenBrace

    KenBrace Active Member

    Wow, spot on. (y)
     

Share This Page