How to add forum status icons to XF

[Alpha1]

My vb big board has unique forum status icons for each forum and subforum. These partly make up the forum / brand identity. I would like to add these to my xenforo installation.

Does XenForo have forum icon functionality?
If not, then are there any addons? I have searched, but did not find any in the RM.

 

[Jeremy]

All I know of is Jake's post, found here:

http://xenforo.com/community/threads/custom-forum-node-icons-sprites.32576/#post-372121

 

[Digital Doctor]

Yea they are called Node icons.

 

[Paul B]

http://xenforo.com/community/resources/category-images-for-forum-listing.1518/

http://xenforo.com/community/resources/node-secondary-images.1512/

 

[Alpha1]

Please note that I want to replace the stock node icons, with custom node icons. I do not want double node icons.
So no separate icons, but complete replacement.
I'm not touching any templates, so if there is no addon, then I will need to create one.

 

[Paul B]

http://xenforo.com/community/thread...con-for-all-forums-under-each-category.46251/

It is done with CSS, no need to edit templates nor create an add-on.

 

[erich37]

http://xenforo.com/community/threads/separate-icons-for-each-node.45128/

 

[Steve F]

My vb big board has unique forum status icons for each forum and subforum. These partly make up the forum / brand identity. I would like to add these to my xenforo installation.

Does XenForo have forum icon functionality?
If not, then are there any addons? I have searched, but did not find any in the RM.

There is a style property to change the node icons from default to your own if that is what you are saying.

Style Properties -> Node Icons: In there you can change/adjust your icons.

 

[Alpha1]

Each forum and subforum has an unique icon and a variant for new posts, locked, link, etc.
Mind that I have 450+ nodes/forums. So that would be a massive extra.css

 

[presidentYT]

Im curious.. how do you add a custom node icon to a link-forum... a node thats just a link?

 

[Shelley]

You can either add the custom icon (redirect to the spritesheet or upload an indivudual icon by going into Appearance >> Style properties >> node icons >> Node Icon: link and insert path to image or spritesheet

 

[presidentYT]

You can either add the custom icon (redirect to the spritesheet or upload an indivudual icon by going into Appearance >> Style properties >> node icons >> Node Icon: link and insert path to image or spritesheet

ok cool.. that makes sense.. but i was wondering along the lines of something that you would put in your extra.css file.. just in case you had several links .. This method would make them all the same..

 

[Shelley]

ok cool.. that makes sense.. but i was wondering along the lines of something that you would put in your extra.css file.. just in case you had several links .. This method would make them all the same..

You are wanting to make each link forum node icon different?

You could use ID to make them different

The following is an example, your ids would differ and you would need to adjust the node id accordingly along with the path of the image. keep adding the code for each link forum and change the id and path to image accordingly.

.node .node_31 .linkNodeInfo  .nodeIcon, .node .node_31 .linkNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/icons/node17-read.png");
    background-position: 0;
    background-repeat: no-repeat;
 
}

 

[presidentYT]

You are wanting to make each link forum node icon different?

You could use ID to make them different

The following is an example, your ids would differ and you would need to adjust the node id accordingly along with the path of the image. keep adding the code for each link forum and change the id and path to image accordingly.

.node .node_31 .linkNodeInfo  .nodeIcon, .node .node_31 .linkNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/icons/node17-read.png");
    background-position: 0;
    background-repeat: no-repeat;
 
}

ha.. thank you.. i was really close... it was that .linkNodeInfo .. that i was getting wrong... I'm learning.... lol.. thanks

 

[erich37]

Is there an easy way to make each custom Forum-icon click-able ? So adding some "a href" to it so that it links to the correct Forum-Node when the image is clicked ?

I mean: is it possible to add the node-number to the "a href" somehow ?
How to do this, please ?


I have this code for one of my Forum-Nodes:

.categoryForumNodeInfo, .nodeList .node_185 .forumNodeInfo .nodeIcon, .node .node_185 .categoryForumNodeInfo .nodeIcon {
background-image: url("/marketplace/b2b_lounge.jpg") !important;
}
.categoryForumNodeInfo, .nodeList .node_185 .forumNodeInfo.unread .nodeIcon, .node .node_185 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/marketplace/b2b_lounge.jpg") !important;
}

 

[Steve F]

Is there an easy way to make each custom Forum-icon click-able ? So adding some "a href" to it so that it links to the correct Forum-Node when the image is clicked ?

I mean: is it possible to add the node-number to the "a href" somehow ?
How to do this, please ?

Template node_forum_level_2

Find:

<span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>

Replace with:

<a href="{xen:link forums, $forum}"><span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span></a>

Should work everywhere I think..

 

[erich37]

Template node_forum_level_2

Find:

<span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>

Replace with:

<a href="{xen:link forums, $forum}"><span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span></a>

Should work everywhere I think..

you are a genius, works like a charm

Thanks a lot!!!!!!!