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.

 

[Shelley]

How will this affect those of us who have purchased/installed custom themes? Will we only reap the benefits if the theme author updates it accordingly?

I'm sure many of the styling providers will make the necessary changes and update their styles to conform to the the new changes very quickly. I don't think there is anything to concern yourself with regards to that it's such an easy process to accomplish that any styling provider whom doesn't update shouldn't be offering services. That said, i'm 100% sure that won't be the case.

It took me 5 minutes to build a new sprite sheet for pages we have planned and took me a fraction of that time to do the spritesheets i submitted in the graphic resources so it's a painless process for them.

 

[RobinHood]

Nice one guys, just wanted to double check that. I'll give my theme provider a nudge and double check with them

 

[Brett Peters]

Possibly a silly question but am I not able to use css transparency with sprites ?

 

[bambua]

Possibly a silly question but am I not able to use css transparency with sprites ?

You can do anything you can with any other background image. Just because your loading the same image doesn't mean a given element can't style it differently. All you are doing is controlling how much of the area is visible with a sprite.

 

[Brett Peters]

Thanks bambua, I was scratching my head for a bit until i spotted a spelling mistake.

And a big thanks to Kier and/or Mike for cutting down HTTP requests with sprites

 

[Puntocom]

When clicking on the user, the user card don't display well, I'm using iceweasel 3.5.16 (firefox clone) in Debian stable.

 

[Paul B]

That bug has already been reported.

 

[Onimua]

That bug has already been reported.

It's not a bug, it's just a visual example of Kier thinking out of the box.

 

[a legacy reborn]

It's not a bug, it's just a visual example of Kier thinking out of the box.

LAWL! This is very true.

 

[Xarcell]

I just realized something on the node-sprite. Why not just use CSS opacity, and reduce the image even further?

 

[Shelley]

I just realized something on the node-sprite. Why not just use CSS opacity, and reduce the image even further?

This is true, but i find when opacity is used (especial on dark backgrounds) colours can become washed out due to the transparency (I tested this in photoshop) and assumed the same would have the same results using the opacity property. Your not going to get the true colour using opacity where you would if you lightened the image (without opacity applied) which will retain it's true colour.

I did initially create a forum-new icon, (referring to the node icons i submitted here) and then duplicated the group (icon) and lowered the opacity and as predicted the colours wern't true, nor do you get a true effect on the layers (like the shine, border etc) so I went ahead and just lightened the colours. Sure, what your proposing wouldn't be bad on light backgrounds, on the otherhand, on darked backgrounds using lowered opacity the colours and other effects don't hold true due to the bg colour showing through.

I guess this might be one of the reasons why opacity wasn't applied, just a guess.

Edit: Then again, they could have already lowered the opacity in the graphics editor they used. There's not way to tell whether they lowered the opacity or retained full 100% and simply lightened the colours.

 

[CyberAP]

I just realized something on the node-sprite. Why not just use CSS opacity, and reduce the image even further?

This it not supported by IE. That's why.

 

[Xarcell]

This it not supported by IE. That's why.

No, but you van use filter.

 

[James]

http://xenforo.com/community/threads/opacity-in-ie.3118/

 

[kkm323]

they should include psd file now. So we are able to edit these files
save time

 

[STORMS]

you guys need to release 1.1 already...

 

[a legacy reborn]

you guys need to release 1.1 already...

But then they'd need to release 1.2! You need to give them time to work on that one .

 

[Michael Dance]

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

what happens is its one big image you can edit and the css cuts out each image when needed, its like Whmcs for hosting companies, nice extra

 

[Michael Dance]

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.

you could edit the css to the old one and use single pictures....

 

[Shelley]

you could edit the css to the old one and use single pictures....

I don't know why anyone would want to revert back to using individual imagery it's really a simple process. So much so I designed some new social media icons and then wrote up, and included a social block on a xenforo site. It took me 10 minutes to write the code up (because my isp played up badly) would have been 2 minutes.

@Carlos - I think in the long term you'll appreciate the spritesheets (even if you have to create different size icons) because they are so easy to deal with and to implement in a fraction of the time, especially if your designing imagery it's a more pleasurable experience with time cut in half to your workflow.

Here's the sprite image >> http://urbanfantastic.com/styles/default/test/xenforo/widgets/social_sprite.png
the sprites are being used on the sidebar >> http://urbanfantastic.com/index.php for anyone interested and wants to see how easily this is done to accomplish.