IA Modules eCommerce Documentation

Editing HTML and CSS files

To edit the design of your site, you commonly use a program to speed the design process. The program that we recommend is Macromedia Dreamweaver 8, but you can edit your files with the program of your choice. You can even edit the files directly in notepad if you want.

The shopping cart framework that writes out all of the HTML code for the system has a common structure across all pages. The tableset is the same, with the right hand column only available on certain pages. If you were to delete your store.css file, you would see that the shopping cart pages are very plain indeed. All of the styling comes from the CSS file and definitions therein.

The structure of the different elements that create the final page is referred to as the DOM (Document Object Model). The DOM allows you to redefine elements using CSS to alter their default appearance. Common DOM elements are the "table", "tr", "td", "hr", and "a" tags. These can be redefined in CSS to change practically every aspect of their presentation. Sometimes you want to customize only a certain element or group of elements instead of all tags of one type. For this reason, we have provided either an "ID" or "class" for elements that are often customized.

Usually customization of your site begins with picking out colors. Once you have several complimenting colors, you will want to set your colors in the CSS file for text, table borders, background colors and more. You will need to know how to style the certain elements that need modification. For this, we recommend a free tool for the Mozilla Firefox web browser. The tool is a free extension call "Web Developer". We recommend that designers working with our system download this tool to easily see the Element, class, or ID for each part of the site. To download extensions for Firefox, just click on "Tools" in the top menu, then "Extensions".

When you download the tool, you get a new toolbar in Firefox. The most useful tool is the "Outline" tool. Choose "Outline", and then "Outline current element". Put your mouse over any part of the page, and viola, you can easily see what the element is, what class or ID is assigned to it, and then you can update your CSS file appropriately.

Another great Mozilla Firefox extension is ColorZilla. This extension adds a little eye dropper to the bottom left of your screen that allows you to grab a color from anything you can view in a browser. It makes matching colors a snap!

Another neat CSS 8 trick for users of Macromedia Dreamweaver 8 is this. After you have created your site definition and downloaded all of your site files (except the .xsle files! remember to never upload those!) open an HTML file such as StoreHeader.htm. You will notice that the CSS style is not applied to it. In DW, choose "Text" from the top menu, then "CSS Styles". Choose "Design-time". This allows you to apply the CSS during design-time only to see what this HTML fragment would look like with the CSS applied to it. (You dont want to actually apply the CSS to it, because the shopping cart framework does that for you when you view the site.)