XF 2.1 How to change node icons to images for sub nodes?

Feanor

Active member
I am using this to change the icons of the nodes. Where it uses a background image, and the read version just sets opacity of the same image to 0.5.

However, this doesn't work for sub nodes when they are enabled to show up because it works in reverse. Instead of there being an extra unread class, there's an extra read one.

.subNodeLink.subNodeLink--forum::before
and
.subNodeLink.subNodeLink--unread::before {

And whatever's in content or opacity of the normal (read) one will overwrite the unread one. So you can't set opacity to 0.5 in the normal one and 1.0 in the unread one.
 

ALMUSA

Well-known member
Not sure what are you trying to do exactly but have you tried using this?

.subNodeLink.subNodeLink--forum:before, .subNodeLink.subNodeLink--category:before
 

Feanor

Active member
Not sure what are you trying to do exactly but have you tried using this?

.subNodeLink.subNodeLink--forum:before, .subNodeLink.subNodeLink--category:before
Yes, but I need the unread ones to have full opacity and the read one to have 50% opacity. (Like what I linked to for the normal nodes.)
 

ALMUSA

Well-known member
Yes, but I need the unread ones to have full opacity and the read one to have 50% opacity. (Like what I linked to for the normal nodes.)

.subNodeLink.subNodeLink--unread::before
{
opacity: 0.5;
}

^ just tested that and its working fine

Is this what you are referring to?
 

Feanor

Active member
.subNodeLink.subNodeLink--unread::before
{
opacity: 0.5;
}

^ just tested that and its working fine

Is this what you are referring to?
No, reverse, because the unread ones are what normally have full opacity. Read ones have 50%. It doesn't seem to work the other way though.
 

ALMUSA

Well-known member
No, reverse, because the unread ones are what normally have full opacity. Read ones have 50%. It doesn't seem to work the other way though.

But the unread/read icon has nothing to do with opacity! It's basically a different color. The only difference is that the unread has the font-weight increased/bolded which automatically does the bolding whether you changed the icon or not

.subNodeLink.subNodeLink--unread

{

font-weight: 700;

}
 

Feanor

Active member
But the unread/read icon has nothing to do with opacity! It's basically a different color. The only difference is that the unread has the font-weight increased/bolded which automatically does the bolding whether you changed the icon or not

.subNodeLink.subNodeLink--unread

{

font-weight: 700;

}
It uses color by default because normally it uses the FontAwesome symbol, so that works. But if you replace the node icons with images, then the suggested thing to do is to use opacity (see the link in the first post).
 

ALMUSA

Well-known member
It uses color by default because normally it uses the FontAwesome symbol, so that works. But if you replace the node icons with images, then the suggested thing to do is to use opacity (see the link in the first post).

Can you share the icon you want to use? Let me give it a try and see how it works.
 

Russ

Well-known member
Could always do something like this:

Code:
a.subNodeLink:before
{
    background: url(https://xenforo.com/community/attachments/untitled-4-png.220259/) no-repeat center center;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
    opacity: 0.5;
    color: rgba(0, 0, 0, 0);
}
a.subNodeLink.subNodeLink--unread:before
{
    opacity: 1;
}

This uses a single image, sets the opacity for read/unread. Or you could just add a new background to the unread state as well. Turns the color of the normal font awesome icon transparent.
 
Top