Unread post icon (color)...
- Thread starter XBones
- Start date
TPerry
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
Code:
.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {background: url('path_to_your_image/image.png') no-repeat 0;}
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.
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.
TPerry
Well-known member
TPerry
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
Code:
.LoggedIn .discussionListItem .unreadLink, .LoggedIn .discussionListItem .ReadToggle {
background: url('images/flame_new.png') no-repeat 0 !important;
}
If you've gone to the effort of making a new image, why not just edit the sprite and place it over the original?
A sprite is just a single image file which contains lots of small images.
This is the sprite in question.
http://xenforo.com/community/styles/default/xenforo/xenforo-ui-sprite.png
This is how mine looks for example.
A sprite is just a single image file which contains lots of small images.
This is the sprite in question.
http://xenforo.com/community/styles/default/xenforo/xenforo-ui-sprite.png
This is how mine looks for example.
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
Thanks.
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.
There is nothing special about sprites.
They are just .png files like any other.
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?
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*
note to self: I'm sure i can get around using all those importants though, *concerned*
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.
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.
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.
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?
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.
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.
Shelley
Well-known 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.
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.
Similar threads
- Question
- Question
- Question
