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

zoldos

Well-known member
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!
 

Attachments

  • screen.webp
    screen.webp
    13.2 KB · Views: 26
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).
Code:
.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
background: url('path/to/image.png') no-repeat  0 !important;
}
This should only show for logged in users.
screenshot.webp
 
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!! :D
 
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!! :D
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.
 
Sure:

Code:
.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.
 
Sure:

Code:
.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.
 
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.
 
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. :)
 
Top Bottom