XF 1.X Best way to add custom node icons to each node?

#1
I was wondering if there was a recommended way of adding custom node icons to each node?

Is there anything built into Core that would help with this?

Cheers
 
#2
I was wondering if there was a recommended way of adding custom node icons to each node?

Is there anything built into Core that would help with this?

Cheers
The way I did it was just create an additional template called jsa_nodes.css that I call from EXTRA.css. I define the custom node icons in there.
Code:
/* Adjust opacity on new message icons in forum list */
.node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
        opacity: 1.0 ;
        }

/* Define custom node icons */

.node.node_76 .forumNodeInfo.unread .nodeIcon, .node.node_76 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/nodes/iPhone.png");
    background-position: 0px 0px;
}
.node.node_77 .forumNodeInfo .nodeIcon, .node.node_77 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/nodes/iPhone.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_86 .forumNodeInfo .nodeIcon, .node.node_86 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/nodes/3dapple.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_86 .forumNodeInfo.unread .nodeIcon, .node.node_86 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/nodes/3dapple.png");
    background-position: 0px 0px;
}
Works well and it's easy to find without having to dig through a lengthy EXTRA.css.
 

Russ

Pixel Exit Staff
#3
I was wondering if there was a recommended way of adding custom node icons to each node?

Is there anything built into Core that would help with this?

Cheers
Thanks @Tracy Perry

Ya not really a way of adding in something like that to the framework off the top of my head, there is a plugin out there I've seen folks use...

http://xenforo.com/community/resources/custom-node-icon-icon-for-category.632/

Not sure if there are performance hits though, with that add-on it doesn't look to support sprites though(which is a performance issue technically)
 
#4
Cheer guys.

Tracy I did something similar but rather than use opacity we use separate images.

Have you done anything about retina displays?
 
#5
Cheer guys.

Tracy I did something similar but rather than use opacity we use separate images.

Have you done anything about retina displays?
Not yet... I've got to get a little better with PhotoShop before I start delving to deeply. With one of my sites Apple related it's imperative that I get there at some point.
I've always been a more "nuts & bolts" type of person.. Heck, my idea for color co-ordination for my clothes is blue jeans and a flannel/chamois shirt in earth tones. :wideyed:
I originally had two different icons defined but (again, due to my graphics lack) I found it easier just to add an opacity to the read ones for now.
 
#6
http://xenforo.com/community/resources/custom-node-icon-icon-for-category.632/
Not sure if there are performance hits though, with that add-on it doesn't look to support sprites though(which is a performance issue technically)
If I remember correctly from reading the resource discussion, there were some problems with it failing to reset the default icons if you ever removed it. I figured it was just easier to do it via the CSS route until the ability is rolled into the core.
 

Russ

Pixel Exit Staff
#8
It should, just make sure the font awesome node icons aren't enabled.

[XB] Font Awesome -> Replace Node Icons

We haven't changed the classes so that code should work :)
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.