Changing the style of elements in the storefront of AIM-Cart
To change the style (font, color) of some design elements (links, text, etc.):
1. Find out the name of the class used for the desired element. You can do it by using a special tool (e.g. Firebug) or by viewing the source of the page on which this element is located: Open the source using the Page source option in your browser.
A. Find the text whose look and feel you need to change.
B. Remember or copy the class name that is defined for this text.
For example: you need to change the “Welcome” title displayed on the home page. Open the page source of your home page and find this text. It will look like this:
<h1><span>Welcome</span></h1>
You will see the class name before the text. It is “mainbox-title” for this example.
2. Create the following directories path in the root directory of your AIM-Cart installation: skins/[CUSTOMER_ACTIVE_SKIN]/customer/addons/my_changes/hooks/index, where [CUSTOMER_ACTIVE_SKIN] is an active skin of your storefront.
3. Create the styles.post.tpl file in the skins/[CUSTOMER_ACTIVE_SKIN]/customer/addons/my_changes/hooks/index directory with the following content:
<link href=”{$config.skin_path}/addons/my_changes/styles.css” rel=”stylesheet” type=”text/css” />
4. Create the styles.css file in the skins/[CUSTOMER_ACTIVE_SKIN]/customer/addons/my_changes directory with the desired style parameters for your class. For example:
.mainbox-title span {
color: #2de2de;
font: bold 26px Arial, Helvetica, sans-serif;
}
5. To add or change an image for some element, specify the URL to the image in the following way:
url(‘../../images/icons/calendar_previous.gif’)
For example, to change the background image for some element, put a new image to the skins/[CUSTOMER_ACTIVE_SKIN]/customer/images directory and specify the background parameter for this element in the following way:
background: url(‘../../images/icons/calendar_previous.gif’);
6. Save the file.
NOTE: If you need to modify the style of links in the JavaScript menu (Emenu) of the Categories sidebox you should modify the dropdown.css file located in the skins/[CUSTOMER_ACTIVE_SKIN]/customer directory of your AIM-Cart installation.
