This guide covers the main classes in the style sheet and how they are used. We are going to start by covering some of the basics. If you have experience with css you can skip ahead.
Colors - You can drastically change the look of your shopping cart by making some color changes to the style sheet. Later on we will cover what classes affect what parts of your website, here we will show you how to change a color. In the style sheet you will see the terms background-color: #EEEEEE and border-color: #9A9A9A used often. The letters and or numbers following the # sign are called a hexadecimal code and they tell the browser what color to display. The easiest way to figure out the hexadecimal code for a color is to use a color picker. Click here to try one out
Fonts - There are three main properties used to control fonts in the style sheet font-family, font-size and color. Font-family will control the actual font that is being displayed on your website and will usually have three font names declared. The first is the primary and if you are new to css this is the only one you should change. For a list of web safe fonts click here. Font-size will do exactly what it sounds like, control font size. A higher number will increase the size of your text and a lower number will decrease the size of your text. Color will not say font in front of it but where ever you see it in the style sheet it is controlling the color of the font for that class. To change the color you need to change the hexadecimal color code as we explained in the color section.
The Menu class is used to create the frame around the menu on the left side of AFCommerce. It creates a grey background with a dark grey border. This class is called in the toplayout.php file
If you change the background color your links will now have a grey border around them. This border is created by the lftnav class. If you want to eliminate the border make the border-color of lftnav match the background color of the menu class. There are two classes headline1 and headline2 that are used to control the border, background color, and text inside of the navigation menu that is not a link. Headline1 is only used at the very top of the menu because it helps create the border at the top for the curved edges.
The lftnav class is used to control the links inside of the menu on the left side of AFCommerce.
The lftnav class is great for customizing the look of AFCommerce. You can add a background image to the class to create buttons with a rollover effect. To do this add background-image: url('yourimagename.jpg') to the A.lftnav:link class of your style sheet. To create a rollover effect add the same code with a different image to the A.lftnav:hover class of your style sheet. This gives you an image rollover without any Java Script. Click here to see this in action
The bodyframe class is used to create the frame around the main body of content on AFCommerce. It creates a white background with a dark grey border. This class is called in the toplayout.php file at the very bottom of the page
The bodyframe class inherits the background color from the body class. You can easily assign bodyframe its own background color to make the body of your content stand out. Click here to see this in action
The getcategory class creates the border and background color around a link to a product while the A.getcategory controls the actual link to the product. This class is called on getcategory.php, showspecials.php, showclearance.php showbundles.php, bestsellers.php, whatsnew.php, getmanufacture.php, and the search results.
If you would like to change the default colors I recommend making all the background colors match except for the A.getcategory:hover class. This will create a really smooth look when a mouse cursor is placed over a product link. The subcategory class works the same way but is only applied to sub-categories.
The name class controls font size and color for the page name that will appear at the top of the page in the main body of content. For example a categories name.