Changing color and font properties in the storefront

The storefront of WebAsyst Shop-Script utilizes CSS styles to apply necessary appearance attributes to individual web page elements. HTML tags are mainly used to create the overall page structure; therefore, if you need to change appearance of a certain element (e.g., text color or font size), CSS styles should be changed. To do so, use the "CSS" tab in the Shop-Script's built-in design editor.

How do I find out what exactly should be changed?

It is essential to remember that the CSS editor can not contain style properties relating to the element whose design you want to change. The appearance of such an element may either depend upon its parent elements' style properties or be defined by default browser style rules. In this case you have to add a new selector to the CSS editor window and specify necessary properties for it.

Note: In order to edit CSS code, you must have at least basic knowledge of this technology; also it may be convenient to be able to look up different CSS properties in an offline or online reference book such as http://www.w3schools.com/css/css_reference.asp.

To determine what exactly should be changed in the existing CSS code, use web developer tools available in the latest versions of most popular web browsers; e.g., Firebug add-on for Mozilla Firefox, built-in developer tools in Internet Explorer and Google Chrome, or Dragonfly in Opera browser.

Most of these tools allow changing style properties in real time so you do not have to refresh the web page to see the result. As soon as you ensure that the desired effect has been achieved using the browser developer tool, make (and save) the same changes to the CSS code in the Shop-Script's built-in editor window and refresh the storefront in your browser to test the changes made. Be sure to test design changes in several different web browsers because they may display the same elements differently.