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

Unread post icon (color)...

Discussion in 'Styling and Customization Questions' started by XBones, May 19, 2013.

  1. XBones

    XBones Member

    What controls the color fo the unread post icon (see attachment)?

    Right now mine are blue. Need to change them to something else like black or gray...been trying all sorst of things but can't seem to change the door.


  2. Brogan

    Brogan XenForo Moderator Staff Member

    It's an image - you will need to edit the sprite.
  3. Tracy Perry

    Tracy Perry Well-Known Member

    Like Brogan said... it's an image... but you can also define a non-sprite image if I remember.
    I think this would do it in EXTRA.css
    .LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {background: url('path_to_your_image/image.png') no-repeat  0;}
  4. XBones

    XBones Member

    I was afraid you guys were gonna say that. I don't know how to edit a sprite. What is the procedure?I get around PS OK but don't know about these sprite things.

    Tracy...That code you provided seems easy enough. Just needs to be pasted into the EXTRA.css? I still don't have the dimensions of the icon to make a new one. Where do I find that information? ...damn this suff is technical. I originally thought you could change any color of almost anything using the appearance stuff. Apparently we're not to that level yet. Ugh.
  5. Tracy Perry

    Tracy Perry Well-Known Member

    I just played with it, and the icon I used is 11px by 16px.
  6. XBones

    XBones Member

    So I made a round one which looks to be about 8px. Seems to match up pretty well with the original in the sprite ...

    What do you think? Can just upload to the server, put the correct path in your code and paste into EXTRA.css? Will that do the job?


    New icon...
  7. Tracy Perry

    Tracy Perry Well-Known Member

    That's what I did... I have a directory called /images that I place items in (and sub-directories off that for forum/node specific, member profile, etc.)

    Here is my existing code
    .LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
    background: url('images/flame_new.png') no-repeat  0 !important;
  8. XBones

    XBones Member

    Thanks a lot.

    I'll give it shot soon and report back.
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Bram and Shelley like this.
  10. XBones

    XBones Member

    Brogan...I would like to learn how to deal with these sprite's but I have read some about it and it just seems complicated.

    So I opened the sprite image in PS. I changed the mode to RGB from Indexed but I am not sure how to edit the sprite. I can drag my new icon into the sprite but the rest of the sprite is just one layer and I can't remove or change anything. Obviously I don't know what I'm doing. Can you give me any direction or point me to a tutorial that will help me. I have read about sprites but it just seems so complicated. The easiest part was making the new image... lol

  11. Brogan

    Brogan XenForo Moderator Staff Member

    I just opened the sprite in PSP, opened my new image in PSP, erased the old icon from the sprite, copied and pasted my new icon in the same place, then clicked save (as a single layer).

    There is nothing special about sprites.
    They are just .png files like any other.
    Shelley likes this.
  12. XBones

    XBones Member


    I did that. Easy. hahaahha.

    I guess what I don't understand is how the software knows which icon to use. In the sprite you attached (I attached it again below) there are two little circle icons. So I earased the first one on the left and put the new once there. First, what is the other one and how does the software know which one to use when it's called? :confused:

  13. Brogan

    Brogan XenForo Moderator Staff Member

    The CSS co-ordinates determine which particular part of the image is displayed.
    Shelley likes this.
  14. Shelley

    Shelley Well-Known Member

    To elaborate on what Brogan said and on the offchance you create a larger icon and apply it to the spritesheet you would need to change the coordinates via EXTRA.CSS which I had to do on one of the styles I created. You would also need to change and adjust the width & height value.


    note to self: I'm sure i can get around using all those importants though, *concerned*
    viper357 likes this.
  15. XBones

    XBones Member

    Thanks for the replies (again)...

    So I initially inspected the element in Google Chrome and it said the image was 10px x 10px. So I made the image that size and I made the circle inside 8px x 8px. When I put the image in the sprite it sure looks to be the same as the one next to it. Which, begs the question, if both are the same size how does the program know whcih one to call for the specific function? And what is that second circle image to the right of the one I was planning on changing?

    Also, another question...I was working off the sprite image Brogan posted. Where exactly do I find that sprite image on my server so I can overwrite it? Also, do the new images I make have to be named something specific? When I copied and pasted it into the sprite I don't think the name on the PS file travels with it... Sorry for being a PITA but you have all been so helpful and I'm learning cool stuff.

  16. Shelley

    Shelley Well-Known Member

    You'll have to set an opacity (lowering it) on that so it looks faded or do it via an editor which is how I think it is done if memory recalls.
  17. XBones

    XBones Member

    I don't think i'm asking the question correctly.

    In that sprite there are two small circle icons. One of them obviouslly controls the unread message function and it's the one I want to change the color. I have the icon made .. it's gray and has some sort of inner emboss to make it look cool.

    In the sprite right next to the blue one is another circle icon. How do I know what that is for? In fact, how do I know what function any of the icons in the sprite are for? Some are obvious I know but others... ?

    And again, is it necessary to name the new image something specific? I don''t think so but just asking. This is so new to me I'm sorry for all the elementary questions. But I really appreciate the help.

    Here is the sprite with the gray icon...the one next to it????? I also notice where I placed the gray icon isn't exactly the same as where it may have been... does that matter?

  18. Shelley

    Shelley Well-Known Member

    Oh I see. Yeah that will take but when you upload the sprite and because your unsure it is exactly where the last icon was just adjust it slightly (nudge it left or right) until it's aligned and you won't have to mess with coordinates.
  19. XBones

    XBones Member

    I can only nudge one click at a time and it just doesn't seem to line up perfectly with the one next to it (whatever that one is)... :(

    I can get it close but that may not be good enough...not sure.
  20. Shelley

    Shelley Well-Known Member

    looking at your spritesheet the icons clearly don't line up on the spritesheet therefore they won't on the style since the original icons line up on the spritesheet and on the xf default style.

    Ensure you've placed them exactly where the original icons were and you will have the icons aligned correctly. What I do is add the custom icons on the sheet, make sure they are lined up and in the correct place and then i delete/erase the icons (xf) on the sheet keeping your custom one on there. This will serve as a guide so you know they'll line up.

Share This Page