XF 1.5 Issues with node icons

Walkman Archive

Active member
Hi there,

I've realized how to change the default icons for custom ones on my forum.
I managed to change them sucesfully. I added this to the extra.css file:

/* boombox techtalk */
.nodeList .node_4 .nodeIcon{
content: url('@imagePath/xenforo/icon-techtalk.png');
height: 55px; width: 80px; display: inline; vertical-align: middle;
}


as seen here: https://xenforo.com/community/threads/figured-out-how-to-replace-specific-node-icons.123738/#post-1117341

but the result is this:

2016-12-03_18-39-47.png

Now the question is: how do I remove the default icon in the background?
Thanks!
 

Walkman Archive

Active member
Ahh, ok. But.. what if I prefer to keep it for other nodes?
I mean: the default icon is ok and I like to have it in some nodes, but not under everyone.
 

Walkman Archive

Active member
I've tried this code and it sucessfully replaces the original icon,
I replaced this:

.nodeList .node_2 .nodeIcon{
content: url('@imagePath/xenforo/icon-boombox.png');
height: 41px; width: 80px; display: inline; vertical-align: middle;
}

with this:

.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/icon-boombox.png");
}

but as I used big icons for hi-dpi screens now the icon is bigger than the frame for it and I can only see the upper left corner of it.
This is how it looks with the new code:

cropeed icon node.png

and this is how it should look (without the icon in the background):

node icon ok.png

I also tried to add this:
height: 41px; width: 80px; display: inline; vertical-align: middle;
in a third line before the } but it seems it just crops the icon with those dimensions, but it doesn't resize it to fit in there...
 

Walkman Archive

Active member
I've updated my icons with white background so the background icon cannot be seen anymore. But it's not a solution I like.
I'd like to replace the background icon with my custom ones (different for every node). I also would like to know how to properly use sprites to show nodes status (read, unread...).
Can anyone help, please?
Can you tell me what code should I use for replacing the background icon (using 2X icons for retina displays) without having them cropped like I showed?

Thanks in advance.
 
Top