Different forum icons?

Create icon sets for those forums, add CSS for each forum like this:
Code:
.node .node_1 .nodeIcon { background-image: url('@imagePath/xenforo/node-1.png');
Change 1 to forum id

Not trying to be a douche, but I think addons are easier. Especially for beginners :)
 
I think I will use the CSS option. The addon is not quite finished, and has no option to delete uploaded icons for forum and it seems to change to icons to standard size.
 
Create icon sets for those forums, add CSS for each forum like this:
Code:
.nodeList .node.node_1 .nodeIcon { background-image: url('@imagePath/xenforo/node-1.png');
Change 1 to forum id
I am not worth of your greatness. :notworthy:

:p

Do you have any idea how long I've been trying to customize the node icons for each forum, so that they could each have their own icon?!

........ Sure, there are TON of other examples on here, but none of them work or require you to make a new sprite, which needs to be coded to match up correctly. And the few others that work, only do so partly in that you end up with empty space when there are new replies.

This one works and doesn't depend on the other add-on (which is very flawed I may add).

Granted this ends up showing the default icon when there is a new reply and I much would prefer if it just "greyed out" or "brighten" the current icon without needing a 2nd photo .... But this one is good enough (and uses less code).

Thank you for posting this :D
 
Create icon sets for those forums, add CSS for each forum like this:
Code:
.nodeList .node.node_1 .nodeIcon { background-image: url('@imagePath/xenforo/node-1.png');
Change 1 to forum id
I tried this and it just removed the default icon (yes, I double checked the image path was correct and added a closing bracket } which is missing from the example code

I must have the correct forum id as it only affected that forum, all it did was remove the image
 

Attachments

  • reverts back to original icons.webp
    reverts back to original icons.webp
    35.3 KB · Views: 54
Add !important to rule to prevent it from being overwritten:
Code:
.nodeList .node.node_25 .nodeIcon
{

background-image: url('http://www.shelleyhitz.com/access/wp-content/uploads/2015/05/take-action-workshops.png') !important;
background-position: 0 0 !important;

}
Also your icon is not a proper node sprite, it doesn't have unread image. Therefore I've reset background-position in code above.
 
Because that block has small height, smaller than your background image. I guess you are assigning it to .nodeText? If so, add min-height to it to prevent your background from being cut off.
 
The code I used is just the same as for the other forums...

.nodeList .node_75 .nodeText{ background: url("@imagePath/xenforo/icons/ClashRoyale30.png") no-repeat scroll left transparent;}

Can you show me how i need to modify it please, im not too good with coding.

Thanks for your help
 
Top Bottom