• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

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

Miko

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

screen-capture-7.png


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

Code:
/* 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

screen-capture-1.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:


Code:
/* 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.

screen-capture-11.png



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

- Miko
 

Brogan

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

Miko

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

jgas

Active member
#6
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?
 

Brogan

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

Bain

Active member
#11
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?
 
F

Floris

Guest
#12
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.
 

Bain

Active member
#14
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.
 

CFodder

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

Miko

Well-known member
#20
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
Code:
.node .node_6 .linkNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/link_6.png");
}
OR


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