• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

zoldos

Well-known member
#1
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

zoldos

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

Tracy Perry

Well-known member
#3
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.png
 

zoldos

Well-known member
#4
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
 

Tracy Perry

Well-known member
#5
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.
 

zoldos

Well-known member
#6
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.
 

Tracy Perry

Well-known member
#7
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.
 

Tracy Perry

Well-known member
#9
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

Well-known member
#12
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. :)