[totaltec]

First of all, thanks for taking the plunge and putting this template through the paces! I am sure we can all learn from your experiences adapting this for a "real world" client.

Originally Posted by momentum

1. I need to change the logo. I am sure the client does not want the x-cat logo.
it appears to be a sprite but all I have is an image to replace this image.

I thought this might come up. It is a sprite, and if you take a look much of the actual sprite sheet is open space. This is designed to encourage you to use this space rather than add separate images and increase download time with additional http connections during your customizations.

The good news is that the PNG is fairly lossless, and you can directly edit it in your graphics application of choice without worrying about degradation if you re-save the file, provided that you keep the same format when you save. Also you definitely have the option to replace the sprite sheet with your individual logo.

Yes the sheet is referenced in all the CSS files, and there are two sizes of sprite sheet. The only other image on the sheet is the gift certificate, so when making adjustments you need to consider both. That is why I didn't go crazy in this department and sprite everything, I wanted to encourage spriting, but not force it.



For instance /css/1200.css and /css/960.css contain the code
Near line 5:

#header .line1 .logo a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat left top;
width: 297px;
height: 42px;
}

And /css/mobile.css and /css/700.css contain the code
Near line 39:

#header .line1 .logo a img {
background: transparent url(../images/main_sprites_sm.png) no-repeat left top;
width: 212px;
height: 30px;
}

This was setup to provide the facility to add specific images for different sizes, without significantly increasing the download time for mobile devices. The mobile style sheet gets served first, than it adjusts for systems with larger screens and therefore larger capacities.

In some instances the mobile image and larger image might be exactly the same, and there it is a pain in the neck perhaps. But often you might want a smaller image or icon in your smaller versions of the site, or even a larger one to increase legibility on a small screen.

Care has been taken to try and make the changes only in /css/altskin.css, and write code that works for all sizes rather than too much size specific code. And you will find that very few elements are hidden or "switched out" for the smaller sizes, but you will also find examples of how to do that, like the Quick Menu instead of Tabs at the top.

I highly encourage spriting your images, it is a Google recommended best practice. I wish more of the default images X-cart used were sprited, but we are getting better in this department. When I optimize a clients site, the first thing I do is start spriting and removing unnecessary images. Then I minify the CSS and some of the JS. Minified code and sprited images are much harder to work with after the fact, so it is good to not release it in this manner, but rather let the developer/designer make these changes after the design stage is finished.

I am preparing a tutorial for working with the responsive template as we speak. I plan to record a multi-part series if I can find the time, walking you through a complete Client design from start to finish. Perhaps I should set my goals lower and just record a quick one on changing the logo...