XF 1.5 Issues with node icons

[Walkman Archive]

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/threa...lace-specific-node-icons.123738/#post-1117341

but the result is this:



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

 

[Paul B]

Remove the default image in the style properties for node icons.

 

[Walkman Archive]

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.

 

[Paul B]

Then you will need to add background-image: none to the node specific CSS.

 

[Walkman Archive]

ok, thanks.
so I guess the code it this:

.node .node_17 .forumNodeInfo.unread .nodeIcon, .node .node_17 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("https://www.wantedheroes.org/styles/black_responsive/xenforo/nodeicons/timersboss.png");
}

as seen here: https://xenforo.com/community/threads/cant-change-forum-link-node-icon.117807/
right?

 

[Walkman Archive]

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:



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



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]

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.