XF 1.1 CSS Sprites

In an attempt to decrease the number of HTTP requests made (and thereby speed up pages), virtually all of XenForo 1.1's UI icon graphics come from just two sprites.

xenforo-ui-sprite.png

xenforo-ui-sprite.png

node-sprite.png

node-sprite.png
Attached below are the 24 bit versions of the same sprites, for those of you who wish to edit them but don't have a graphic program which supports the 8 bit versions.
 

Attachments

  • node-sprite-24-bit.webp
    node-sprite-24-bit.webp
    2.8 KB · Views: 195
  • xenforo-ui-sprite-24-bit.webp
    xenforo-ui-sprite-24-bit.webp
    5.2 KB · Views: 194
If the larger image overlaps another one, then you will need to move them on the sheet.

You will also need to change the associated CSS: width, height, background-position.

Each image is independent though, in the sense that increasing the size of one doesn't mean you need to increase the sizes of the others.
 
Personally, I couldn't care less that users don't understand CSS3 and Sprites. I am all for it. 100%

Having said that, I am nothing but confident that those user who can't figure out how to use the Style Properties (so they don't have to screw around with CSS) will never change images again because a Sprite imaged and the CSS to accompany it will push them away from even trying.

"What do you do?", she asks. "Stuff with computers", I respond. "Sounds complicated". And I sighed.
 
If the larger image overlaps another one, then you will need to move them on the sheet.

You will also need to change the associated CSS: width, height, background-position.

Each image is independent though, in the sense that increasing the size of one doesn't mean you need to increase the sizes of the others.

So would it be wise to leave a reasonably large amount of white space around each image if you envisage increasing the size of any of them at some near-future point?

Cheers,
Shaun :D
 
If you plan on increasing the sizes then yes.

Otherwise you can just increase the size of the sprite sheet and move them to a new position, ensuring you update the CSS at the same time.

Although once you've set your sprite sheet up, it can be quite a bit of work to change it so ideally you only want to do it once.
 
Although once you've set your sprite sheet up, it can be quite a bit of work to change it so ideally you only want to do it once.

That's what I was thinking, there's potentially a fiddly element to it if you want to change the sprites around later on. If it's just a case of adding some space around them and tweaking the CSS after the change, then that's a simple enough thing to do.

Like the idea and I know how to accommodate for size increases now, so thanks ... and ... carry on! :)

Cheers,
Shaun :D
 
OK,. question, if you have all the images on a single sprite, how to you define or "break up" that sprite to use that appropriate portion?
 
As already mentioned, you need to use width, height and background-position to select each image from the sprite sheet.
 
So if you edit a graphic on your sprite sheet and change its dimensions, do you then have to change the dimensions of all the other images around it within your CSS?

I'm completely new to the concepts of editing/using sprites - as you can see. :)

Cheers,
Shaun :D

I would suggest you another way. Suppose you have an sprite with 9 icons 3rows or 3 icons (3*3). And later you decided to alter the dimensions of the middle one. Then you can keep that intact, just append modified icon to the right or bottom of the existing sprite. And in the CSS file, change the references for the new icon. This way, you will save yourself from updating all icon references. And the middle one will remain unused, that will not harm you. :-)
 
So if you edit a graphic on your sprite sheet and change its dimensions, do you then have to change the dimensions of all the other images around it within your CSS?

I'm completely new to the concepts of editing/using sprites - as you can see. :)

Cheers,
Shaun :D
does seem like that!
 
From reading a tutorial, you can't use sprites for repeating background images then?

This would maily be for icon style graphics?

Cheers,
Shaun :D
 
Personally, I couldn't care less that users don't understand CSS3 and Sprites. I am all for it. 100%

Having said that, I am nothing but confident that those user who can't figure out how to use the Style Properties (so they don't have to screw around with CSS) will never change images again because a Sprite imaged and the CSS to accompany it will push them away from even trying.

"What do you do?", she asks. "Stuff with computers", I respond. "Sounds complicated". And I sighed.

I have never, ever used a sprites. But certainly willing to learn.

So if you edit a graphic on your sprite sheet and change its dimensions, do you then have to change the dimensions of all the other images around it within your CSS?

I'm completely new to the concepts of editing/using sprites - as you can see. :)

Cheers,
Shaun :D

You 'n' me both.
 
I have never, ever used a sprites. But certainly willing to learn.

You 'n' me both.

It's really easy and I'm sure you will get to grips with it within a couple of minutes. If you creating custom imagery to your style and lets say your creating custom sizes forum-unread.png 40px square you simply define a width & height property and re-position the background-position line .

Code:
.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {

    background-image: url("styles/default/xenforo/node-sprite.png");
    background-position: 0 0; <<< adjust this line to re-position.

    background-repeat: no-repeat;
  width: 40px; << Add this in.
  height: 40px; << Add this in.

}
So let's say for example your forum-read-png is 60px square instead of the 36px squared default which you wouldn't have to input a value but your new size would go something like this:
Code:
.node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {

    background-image: url("styles/default/xenforo/node-sprite.png");
    background-position: -36px 0; << Adjust accordingly

    background-repeat: no-repeat;
    width: 60px; << Add this in.
    height: 60px;<< Add this in.
}

You would need to set the canvas dimensions higher obviously as the default spritesheet size is 144 x36px but you simply define the sizes (height & width and re-position accordingly.

Ps. I've been drinking heavily tonight and it's late so I've probably made a mistake in explaining this so feel free to correct this BS jargon I just wrote out. :LOL:

Try experimenting in firebug on this forum so you get a feel on re-positioning the imagery and give xenforo link.pngs instead of unread-read.pngs.

Edit: Oops paul already explained. :)
 
From reading a tutorial, you can't use sprites for repeating background images then?

This would maily be for icon style graphics?

Cheers,
Shaun :D
You certainly can, though they must repeat on only one axis (vertically or horizontally). You could also expand the default XF composite image by stacking horizontally-repeated textures or gradients below all the icons. The icon's coordinates wouldn't change and wouldn't require any modifications to the theme's CSS.
 
Kier, one thing that I think may be cool would be to add a style property to define common sprite size. Say @defaultSpriteWidth that is auto added. And then have each on get a style property (forum node) where if you expand yours to say 40px x 40px you could modify @spriteNodeNew to be 40px and CSS isn't touched. ;)
 
Top Bottom