X-Cart forums

[momentum]

Hello Great Ones

Trying to put together a site using the Responsive Template. I like the idea of using this new version but of course I have to figure out where things can get changed

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 am not sure what image the existing logo is.

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.

3. When I get the new logo in place I am also going to move the phone number which I have always done with the css. Again does that mean I have to make that adjustment in multiple css files?

Thanks

[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...

[momentum]

Hello

AOK I now understand the reason for the sprites. This is because we are using this with different sizes

I opened the main_sprites_lg.png
The size in photo shop is 500 x 500

Your logo is of course the same size as what the CSS has
width: 297px;
height: 42px;

What I do not understand is on the main_sprites_lg.png
You have a gift certificate image on there

What I do not get is why the 500 x 500 canvas and what am I supposed to do to make my new logo

I guess I am not sure how I go about making this sprite if that is what I have to make for the new logo.

[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.

[totaltec]

Originally Posted by momentum

3. When I get the new logo in place I am also going to move the phone number which I have always done with the css. Again does that mean I have to make that adjustment in multiple css files?

Unfortunately yes, but I believe only three, altskin.css, mobile.css, and 700.css.

The header and footer are tricky because they span the entire page width, and need more adjustment than other areas that are more like "blocks". Don't worry, I think you are encountering most of the challenges of working with this template right out of the gate. Which I guess is a good and bad thing.

[momentum]

Hello Again

Yes I am ignorant on Sprites

If you open the site and view source image as you mouse over the logo you have we get:
http://www.???.com/???4/???/skin/common_files/images/spacer.gif

If I got what you said the spacer is on top of the image and if you are at
screen of 960
The logo is at
background: transparent url(../images/main_sprites_lg.png) no-repeat 0px -52px;

If the screen is smaller it is going o use the small png with the location of the logo based on the location of the css of the 760 sheet.

Now the ignorant has to make a logo to fit into that area. I can do this. I guess I need a school on sprites so I can figure this out. The problem with this layout is that you do not give me much room for my logo in normal size.

Ignorance is not bliss on this one.

[momentum]

Hello Again

When I bought this I figured the logo was going to be my main problem. I would have never thought about sprites. I have never used one so this is new to me. I understand the css. Now all I have to do is figure out the rest of the header section.

[totaltec]

Originally Posted by momentum

Hello

AOK I now understand the reason for the sprites. This is because we are using this with different sizes

I opened the main_sprites_lg.png
The size in photo shop is 500 x 500

Your logo is of course the same size as what the CSS has
width: 297px;
height: 42px;

What I do not understand is on the main_sprites_lg.png
You have a gift certificate image on there

What I do not get is why the 500 x 500 canvas and what am I supposed to do to make my new logo

I guess I am not sure how I go about making this sprite if that is what I have to make for the new logo.

Sorry, I just keep replying and explaining, I missed this message.

Well to do it the best way (since your logo is larger), you need to adjust the placement on the sheet of both the logo and the gift certificate image. Read my edited, long winded, first post again where I explain why it is this way and why there is more size on the sheet.

To sum things up, there are three options for changing this logo:
1. Create a new image(two if you prefer, one small one large), and edit the CSS referenced above to point to it. Change the src to your new image.

2. Put your image lower on the sprite sheets using your favorite graphics app, save it as PNG(24) and overwrite the existing sprite sheet. Then you need to edit the CSS to look down further on the sheet for your new image. (Explanation above) This is pretty easy once you are comfortable with it, and this is how you should add new images to your site design, whenever the element is to be used on several pages.

3. Edit the sprite sheet, moving the Gift Certificate portion down (if you like you can go pull a fresh copy of the gift cert image from /ideal_comfort/images/custom/gc_link.png), and then editing the CSS to reflect that. Lay your new larger logo over top the existing one on the sheet, and then also update the CSS to reflect the new location and width and height. This is the best way as it overwrites the existing logo without adding to the bloat, at least not much.

[totaltec]

Originally Posted by momentum

Hello Again

When I bought this I figured the logo was going to be my main problem. I would have never thought about sprites. I have never used one so this is new to me. I understand the css. Now all I have to do is figure out the rest of the header section.

Listen, I will make a tutorial. I plan on guiding you as best I can, and then the record will be here for all to see and learn from. Just let me know what challenges you encounter, and I will help resolve them in any way I can. Just ask away, and I will answer.

[totaltec]

I have made a tutorial, long winded as usual. I need to revise it and edit it still, but here is the rough draft: http://youtu.be/aWC6aFYpOpM

There are easier ways to change the logo, I will detail that method in another tutorial, my final. But this is the best method perhaps, especially from a learning perspective. Sorry for the flood of information, I have been waiting for the question, and am eager to respond.