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

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.

 

[Paul B]

The only problem is they're alpha 8 transparency so if you don't have an image program which can handle those, this is what it looks like.

Any chance of a standard transparent .png image for us plebs?

 

[John L.]

I'm sorry, but I don't like this. It seems like a lot of work for styling. :-/

I perferred the old way - one by one.

I wish this was a toggle.

How is this more work?

 

[Karelke]

I'm sorry, but I don't like this. It seems like a lot of work for styling. :-/

I perferred the old way - one by one.

I wish this was a toggle.

There are tools all around the internet that can generate css sprites - including the css rules; I can't see a big problem here.

 

[Carlos]

How is this more work?

You'd have to design the images and then paste them together in a single image. That's two steps.

Then, once you're done; you have to edit the CSS to work with the above image. 3 steps so far.

Open FTP, upload, and update previous CSS style. 2 more steps.

Grand Total: 5 Steps.

Especially when you want to update only ONE image and it turns out to be bigger than the old one.

Whereas, with the old image paths, you could just upload the individual image(s) and replace the old ones. And voila, you're done.

 

[dzv3]

How is this more work?

I think he meant customizing (eg. changing color tones) as opposed to working on a single image file.

 

[Karelke]

You'd have to design the images and then paste them together in a single image. That's two steps.

Then, once you're done; you have to edit the CSS to work with the above image. 3 steps so far.

Open FTP, upload, and update previous CSS style. 2 more steps.

Grand Total: 5 Steps.

Especially when you want to update only ONE image and it turns out to be bigger than the old one.

Whereas, with the old image paths, you could just upload the individual image(s) and replace the old ones. And voila, you're done.

You don't necessary need to overwrite the sprite, it's also possible to upload your new image and only update the css rule (background path).

 

[Jaxel]

CSS sprites are the best... I use them in XenMedio...

 

[dzv3]

IMO, the benefits far outweigh the extra effort.

 

[gldtn]

Replacing the sprite imagery is dead simple, since all of our dimensions and offsets are controlled in a single CSS file, and all of our imagery sits in a single image.

 

[John L.]

You'd have to design the images and then paste them together in a single image. That's two steps.

Then, once you're done; you have to edit the CSS to work with the above image. 3 steps so far.

Open FTP, upload, and update previous CSS style. 2 more steps.

Grand Total: 5 Steps.

Especially when you want to update only ONE image and it turns out to be bigger than the old one.

Whereas, with the old image paths, you could just upload the individual image(s) and replace the old ones. And voila, you're done.

It seems like a bit more up-front work but really the long-term benefit is much better. It's easier editing your style and switching out icons. Not to mention the bandwidth you save from having one single file.

 

[Cezz]

The only problem is they're alpha 8 transparency so if you don't have an image program which can handle those, this is what it looks like.

View attachment 18498

Any chance of a standard transparent .png image for us plebs?

I am not sure but I think the alpha 8 stops the issues in IE dealing with transparent png's!

PhotoShop, Gimp, Paintshop Pro, or Xara all support 8bit png transparancy!

 

[Junior]

O man...You know I've been doing the whole optimization thing with my forums and this is one thing I really wanted to see. I didn't even have to ask. Love it!

 

[Paul B]

PhotoShop, Gimp, Paintshop Pro, or Xara all support 8bit png transparancy!

Paintshop Pro X2 doesn't - that image above is what you get when you open the sprite file in PSP X2.

The rest of my images aren't alpha 8, so one more won't make a difference.

 

[ChemicalKicks]

No Idea how that works but sounds good
Will have a look to some tuts over google

THIS

 

[Carlos]

Photoshop has gone past the CSX series?

 

[Cezz]

Paintshop Pro X2 doesn't - that image above is what you get when you open the sprite file in PSP X2.

The rest of my images aren't alpha 8, so one more won't make a difference.

Definitely shouldn't be 32bit by default though die to the IE issues, maybe kier can provide a 32bit version for download also!

 

[DeltaHF]

This is an absolutely awesome tweak - I'm a big proponent of reducing page speed and this is an excellent step in the right direction for XF.

For those of you confused or worried about this, don't be. Just edit the composite image in your template and place any new icons you want to use in the position of the one you're replacing, then re-upload the file, and you're done. It will only be more work if you want to use icons which have larger dimensions than the default.

 

[Karelke]

I am not sure but I think the alpha 8 stops the issues in IE dealing with transparent png's!

PhotoShop, Gimp, Paintshop Pro, or Xara all support 8bit png transparancy!

Seems here to work with Paint.Net

 

[Cezz]

Seems here to work with Paint.Net

Does it support alpha transparency as well as well as index? Meaning you could create semi-transparent sectors? I know the list above fully supports this not sure about others though!

 

[Kier]

The only problem is they're alpha 8 transparency so if you don't have an image program which can handle those, this is what it looks like.

View attachment 18498

Any chance of a standard transparent .png image for us plebs?

I'll release a 24 bit version.