[RC 1] Custom Node Status Icons ( Read & Unread)

[Miko]

Hi everyone,
With the release of XenForo Release Candidate 1 (it will not work with prior versions of XF) , nodes id are included in the templates, allowing us to easily change the Status Icons without any complicate template edits.

I know many of you already know how to do this by many others are still a little bit confused about it so here is how you do it

Example:




In the template editor open the EXTRA.css template and enter the following CSS for each custom icon.

/* custom status icons */
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}

In the example above I'm replacing the status icons from a node with an id of 7

Nodes ids are unique to each nodes on your forum so make sure to enter the correct id in the css

In the example above I also entered the custom images in the default location of the default icons and simply renamed with the node id at the end of the name for simplicity forum-unread-7.png and forum-read-7.png

Nothing stops you from having them in a custom folders or naming them differently.


How do you determine the correct node id for a specific node?

In XenForo Admin CP go to Application, Display Node Tree.

Under Node Tree simply hover on the name of the forum nodes or click on them to edit and you see the actual id in the URL

For example: http://xenforo.dev/admin.php?nodes/official-forums.7/edit

7 is the correct id for the "Official Forums", so my icons will be named forum-unread-7.png and forum-read-7.png



Still confused?

Let's just say that for example you want to change the icons of nodes with IDs 2,7 and 15

Your CSS should look like this:

/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}

What size should my custom images be?

The XenForo default status images are 40px by 40px in size.
I recommend creating your custom images the same size as the default one to avoid them to be cut off or pixelated.

If you wish to to change the images size and use bigger ones you can edit the default size here:

Appearance > Styles > Default Style (or your style name) > Style Property Groups > Style Properties: Forum List > Node Icon

Change the width and height from the default 36px to your new custom size.





Hope it make sense, if not give me a holler and I will try to help you

- Miko

 

[Paul B]

Great stuff Miko.

That will please a lot of people, I'm sure.

It might just be worth pointing out that all icons should have the same dimensions as they inherit that css from .node .nodeIcon which is common to all.
Of course, specific css can also be applied on a per node basis.

 

[ArnyVee]

Good work Miko

 

[Miko]

Great stuff Miko.

That will please a lot of people, I'm sure.

It might just be worth pointing out that all icons should have the same dimensions as they inherit that css from .node .nodeIcon which is common to all.
Of course, specific css can also be applied on a per node basis.

Added instructions on how to change the images size if needed

 

[fattony69]

Amazing work Miko! Exactly what I wanted!

 

[jgas]

Thanks, this thread is very clear and simple to understand.

One small question: what about if I want to use the same icon for read and unread, and just play with trasparency/opacity?

 

[Paul B]

You should be able to edit the css to suit.
Just make the image path the same and add an opacity element to the read or unread css as required.

 

[patrick91]

Thanks for this one! is will try it out soon...

 

[@lex]

Good work, I like !

 

[Rich]

thanks , good work!

 

[Bain]

Is there a way to do this without additional CSS? Such as on my forum, where I have roughly 200 or so categories (which I am working on streamlining).
Would there be a simpler way of doing this via CSS by automatically calling a node id versus manually creating a new css code for each node id that we want the image replaced for?

 

[Floris]

Isn't it possible to just have an xen:if conditional with in_array to check current forumid against list of id numbers?
if it exists, load image node_$forumid.png

i rather set with a conditional an array for 1,5,6,122,4,33
then create 6x same css block.

 

[Miko]

Wonder if Kier has a good solution to forums with 200 nodes.... still haven't worked a quick and easy solution

 

[Bain]

Wonder if Kier has a good solution to forums with 200 nodes.... still haven't worked a quick and easy solution

Those were from the old IPB forum I had, where I had forums side by side and certain forums were created into categories.
I literally had 3 or 4 levels deep. But I am liking XF more and more.

The skin I had on IPB, the icons were hardcoded dynamically to grab forum id and all I had to worry about was to ensure that I created the icon for the forum id.

I am sure there has to be a way, and maybe I will figure it out... but still relatively new to XF.

 

[wickedstangs]

hello I copied the above and three are not showing? how can I fix that?

 

[CFodder]

What I'd like to try and do is use the same icon for read/unread posts, but where there are no unread posts to just change the opacity of the icon and not have to have it set for each and every node. I know how to set the opacity but having probs figuring out where/how to put the css up for it

Tried as shown below but it didn't seem to have any effect:

.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon
{
filter: alpha(opacity=60);
opacity: 0.6;
}

 

[Bain]

I am trying to get this working with a LinkNode. How would I go about making it work there?

 

[Miko]

I am trying to get this working with a LinkNode. How would I go about making it work there?

Try this: http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/#post-167862


Link icon don't have a read/unread status

 

[Bain]

I tried that but it doesn't appear to be working. Any other ideas on how this may work?

 

[Miko]

I tried that but it doesn't appear to be working. Any other ideas on how this may work?

Sorry I forgot a .node or !important.... both versions will work


In this example i'm changing the icon of a LinkNode with id 6

.node .node_6 .linkNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/link_6.png");
}

OR

.node_6 .linkNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/link_6.png") !important;
}