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


To change the main company logo, do the following:

1. Prepare your logo image file. For the sake of example, we will refer to this file as 'logo.png', but you can use a different file name - just be sure to use that name instead of 'logo.png' when you refer to the logo image file in your template code. The default logo image size for Ideal Responsive 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 src="{$AltImagesDir}/custom/logo.png" alt="{$config.Company.company_name}" /></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/logo.png" alt="{$config.Company.company_name}" /></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 />

To change the logo shown on the invoices, change the <u>skin/ideal_responsive/images/custom/small_logo.gif</u> in the same manner.

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