Changing the style of elements in the storefront

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:
    1. Open the source using the Page source option in your browser.
    2. Find the text whose look and feel you need to change.
    3. 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:
      <div class="mainbox-title">Welcome</div>
      You will see the class name before the text. It is "mainbox-title" for this example.
  2. Using a text editor open the styles.css file located in the skins/[CUSTOMER_ACTIVE_SKIN]/customer directory of your CS-Cart installation, where [CUSTOMER_ACTIVE_SKIN] is an active skin of your storefront.
    NOTE: If you need to modify the style of links in the JavaScript menu (Emenu) of the Categories sidebox you should open the vmenu.css file located in the skins/[CUSTOMER_ACTIVE_SKIN]/customer directory of your CS-Cart installation.
  3. Find the class name (e.g. mainbox-title) and change the desired parameters for it:
    For example: The code for the "mainbox-title" class for the "Basic" skin will look like this:
    color: #3da5ee;
    font: 22px Arial, Helvetica, sans-serif;
    padding: 6px 0px 7px 0px;
    }
  4. Save the file.

Noticed an error in the article or it is not clear enough? Any suggestions to improve it? Please let us know by filling in the feedback form. Click here.