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

XF 1.2 Change new post indicator icon

Discussion in 'Styling and Customization Questions' started by kella, Feb 13, 2014.

  1. kella

    kella Member

    How would I make the new post indicator (currently a small blue dot) a little larger, or change the icon entirely? (XF 1.2.5)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The image itself is part of xenforo-ui-sprite.png.

    You can either edit the sprite or upload a new image and use EXTRA.css to change .LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle
     
  3. kella

    kella Member

    Ok, where do I change those? I'm not a technical idiot, I assume those are in the templates? Not familiar with extra.css. Can I edit that in the admin panel or do I need to SSH into my box and do it with a txt editor?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    The sprite is in the style directory: styles\default\xenforo

    EXTRA.css is a template which can be edited from within the ACP.
     
  5. kella

    kella Member

    Thanks man!
     
  6. kella

    kella Member

    Er, not seeing Extras listed under my templates. I'm sure I am doing something wrong.
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    upload_2014-2-13_20-47-38.png
     
    kella likes this.
  8. Amin Sabet

    Amin Sabet Well-Known Member

    Brogan, if I want to use an image located at http://example.com/bigbluedot.jpg instead of the current little blue dot, can you tell me specifically what code to paste into EXTRA.css?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Which image are you referring to?
    The unread marker?

    If so, you can use this in EXTRA.css: .LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle
     
  10. Amin Sabet

    Amin Sabet Well-Known Member

    Yes, the unread marker. Where do I put my new image URL in the context of that? Is this what I post in EXTRA.css:

    Code:
    .LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle
    http://example.com/bigbluedot.jpg
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    That markup isn't correct.

    It should be something like:
    Code:
    .LoggedIn .discussionListItem .unreadLink,
    .LoggedIn .discussionListItem .ReadToggle
    {
        background-image: path/to/image.jpg
    }
    This is a good resource for learning HTML and CSS: http://www.w3schools.com/
     
    Amaury likes this.
  12. Amin Sabet

    Amin Sabet Well-Known Member

    Thanks, Brogan.
     

Share This Page