Making a template is very easy... just go into the ACP -> Appearance -> Templates for the style you use and select Create New Template
Give it a name (I call mine custom_node_icons.css) and then include the necessary code.
Then in EXTRA.css I just do a
Code:
<xen:include template="custom_node_icons.css" />
Hardest part is finding the node numbers to use (and that's not that hard).
I ended up placing all of my images in a sprite sheet and then use the necessary code to load them from there. I just set a transparency level on the read ones to .4 so they appear dimmer.
Code:
.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
background-image: url("images/nodes/node-sprite.png");
background-position: 0px -88px;
background-color: transparent;
opacity: 0.4;
}
.node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("images/nodes/node-sprite.png");
background-position: 0px -88px;
opacity: 1.0;
background-color: transparent;
}