View source for X-Cart:Replacing X-Cart's Logo in the Ideal Responsive Skin

In X-Cart's Ideal Responsive skin, the company logo image is implemented a bit differently than in other, previously developed X-Cart skins. If you need just to quickly change the company logo on your X-Cart store site so you can start selling as soon as possible, you can skip the explanation below and use the 'quick' method (see [[#QuickChangingLogoIdealResponsive|here]] for instructions). However, this method might not work as a permanent solution, because you will get the same logo image size used for any screen sizes your customers might use to access your store. If you are willing to take advantage of the Ideal Responsive skin features to the full extent and have a differently sized logo for different screen sizes, please read on.

If you look at the code of the template <u>/skin/ideal_responsive/customer/head.tpl</u>, you will see how the company logo image is implemented:
<pre>
<div class="line1">
<div class="logo">
<a href="{$catalogs.customer}/home.php"><img id="main_logo" src="{$ImagesDir}/spacer.gif" alt="Logo Placeholder" /></a>
</div>
</pre>

In previously designed X-Cart skins, <u>head.tpl</u> contains a similar fragment where the <img> src attribute references the main company logo image file directly. In these skins, to replace the company logo, one simply needs to save the new logo image file with the same name and upload it to the specified location, and voila - the new company logo image appears on the site. However, as you can see from the code fragment above, head.tpl for Ideal Responsive does not contain a direct reference to the main company logo image in <img> src. Here, instead of the logo image, <img> src references <u>spacer.gif</u>. <u>Spacer.gif</u> is just a small transparent image. As to the image that you see as the main company logo on your store site, it is specified not here, but as a background image in CSS.

It should be noted that logo images in X-Cart 4.6 are implemented using the CSS sprites technique. In the file <u>/skin/ideal_responsive/css/altskin.css</u> you can find the following lines:
<pre>
@media screen and (min-width:1200px) {

/* 1200.css */

#page-container {
width: 1200px;
}
#header .line1 .logo a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat left top;
width: 297px;
height: 42px;
}
#left-bar .gift-certificate a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat 0px -52px;
width: 250px;
height: 53px;
}
</pre>

The file <u>main_sprites_lg.png</u> referenced in the CSS above is an image sprite: an image containing more than one images (in our case, main company logo and left-bar gift certificate logo) combined into one. The sprites technique suggests that instead of being fetched separately, images contained in the sprite are activated by shifting the background-position. The CSS here defines which portion of the <u>main_sprites_lg.png</u> image to show in each case. The height and width properties define the portion of the image that needs to be displayed; "left top" and "0px -52px" define the position (top-left coodinates) of the respective portion within the sprite. So, as you can see from the CSS above,  for screen widths 1200px and greater the size of the default main company logo is 42px x 297px, the size of the gift certificate logo is 53px x 250px; the main company logo is picked from the top left corner of the sprite, and the gift certificate logo is picked from the positon of 52px down the Y-axis (main company logo height of 42px + 10px extra space between the images).

If you look at the code of <u>/skin/ideal_responsive/css/altskin.css</u> further, you will find a few more fragments similar to the one above, for instance:
<pre>
@media screen and (min-width:960px) and (max-width:1199px) {

/* 960.css */

#header .line1 .logo a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat left top;
width: 297px;
height: 42px;
}
#left-bar .gift-certificate a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat 0px -52px;
width: 250px;
height: 53px;
}
</pre>

and
<pre>
@media screen and (min-width:790px) and (max-width:959px) {

/* 700.css */

...

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

...

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

and
<pre>
@media screen and (max-width:789px) {

/* mobile.css */

...

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

...

#left-bar .gift-certificate a img {
background: transparent url(../images/main_sprites_lg.png) no-repeat 0px -52px;
width: 250px;
height: 53px;
}
</pre>

The CSS in these fragments is intended for the different screen sizes on which the store site can be displayed. The image <u>main_sprites_sm.png</u> is a smaller version of <u>main_sprites_lg.png</u>; it is used for smaller screens.

So, now that you have seen how logo images are implemented in Ideal Responsive, you can try and add your own company logo to the site.


Here's the '''recommended method for changing X-Cart's default company logo image''':

# Prepare your company logo graphics. We recommend using two images: one logo sized 42px x 297px for screen widths of 960px and greater, and another one sized 30px x 212px for screen widths 959px and smaller. It is possible to use images of other sizes, but in this case you will need to adjust the height of the page header and edit the width and height properties for the respective images in <u>/skin/ideal_responsive/css/altskin.css</u> accordingly.
# Edit the <u>main_sprites_lg.png</u> and <u>main_sprites_sm.png</u> images in your favorite image editor to replace X-Cart's default company logo images contained in them with your own company logo graphics. If the dimensions of your own logo images differ from those of X-Cart's default logo images, simply prepare your own image sprites similar to <u>main_sprites_lg.png</u> and <u>main_sprites_sm.png<u>.
# Save the new sprites as  <u>main_sprites_lg.png</u> and <u>main_sprites_sm.png</u> and upload them to the <u>skin/ideal_responsive/images/</u> folder in your X-Cart installation.

You should now be able to see the new logo on your site (If you do not see the new logo, clear your browser's cache).


'''Tips:'''

We recommend using Firebug add-on for Firefox to inspect the HTML source of your X-Cart store's pages. It is a handy tool that can help you to find out what specific HTML blocks, CSS file and class(es) need to be edited in order to implement the desired changes.

Also, you can use X-Cart's Webmaster Mode feature to find out what specific language variables and Smarty templates are used to create the page being changed.



<div id="QuickChangingLogoIdealResponsive"> </div>
There's also an '''alternative method for changing the default logo'''. With this method, you do not need to edit image sprites, but the logo image will be the same on all screen sizes.

To change the main company logo using this method, do the following:

1. Prepare your logo image file. For the sake of example, we will refer to this file as 'custom_logo.png', but you can use a different file name - just be sure to use that name instead of 'custom_logo.png' when you refer to the logo image file in your template code. The default logo image size for Ideal Responive is 42px x 297px, but you can use a differently sized image (In this case more extensive editing of CSS and templates will be needed).

2. Upload your chosen logo image file to the <u>/skin/ideal_responsive/images/custom</u> directory of your X-Cart installation.

3. In the file <u>/skin/ideal_responsive/css/altskin.css</u>, create a new css class for the main logo - for instance, 'logo_custom' - by adding the following lines:
<pre>
#header .line1 .logo_custom a img {
width: 297px;
height: 42px;
}
</pre>
(If your logo image is sized differently, you must specify the actual width and height of your logo image).

4. In the template file <u>/skin/ideal_responsive/customer/head.tpl</u>, find the following lines:
<pre>
<div class="line1">
<div class="logo">
<a href="{$catalogs.customer}/home.php"><img id="main_logo" src="{$ImagesDir}/spacer.gif" alt="Logo Placeholder" /></a>
</div>
</pre>

and replace them with the following:

<pre>

<div class="line1">
<div class="logo_custom">
<a href="{$catalogs.customer}/home.php"><img src="{$AltImagesDir}/custom/custom_logo.png" alt="" /></a>
</div>
</pre>

(Here you must use the actual name of your logo image file).

5. If the size of your logo image is other than 42px x 297px, you may also want to adjust the height of the page header so your logo image fits in nicely.

To see the changes on your site, you may need to clear your browser's cache.
<br /><br />

See also:<br />
* [[X-Cart:Adding a 3rd Column to Ideal Responsive]]