X-Cart:Replacing X-Cart's Logo in the Ideal Responsive Skin
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 '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 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 skin/ideal_responsive/images/custom directory of your X-Cart installation.
3. In the file skin/ideal_responsive/css/altskin.css, create a new css class for the main logo - for instance, 'logo_custom' - by adding the following lines:
#header .line1 .logo_custom a img {
width: 297px;
height: 42px;
}
(If your logo image is sized differently, you must specify the actual width and height of your logo image).
4. In the template file skin/ideal_responsive/customer/head.tpl, find the following lines:
<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>
and replace them with the following:
<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>
(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.
To change the logo shown on invoices change the skin/ideal_responsive/images/custom/small_logo.gif in the same manner.
See also:
