RobParker

Registered
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
 
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.
 
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)
 
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.
 
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.
 
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.

Back