CSS Sprite Tutorial

• Our Sprites
• KickApps Sprite Guide
• Tutorial: How to make your own sprites

sprite [ sprīt ] ;n (plural sprites)</dt>

1. supernatural elfin creature: in folklore, a small supernatural being like an elf or a fairy, especially one associated with water</dd>

2. somebody like elf: a small or delicately built person who is likened to an elf or a fairy</dd>

3. ghost: in folklore, a ghost or spirit</dd>

4. independent graphic object: an independent graphic object that moves freely across a computer screen</dd>

Where they come up with this stuff, I'll never guess... but sprites were VERY useful back in the days of 2-D video games. An image containing all frames of animation would be the one file used to animate a specific character. For example:

Recently sprites are making a comeback into the world of CSS. You can use a few or a single image to cover many many images across your website. We recently optimized the icons for the platform and will officially make it a standard when we release KickApps 3.1.

For those of you who did not upload new icons, you will see no changes in your website. (But you may want to stick around to learn how you can change all your icons with a few simple steps!)

If you did change you're icons, there is only one instance you need to make sure of. You need to declare the background position in your css code to the coordinates to 0,0.

/* ka_generalStyle.css */
  #ka_myMessages, #ka_myNewMessages 
  {
    background:transparent url(/kickapps/images/sprites/sprite_media.gif) no-repeat scroll 0 -1200px;
  }

/* yourStyle.css */
  #ka_myMessages, #ka_myNewMessages 
  {
    background:transparent url(/yourURL/yourIcon.gif) no-repeat scroll 0 0px;
  } 

We cut the platform down to 5 main sprites:

• Message Board Sprite: Contains all relevant icons dealing with the message board
• Media Sprite 1: Most of the relevant media Icons are on this sprite.
• Media Sprite 2: More media Icons. It's in 2 parts so it's more managable to users when customizing it. Otherwise you'd have a 5000+ tall image to deal with which can get annoying.
• Rating Stars Sprite: We gave the stars their own sprite since many users like to change only the rating stars on their sites.
• Search Icon Sprite: another bonus sprite, this one boasts many more color oprions for our search icon. Handy if you want to make a quick and suttle change.

Here is our Sprite Guide:

Here is a basic tutorial if you would like to Set up your own sprites...
First, download our pre-made PSD files. There are 5 in zip format, each with a guide JPEG. (so you know where to find them).

Open the PSD. Create whichever icon you'd like, then find it's counterpart in one of our 5 sprite setups. Replace our Icon(s) with yours, then save the whole sprite as a gif. (you can use the same name, or name the file anything you want since you are going to overwrite ours anyway.)

Here's where it gets crazy... see the point of making and saving the sprite in the same format is that all you'll need to do is replace our existing sprite image with your updated one.

"But TJ, aren't there hundreds of instances where the icons are declared through SEVEN css stylsheets?? I'll have to go into each one and change tons of classes! Darn You! You said this would be easy!"

Don't worry 'bout it says I... we thought of that! We pre-classed each instance of icon placement with one of 5 specific icon classes that don't technically exist in our platform. 1 class per sprite we use. All you have to do is find the sprite you'd like to modify, add that sprite as a background image to the proper class we pre-made to your own stylesheet, and you're done!

All instances of that sprite will filter throughout our system, replacing all of our icons with yours! It's a little bit of a backwards way of doing things, but think of it as us preparing our sprites in case

This will make it MUCH easier to replace icons throughout the platform for you, and now you can get even more creative with your designs. ENJOY!