Need some help with node icons

[Al]

I was able to change the icons used on the main nodes on my forum by adding some additional code to extra.less




Looks good, right?

The issue I have is that I cannot work out how to change the sub-node icons to be the same. This is the code I used in extra.less

.node-icon i { display: none; }
.node-icon { background-image: url('styles/omni/xenforo/unreadnode.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon { opacity: 0.5; }

.node-icon-fix i { display: none; }
.node-icon-fix { background-image: url('styles/omni/xenforo/subnode.png'); background-repeat: no-repeat; background-position: center; }
.node--read .node-icon-fix { opacity: 0.5; }

I'm aware of the !important tag which can be added, but when I try to insert it it resets the main nodes too.

Can someone help please?

 

[Al]

Have you thought of using one of my maintained free add-ons ?

Unmaintained - [cv6] Node Icons & Tools

Now new for XenForo 2.2.x This AddOn works with the default Theme, if you change essential parts of the theme in your own styling, there may be changes to the template mods necessary. If it not works out of the box with your style, please drop...

xenforo.com

Sorry I have just seen this! I'll check it out.

 

[Al]

First thing that comes to mind.... And I am sure you have done this and it may not be relevant (depending on your usage).... Have you cleared your browser cache if they are not inlined?

Note:
Based on @Cedric reply it appears they are not inlined. So, have you cleared your cache then reloaded the page?

Aye and tried chrome incognito mode too.

 

[Tyrsson]

Aye and tried chrome incognito mode too.

Try it in a different browser. This issue with Chrome cache is the exact reason I do not use it for development.

 

[Al]

I use Opera usually. I’ve tried it in Opera, Chrome, Edge, Firefox.

 

[Al]

“A wild @Russ has entered the server.”

 

[Mike30]

I was able to change it with this css code:

.fa--xf.fal.fa-comments.subNodeLink-icon{
color:transparent;
font-size:15px;
}
.fa-comments:before {
  background-image: url("https://shatteredsunrts.com/data/avatars/s/0/1.jpg?1690990421");
background-repeat: no-repeat;
    background-size: cover;
    text-align: center;

}

change the background-image and font-size to your convenience
Let me know if this fixed the issue

 

[Russ]

“A wild @Russ has entered the server.”

I might change your CSS to something like this:

.block-body
{
    .node--unread .node-body .node-icon i
    {
        background-position: right center;
    }
    .node-icon
    {
        padding-right: 10px;
        width: 60px;
        i
        {
            background: url("styles/omni/xenforo/unreadnode.png") no-repeat left center;
            width: 45px;
            height: 45px;
            background-size: 45px auto;
            &:before
            {
                opacity: 0 !important;
            }
        }
    }
}
.subNodeLink 
{
    padding: 2px 0;
    display: inline-flex;
    align-items: center;
    i
    {
        display: none !important;    
    }
    &:before
    {
        content: "";
        background: url("styles/omni/xenforo/unreadnode.png") no-repeat left center;
        width: 18px;
        height: 18px;
        background-size: 18px auto;
        opacity: 0.5;
        color: rgba(0, 0, 0, 0);
    }
    &.subNodeLink--unread i
    {
        opacity: 1;
    }
}

It'll reduce the size of the icon a little bit as well which you can change the 45px values, I just think it looks nicer being a tiny bit smaller.

 

[Al]

You're all legendary. Thank you both so much. It look s perfect now.

 

[Al]

This is now resolved.