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

Discussion in 'XenForo Questions and Support' started by zoldos, Mar 7, 2014.

  1. zoldos

    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!
     

    Attached Files:

  2. zoldos

    zoldos Well-Known Member

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

    Tracy Perry Well-Known Member

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

    zoldos Well-Known Member

    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
     
  5. Tracy Perry

    Tracy Perry Well-Known Member

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

    zoldos Well-Known Member

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

    Tracy Perry Well-Known Member

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

    zoldos Well-Known Member

    I got it working by instead editing: Style Properties > Node Icons > Node Icon Unread Forum :) But thanks for your help!!
     
    Tracy Perry likes this.
  9. Tracy Perry

    Tracy Perry Well-Known Member

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

    zoldos Well-Known Member

    Yes I know, it was easier and produced a much better effect IMO. :)
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

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

    zoldos Well-Known Member

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

Share This Page