XF 1.2 how do I add icon or change node color when unread posts within?

[zoldos]

I'd like to add an icon to the RIGHT of a node title if it contains new/unread posts, and/or change the node title's color entirely. I couldn't figure it out and this is the best I came up with, but I just don't like it (see attachment). Is there a way to add the icon/change color? Thanks!

 

[zoldos]

I know this can probably be done with CSS in the style properties area, but I don't know how. Help please!

 

[TPerry]

I know this can probably be done with CSS in the style properties area, but I don't know how. Help please!

Try this in EXTRA.css for your style (where path/to/image.png is the path to your image and the image name).

.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
background: url('path/to/image.png') no-repeat  0 !important;
}

This should only show for logged in users.

 

[zoldos]

Hmmm.... doesn't seem to work. I don't see the image I selected displayed anywhere on my unread nodes. I checked the file path and it is correct. Any other ideas? I know it can be done!!

 

[TPerry]

Hmmm.... doesn't seem to work. I don't see the image I selected displayed anywhere on my unread nodes. I checked the file path and it is correct. Any other ideas? I know it can be done!!

I know it can be done also - I posted an image of it in use with the example (exactly what I'm using). What is your site and can you post the exact code you are using.

 

[zoldos]

Sure:

.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
background: url('http://www.avulsionnet.com/images/image2.png') no-repeat 0 !important;
}

I put this in extra.css and it doesn't seem to produce any result. I'm using a dark themed template and a blue icon.

 

[TPerry]

Sure:

.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
background: url('http://www.avulsionnet.com/images/image2.png') no-repeat 0 !important;
}

I put this in extra.css and it doesn't seem to produce any result. I'm using a dark themed template and a blue icon.

Remove the http://www.avulsion.net.com/ and just make it images/image2.png (if the avulsion.net is your web site) and if the image is located in /your_root_directory/images/image2.png.

 

[zoldos]

I got it working by instead editing: Style Properties > Node Icons > Node Icon Unread Forum But thanks for your help!!

 

[TPerry]

I got it working by instead editing: Style Properties > Node Icons > Node Icon Unread Forum But thanks for your help!!

That's a different icon than what I understood you wanted. That's the main read/unread icon and is handled by a different segment of CSS code. What I gave you is the little flame looking icon that replaces the default blue dot that shows up beside them.

 

[zoldos]

Yes I know, it was easier and produced a much better effect IMO.

 

[TPerry]

Yes I know, it was easier and produced a much better effect IMO.

There is a resource to assign individual icons to each one (either the same and give an opacity to the read - which is what I do at http://servinglinux.com and my other forums) or assign different icons for read/unread for each node.

 

[zoldos]

Cool, but that level of customization is not needed on my forum. A member asked for an easier way to tell which forums had unread posts, so what I did was perfect.