XF 1.2 Separate icon for each sub-forum

JayX

Active member
I wanted separate icons for each individual node, so was using the following in extra.css;

Code:
.node .node_1 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon,
.node .node_1 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("..."); background-position: 0px 0px;
}

However, this doesn't work for sub-forums / the children of a node. Is there a simple tweak to the code I can make when adding an icon for the children of a node, or is that something a lot more complex?
 
here is some example code that works on the default 1.2 subforum column. You'll have to add more IDs and adjust the css to your preference.

Code:
.subForumList li.node_4 .nodeTitle:before {
background: url("@imagePath/xenforo/icons/member_markup.png") no-repeat scroll 0 0 transparent;
height: 13px;
  width: 15px;
  content: "";
  padding-left: 20px;}

Screenshot_6.webp

Edit: If your not referring to subforum columns then Mikos guide will allow different imagery on subforums in discussion listings you have to find the ID and adjust to preference. http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/
 
Last edited:
Thanks, but:

k.webp

When you're in a node (see above), I want to be able to change the icons for where the arrow is pointing.

On the main index page, the guide you linked me to works fine for changing the icons for nodes, but NOT forum the node's children (the sub-forums).
 
Thanks, but:

View attachment 53441

When you're in a node (see above), I want to be able to change the icons for where the arrow is pointing.

On the main index page, the guide you linked me to works fine for changing the icons for nodes, but NOT forum the node's children (the sub-forums).

The following works for me though when I used @imagePath it wouldn't. you'll have to adjust and add to your preference.

Code:
.node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
  background-position: 0 0;
  background-repeat: no-repeat;

}
.node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
  background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

Screenshot_7.webp
 
Thanks, but:

View attachment 53441

When you're in a node (see above), I want to be able to change the icons for where the arrow is pointing.

On the main index page, the guide you linked me to works fine for changing the icons for nodes, but NOT forum the node's children (the sub-forums).

Not with it today. Just to say "@imagePath" will work. I had the particular icon in the example on another style while i was testing on default which at the time didn't have that example icon to that styles icon directory. :facepalm: so just adjust the ID accordingly and image path for both read and unread icons on the subforums you want to apply to. You also don't have to add background-repeat either.

Code:
.node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;

}
.node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;

}
 
Not with it today. Just to say "@imagePath" will work. I had the particular icon in the example on another style while i was testing on default which at the time didn't have that example icon to that styles icon directory. :facepalm: so just adjust the ID accordingly and image path for both read and unread icons on the subforums you want to apply to. You also don't have to add background-repeat either.

Code:
.node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;
opacity: 1.0;

}
.node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
  background-image: url("@imagePath/xenforo/icons/admin_markup.png");
  background-position: 0 0;
opacity: 0.5;
}

And if you want add a little transparency in there for the read ones to highlight it from the unread you can add the opacity statements that I put in @Shelley's code.
 
And if you want add a little transparency in there for the read ones to highlight it from the unread you can add the opacity statements that I put in @Shelley's code.

Good catch @Tracy Perry :) Another thing I do as well as lower the opacity slightly is make the read node icon greyscale. Thought i'd throw that out there on the chance you/OP/anyone may want to do the same though it'll entail some graphic editor work.
 
Good catch @Tracy Perry :) Another thing I do as well as lower the opacity slightly is make the read node icon greyscale. Thought i'd throw that out there on the chance you/OP/anyone may want to do the same though it'll entail some graphic editor work.
Yep - but just using the opacity allows you to be "lazy" and have one icon for read and unread. With 308 nodes (some of them the same manufacturer) it would have entailed a lot of editing that I was not comfortable (at the time) doing. :whistle:
 
Yep - but just using the opacity allows you to be "lazy" and have one icon for read and unread. With 308 nodes (some of them the same manufacturer) it would have entailed a lot of editing that I was not comfortable (at the time) doing. :whistle:

True. I haven't got many forums and it did take a bit of time doing the icons for each forum in the read/unread state. Sites with more it would entail a huge undertaking and a time consuming task so agree opacity would be the better option.
 
That was it. I had a brain fart and thought that since I wasn't seeing the broken image icon or pull any image at all, it wasn't working right, as if it was being pulled from html and not css. But now I have another issue. How do I get those dimensions to resize my icon to those specifications (15x13). Right now it just keeps taking the first 15x13px of the image and hiding the rest.
 
That was it. I had a brain fart and thought that since I wasn't seeing the broken image icon or pull any image at all, it wasn't working right, as if it was being pulled from html and not css. But now I have another issue. How do I get those dimensions to resize my icon to those specifications (15x13). Right now it just keeps taking the first 15x13px of the image and hiding the rest.

Adjust the width, height and padding to suit will fix this if your using the subforum column code. A more thorough guide can be found here you just need to adjust the elements to your desired size pending on what sizes you are using for icons. http://xenforo.com/community/resources/1-2-subforum-unread-read-icons-indicators.1988/
 
I tried changing the dimensions in the css, but no matter what size I put in there, it always keeps the images stuck at the same small size (which is the height of the subforum text). So it seems that the size of these icons are simply determined by something that controls the lines for the subforums. Any ideas on that?
 
I tried changing the dimensions in the css, but no matter what size I put in there, it always keeps the images stuck at the same small size (which is the height of the subforum text). So it seems that the size of these icons are simply determined by something that controls the lines for the subforums. Any ideas on that?

Ah yeah, your absolutely right. I now remember this issue and I tried changing the line-height (tried many things infact) and it only seems they will change or not get cropped if you change the subforum title size (which is a right PIA). I should have remembered since it was an issue that kept be baffled for an hour or so.
 
The following works for me though when I used @imagePath it wouldn't. you'll have to adjust and add to your preference.

Code:
.node.node_15 .forumNodeInfo.unread .nodeIcon, .node.node_15 .categoryForumNodeInfo.unread .nodeIcon {
  background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
  background-position: 0 0;
  background-repeat: no-repeat;

}
.node.node_15 .forumNodeInfo .nodeIcon, .node.node_15 .categoryForumNodeInfo .nodeIcon {
  background-image: url("styles/bbsmileyrevamped/xenforo/icons/admin_markup.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

View attachment 53443

If I was using a sprite sheet, how would the above be changed?
 
Top Bottom