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

[Feanor]

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.

 

[Feanor]

Any ideas?

 

[KSA]

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

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

 

[Feanor]

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.)

 

[KSA]

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]

.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.

 

[KSA]

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]

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).

 

[KSA]

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.

 

[Feanor]

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

I'd rather not put the actual image here, but let's use this as an example:

 

[Russ]

Could always do something like this:

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.