Xenforo 2 Individual Node Icons Guide

Trueprime

G101 Founder
G101 Staff
Developer
Rating - 100%
2   0   0
Aug 3, 2018
132
73
28
37
USA
gamers101.com
Credits
0
#1
To create individual icons per desired node follow these instructions below. Make sure you have the addon TH (Nodes) installed

1. In your Admin dashboard go to appearance/templates/extra.less

Add this code

Code:
.iconx {
    background-image: url(https://yoursite.com/icon.png);
    background-size: 40px 40px;
    background-repeat: no-repeat;
        height: 40px;
    width: 40px;
}
iconchange1.png changeicon2.png iconchange3.png

the .iconx is the name for your icon, name it whatever you want. Also make sure to add the correct background image url to where your icon is stored. Apply code and save. Once you have added your code follow step 2.

2. In your Admin dashboard go to forums/node layout and styling and select the node you wish to apply this specific icon. Remember to make sure you have the correct style selected for this icon change to appear.

changeicon4.png

Follow step 3

3. Now that you are editing your selected node, scroll down to Node icons and tick it. Now make sure to check all the boxes for custom value. Apply the name of your icon in those boxes. Make sure to not include the . In this example I'm adding iconx

changeicon5.png changeicon6.png

Once you have added the icon name to all of your custom value, save it and you are done.

Go to your site and look at your icon and you will see your new icon. Also when you are creating your icons make sure to use a larger images so it will provide the best quality and not be blurred.

nodeicon.png

The code I have provided will size your node accordingly (you can change those to any size px you wish). Enjoy your new node icons :cool: Also special thanks to @Forum Expert for helping adjust this code (y)
 

Trueprime

G101 Founder
G101 Staff
Developer
Rating - 100%
2   0   0
Aug 3, 2018
132
73
28
37
USA
gamers101.com
Credits
0
#5
I'd look up all of the threads with similar issues and post this url link. It's helped me out a ton I'll tell ya that!!
I'm glad it helped you and thank you too for the share. If you have any further questions in the future let me know :)
 

Trueprime

G101 Founder
G101 Staff
Developer
Rating - 100%
2   0   0
Aug 3, 2018
132
73
28
37
USA
gamers101.com
Credits
0
#7
Brilliant guide for those who do not know how to use the built in TH node icon feature.
Thank you @JoyFreak the actual Themehouse team was greatful for this guide as well.
th.png

Btw the new updated resource has been added here officially on Xenforo click here
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.