• 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

Andrej

Well-known member
#1
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;
}
 

Andrej

Well-known member
#2
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? :)
 

Jake Bunce

XenForo moderator
Staff member
#4
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

Well-known member
#5
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;
}
Awesome, exactly what I needed. Thank you very much!