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

How to add forum status icons to XF

Alfa1

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

Alfa1

Well-known member
#5
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.
 

Steve F

Well-known member
#8
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.
 

Alfa1

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

Shelley

Well-known member
#11
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
 
#12
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

Well-known member
#13
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.

Code:
.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;
 
}
 
#14
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.

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

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

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

Well-known member
#16
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:
Code:
<span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
Replace with:
Code:
<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

Well-known member
#17
Template node_forum_level_2

Find:
Code:
<span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
Replace with:
Code:
<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 (y)(y)(y)

Thanks a lot!!!!!!!

:)