[totaltec]

Originally Posted by momentum

2. I would also like to have more height for my new logo is this possible and would I have to modify all the sizes of the css pages.

You could always put the new logo lower on the sheet, and then reference this location change in the CSS. It would increase download time by leaving the original pixels unused, but it would be simpler.

For anyone not familiar with how sprites work, usually they are setup as a background image behind any container <div> or <span> or any other html element. You can provide a clear image over the top to have a clickable element by using something like skin/common_files/images/spacer.gif and specifying the width and height. This image should be used ubiquitously throughout, so as to not subvert the intent of spriting in the first place. Or you can make the entire div clickable through JS, which arguably increases code bloat slightly as well.

Then you include your actual image on the sprite sheet, and simply specify what portion of the sheet to use via CSS.

For instance in /css/mobile.css we see this CSS:

#left-bar .gift-certificate a img {
background: transparent url(../images/main_sprites_sm.png) no-repeat 0px -35px;
width: 175px;
height: 37px;
}

And in /modules/Gift_Certificates/gc_menu.tpl we see this code:

<div class="gift-certificate">
  <a href="giftcert.php"><img src="{$ImagesDir}/spacer.gif" alt="{$lng.lbl_gift_certificates}" /></a><br/><br/>
</div>

Looking at the CSS, the important bit is "no-repeat 0px -35px". This specifies the x and y coordinates for the starting point of the image. This tells the browser to display starting from 0px on the left and 35px down from the top of the sheet.

The included sprite sheets are on a white background. Transparent might be preferred, but some older browsers still can't display it well, and it increases the file size simply by being transparent. If you want a transparent copy I can dig that up for you.