Welcome to Admin Junkies, Guest — join our community!

Register or log in to explore all our content and services for free on Admin Junkies.

  • Admin Junkies is proud to announce 📣 an awesome ☀️ summer special on ✍️ Content Bundles for YOUR forums! Kickstart your discussions with a Content Bundle. For the entire month of June, use the promo code AJSUMMER 🎉 to receive 50% 🎁 off your content bundle. For example, a package that normally only costs 100 Credits will only cost 50 💰 credits. Full news here.

Need some help with node icons

Joined
Jul 15, 2023
Messages
628
Credits
2,031
I was able to change the icons used on the main nodes on my forum by adding some additional code to extra.less

image_2023-09-17_221812186.png



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

Code:
.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?
 
Solution
I was able to change it with this css code:
CSS:
.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 :)
It's not the same code...
.subNodeLink .subNodeLink-icon is the base that addresses it if I remember correctly. I really don't know how images will work on there.... especially when displayed on the index.
I don't use the subforum nodes listed on the index. I did use the popup ability at one time though. Just made it look "crowded" to me. I also had the sub-forums working as an image... but it was way to small in the popup and the listing. If you use the FA icons you may have better luck on them.

EDIT:
Upon playing around with my settings... it's the .subNodeLink .subNodeLink-icon that does control it...
This should get you going...
unread
.subNodeLink.subNodeLink--unread
read
.subNodeLink.subNodeLink

The icon is controlled by .subNodeLink .subNodeLink-icon
 
Last edited:
Advertisement Placeholder
This:
.subNodeLink.subNodeLink i { display: none; } .subNodeLink.subNodeLink { background-image: url('styles/omni/xenforo/subnode.png'); background-repeat: no-repeat; background-position: left; } .subNodeLink.subNodeLink { opacity: 0.5; }
Caused this:
image_2023-09-18_141422715.png

They're there, just not aligned as they should be.
 
Try
Code:
.subNodeLink.subNodeLink i { display: none; }
.subNodeLink.subNodeLink { background-image: url('styles/omni/xenforo/subnode.png'); background-repeat: no-repeat; background-position: left; margin-right: 1.2em; }
.subNodeLink.subNodeLink { opacity: 0.5; }

I added margin-right, it might need adjustment with the 1.2em
 
I remember it was a right pain in the ass to get it to working, and I didn't like the look of it so stripped it out and went with no sub-forums listed. That's been about 2 years ago so really don't remember exactly what I did.
Is this a style you created, or a paid/free one from a style developer. If the latter...... ask them for assistance, as some of the styles do some stuff different than the stock.
 
Does this work:

Code:
.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;
}

.sub-node .node-icon i {
    display: none;
}

.sub-node .node-icon {
    background-image: url('styles/omni/xenforo/subnode.png');
}

.sub-node .node--read .node-icon {
    opacity: 0.5;
}
 
There is no rush, my man. None at all.
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?
 

Log in or register to unlock full forum benefits!

Log in or register to unlock full forum benefits!

Register

Register on Admin Junkies completely free.

Register now
Log in

If you have an account, please log in

Log in
Who read this thread (Total readers: 0)
No registered users viewing this thread.

Would You Rather #9

  • Start a forum in a popular but highly competitive niche

    Votes: 5 18.5%
  • Initiate a forum within a limited-known niche with zero competition

    Votes: 22 81.5%
Win this space by entering the Website of The Month Contest

Theme editor

Theme customizations

Graphic Backgrounds

Granite Backgrounds