• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.1 How Can I Use Custom Forum Node Icons?

Shyuan

Well-known member
#1
Hi guys,

May I know is there an addon for changing custom forum node icons? Or is there tutorials on how to do so?

Thanks. :)
 

Tracy Perry

Well-known member
#2
Hi guys,

May I know is there an addon for changing custom forum node icons? Or is there tutorials on how to do so?

Thanks. :)
One resource is
http://xenforo.com/community/threads/node-secondary-images.45788/

Or, you can do like this in EXTRA.css

Code:
.node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/nodes/iPhone.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_7 .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/nodes/iPhone.png");
    background-position: 0px 0px;
}
Where the # is the actual node number and the icon is your custom icon. I use the same one for both and apply opacity to the read ones.
To make sure that the unread ones are at 100% opacity I have this in EXTRA.css (you might not need the !important - I haven't tried it without it yet it's not needed at least on mine)
Code:
/* Adjust opacity on new message icons in forum list */
.node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
        opacity: 1.0;
        }
 

Tracy Perry

Well-known member
#9
If you use Chrome, you can use Chrome Developer you can usually find what you need out of it (FireFox has something I think is called FireBug - but I don't do FireFox so not sure of the name). Below is a capture from where I put the mouse cursor of the page icon and then inspected the element. Near the very top you can see what you need, and you can edit it to try it out before you place it in your EXTRA.css

example.png