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

Assigning different node icon for all forums under each category

Discussion in 'Styling and Customization Questions' started by Andrej, Mar 15, 2013.

  1. Andrej

    Andrej Well-Known Member

    Is there a better way to assign Node Icon A to Category A and forums under it, Node Icon B to Category B and forums under it, and so on without having to insert the code below for each node separately?

    • Category A
      • Forum A (Icon A)
      • Forum B (Icon A)
      • Forum C (Icon A)
    • Category B
      • Forum A (Icon B)
      • Forum B (Icon B)
      • Forum C (Icon B)
    Code:
    .node.node_81 .forumNodeInfo .nodeIcon, .node.node_81 .categoryForumNodeInfo .nodeIcon {
        background-image: url("a.png");
        background-position: 0px 0px;
    }
    .node.node_81 .forumNodeInfo.unread .nodeIcon, .node.node_81 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("a.png");
        background-position: 0px 0px;
    }
     
  2. Andrej

    Andrej Well-Known Member

    Hm.. I suppose this is not possible.. the only reason for asking this is me worrying about having a quite long extra.css file because I had to go over 200+ nodes and actually just set three different images for forums under each of those three categories.. copying and pasting the above code for each node separately.

    ... but since I don't notice any performance issues... maybe there is nothing to worry about? :)
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    A few hundred lines in EXTRA.css isn't going to make any difference.
     
    Shelley and Andrej like this.
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This will hit all nodeIcons under the specified category (node_id 1 in the below code):

    Code:
    li.node.category.node_1 .nodeInfo .nodeIcon {
        background-image: url("a.png");
        background-position: 0px 0px;
    }
    li.node.category.node_1 .nodeInfo.unread .nodeIcon {
        background-image: url("a.png");
        background-position: 0px 0px;
    }
    
     
    Andrej likes this.
  5. Andrej

    Andrej Well-Known Member

    Awesome, exactly what I needed. Thank you very much!
     

Share This Page