Color Schemes: A Users Guide

Color Schemes: A Users Guide

Color schemes are a relatively new feature of AOM that allow you to change the color combinations of a site with just a click or two. Many are now included with v5. You can also save your own custom color layouts as schemes. We’re going to take a look at how color schemes work, and how you can set up your own.

When a site is first created, it will automatically load a series of default colors for such elements as Background Color, Main Color, Accent Color, Text Color and so on. These are represented as the AOM Classic color scheme, one of thirty-five included with AOM as shown in the image below:

Color Schemes

To customize your site, you can change the default colors in one of two ways*. The first method is by manually changing the colors. Most of the site colors are listed below the color schemes:

Manual Color Options

The rest can be found under the Categories, Subcategories, Shopping Cart, Custom Boxes, Custom Pages, Standard Boxes, Tabs and Text tabs of the AOM control panel. Here is an example of the color options for the Categories box (outlined in red):

Categories Box, w/Color options highlighted

You would simply enter the HEX color code in the various boxes shown to change the colors. Prior to v5, this was the only method to assign colors in AOM. Note that if you manually change any colors, selecting a premade color scheme will overwrite the manual changes.

The other method is of course, to pick a color scheme from the ones shown. If you purchase a premade template for your store, any included color schemes should automatically appear alongside the default schemes.

To create your own color schemes, the best way is to first open the scheme_classic_aom.php file located in the /aom/colors subdirectory. Inside this file you will see a list like this:

$scheme[‘Name’]            = “AOM Classic”;
$scheme[‘Author’]        = “Associate-O-Matic”;
$scheme[‘Url’]            = “”;

// COLORS (required)
$scheme[‘MainColor’]        = “#0289C1”;
$scheme[‘AccentColor’]        = “#77C1DD”;
$scheme[‘BgColor’]        = “#EAEAEA”;
$scheme[‘BodyBorderColor’]    = “#EAEAEA”;
$scheme[‘BodyBgColor’]        = “#FFFFFF”;
$scheme[‘BoxBorderColor’]    = “#CCCCCC”;
$scheme[‘BoxBgColor’]        = “#FFFFFF”;

// COLORS (optional)
$scheme[‘TextColor’]        = “#000000”;
$scheme[‘TextHighlightColor’]     = “#990000”;
$scheme[‘TextDarkColor’]    = “#000000”;
$scheme[‘TextLightColor’]    = “#FFFFFF”;
$scheme[‘LineColor’]        = “#EAEAEA”;
$scheme[‘LinkColor’]        = “#0000CC”;
$scheme[‘LinkHoverColor’]    = “#6666FF”;
$scheme[‘LinkVisitedColor’]     = “#551A8B”;
$scheme[‘TabBorderColor’]    = “#000000”;

As you can see, this list is divided into three main parts. The first part identifies the file, with the name of the scheme, the author, and the website of the author. If you are creating your own scheme, you would be the author. The website can be the store you are creating the scheme for.

The second section (marked as required), deals with the Main and Accent colors, as well as the site background (‘BgColor’) and the body/border of the main area in the center of the page where the products are found (‘BodyBgColor’, ‘BodyBorderColor’). The last two items in this section (‘BoxBorderColor’ and ‘BoxBgColor’) deal with the side boxes such as Categories, Subcategories, Bestsellers and the like. This is a universal setting, which means it’s not possible to set the individual boxes with different colors, as you can do manually. All the boxes in the side columns will be the same color.

Finally, the third section (shown as optional), relates to text, links, the separator lines and tabs.

You would enter your own HEX values for the various choices you would like to customize, then save this with a new file name, such as scheme_clothing_store.php :

$scheme[‘Name’]         = “Clothing Store”;
$scheme[‘Author’]         = “Me”;
$scheme[‘Url’]             = “”;

// COLORS (required)
$scheme[‘MainColor’]         = “#DEDEDE”;
$scheme[‘AccentColor’]         = “#303030”;
$scheme[‘BgColor’]         = “#4A4A4A”;
$scheme[‘BodyBorderColor’]    = “#FFFFFF”;
$scheme[‘BodyBgColor’]         = “#FFFFFF”;
$scheme[‘BoxBorderColor’]     = “#DEDEDE”;
$scheme[‘BoxBgColor’]         = “#FFFFFF”;

// COLORS (optional)
$scheme[‘TextColor’]        = “#000000”;
$scheme[‘TextHighlightColor’]     = “#990000”;
$scheme[‘TextDarkColor’]     = “#000000”;
$scheme[‘TextLightColor’]     = “#FFFFFF”;
$scheme[‘LineColor’]         = “#EAEAEA”;
$scheme[‘LinkColor’]         = “#050505”;
$scheme[‘LinkHoverColor’]     = “#4A4A4A”;
$scheme[‘LinkVisitedColor’]     = “#4A4A4A”;
$scheme[‘TabBorderColor’]     = “#000000”;

By editing an existing file, you should be sure of including all the colors, as well as not leaving out any of the PHP markup required (not shown in these examples). Filenames should include the word ‘scheme’ in the beginning, so the program can identify it as a color scheme file.

Once you have saved your scheme with a new filename, upload it to the /aom/colors subdirectory. It should then appear when you open your AOM control panel and click on the Colors tab:

An Example of a Personal Color Scheme

You can create as many color schemes as you want. Then you can switch between them by just clicking on the one you prefer, and saving.

* Technical Note: There is in fact a third way of setting colors, by directly editing the css.tpl.php template file (as well as a few others that reference colors). However, there are several drawbacks to this method. One, it should not be undertaken by anyone who does not have prior experience of editing HTML and/or PHP files. It is not recommended for the novice, as an error can cause a site to severely malfunction. Two, directly setting colors in the CSS file means it will no longer be possible to change colors via the Colors tab of the AOM control panel. Finally, it’s a much more cumbersome way of going about it. The system currently in place works pretty well. Circumventing it with CSS editing is just not as elegant. So while it could be done by someone who knows what they’re doing, the two other methods discussed in this post are preferred, especially if you don’t have a strong coding background. But it is technically possible.

Latest posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.