XF 1.1 Smilies as CSS Sprites

With XenForo 1.1, it's now possible to (optionally) define individual smilies from a sprite image. This video shows you just how easy it is to use the system.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
What's with the fascination with sprites lately? How huge of a difference does it make? I tried a unified sprites modification from vbulletin.org and all it did was slow down how fast the images came up. It didn't make my site any faster either. Would love to see a real difference on xenforo cause it's useless to me on vb4.

There's your problem right there. Highlighted in red.

edit: The reasons I personally think spritesheets are the future. When designing developing for spritesheets managing the sheet is easier, time managing individual imagery decreased and making modifications saving image1.png, hide layer save image2.png was tedious, I personally sliced the source file to save in 1 go but now I don't have to slice the different images.

There's a whole lot of other reasons why i personally think they are the way forward but i'd be here all night as the benefits range from http requests lowered to developing imagery and managing them becomes quicker, easier and less time consuming to support such (whether it's resources or otherwise).
 
What's with the fascination with sprites lately? How huge of a difference does it make? I tried a unified sprites modification from vbulletin.org and all it did was slow down how fast the images came up. It didn't make my site any faster either. Would love to see a real difference on xenforo cause it's useless to me on vb4.
It's just a way to reduce overhead. If you make one ungodly large image, yeah, it will take a while to download -- initially. But like we keep saying, it's fewer requests to your server. And over all that makes a difference to how much it's strained in the long run.
 
I tried a unified sprites modification from vbulletin.org and all it did was slow down how fast the images came up. It didn't make my site any faster either. Would love to see a real difference on xenforo cause it's useless to me on vb4.
You identified the answer to your problem right there.... VB + modification!

Sprites will actually significantly improve performance. Less requests, and when done correctly, the actual overall sprite isn't usually much bigger than most of the images being loaded individually.
 
K thanks guess I'll do some more research on this then. My xenforo forum has a 93/100 score and I didn't do anything concerning sprites so I'll be curious to see if the score increases.
 
Okay now that I'm done watching the video, I would like to create my own smilie sheet.

Where's a good place to create one online or do I absolutely need photoshop?

I use www.pixlr.com often.
 
Okay now that I'm done watching the video, I would like to create my own smilie sheet.

Where's a good place to create one online or do I absolutely need photoshop?

I use www.pixlr.com often.

I personally use Photoshop since I use that to initially design the imagery I'm using for sprites so I manage it all in photoshop and then code it up when I'm ready to import it over.

You can see an example here (sidebarblock) and the same sheet is being used in the Meet the staff page and author pages.

Because the same spritesheet is being used in varies areas I thrown the css in the Extra.css template so that I only need to add the html to those respect templates/pages without tinkering with the coordinates. There may be another/better solution but that is how I've done it.
 
Glad you're using CSS sprites now. I remember using these for a while now to replace old cumbersome JavaScript mouse-overs.
CSS Sprites for mouseover is one of their best uses, I use them on menus all the time. Though I will also say after seeing Xenforo I'm looking more and more for pure css and non graphic solutions wherever I can. It's amazing the difference it makes on load times.
 
Some of my closest smilies are black...wait...
awesome.png
 
Noticed that with 1.1 B1 that the smiley definitions in the install script still reference the PNG versions instead of the new spritesheet.

Anybody happen to have a master list of the sprite position settings for the new sheet?
 
Noticed that with 1.1 B1 that the smiley definitions in the install script still reference the PNG versions instead of the new spritesheet.

Anybody happen to have a master list of the sprite position settings for the new sheet?
I'll post some SQL later today :)
 
Top Bottom