Associate-O-Matic v5 Documentation   Last Updated: 2013-11-26
 
 
   STORE
· Getting Started
· Amazon
· Categories
· Home Page
· Merchant
· Shopping Cart
· Site
· Subcategories
 
   CONTENT
· Built-In Boxes
· Custom Boxes
· Custom Pages
· Currency
· Display
· Meta Descriptions
· Meta Keywords
· Reviews
· RSS
· Search
· Titles
 
   APPEARANCE
· Background
· Buttons
· Colors
· CSS
· Images
· Layout
· Tabs
· Text
· Themes
 
   OPTIMIZE
· Advanced
· Cache
· Errors
· Filters
· Reports
· SEO
 
 
Control Panel - CSS Settings
 
This section documents CSS settings.

Site CSS
Enter the URL to your own CSS file (i.e. http://www.yoursite.com/styles.css) to further customize AOM beyond the control panel. NOTE: You can also directly edit the included /aom/cfg.css.php file or use it as a baseline for your own CSS file. It contains all the AOM style tag definitions.
CSS Override
Whether you want override all AOM CSS definitions. NOTE: If set to Yes, it is assumed you have setup your own CSS file above with style definitions similar to those found in /aom/cfg.css.php

 
Here are the current CSS hooks at your disposal (alphabetical order). Many of them can be customized from within the control panel. The remainder would be customized by editing the /aom/themes/default/css.tpl.php and then save your settings from the admin.
 
aom_ac Accent color
aom_bb Box bullets (e.g. Category box, etc...)
aom_bc Breadcrumb links
aom_bl Custom Box label text
aom_bt
Custom Box text font, size, etc...
aom_c Body
aom_cb Body border
aom_ct Cart
aom_cte Cart text even
aom_cto Cart text odd
aom_ctle Cart line even
aom_ctlo Cart line odd
aom_ctm Cart message
aom_cts Cart subtotal
aom_d Date
aom_e Error message text
aom_hr Style, color, size of horizinal lines
aom_il Item link
aom_ir Item link regular
aom_l Location
aom_lt Location text
aom_ma Marketplace Amazon offer row color
aom_mb Marketplace bar color
aom_mbox Merchant boxes that wraps around merchant info on "Select Options" item pages
aom_mr[1-15] Up to 15 Merchant boxes can be displayed on "Select Options" item pages. These hooks let you color code merchant listings in the select box to the associated merchant box info
aom_mlf Marketplace link off
aom_mlo Marketplace link on
aom_mtf Marketplace link off
aom_mto Marketplace tab on
aom_n New item callout (e.g. New in the last 30 days)
aom_navcontainer

Custom tab style (used in DIV).

For dozens of additional tab styles see the CSS Tab Designer by:

OverZone Software
http://www.highdots.com/css-tab-designer/

aom_navlist Custom tab style (used in the UL tag)
aom_navactive Custom tab style (used in the selected A link)
aom_pb Price (buy)
aom_pl Price (list)
aom_po Price (on sale)
aom_rss_cp_container RSS custom page - container
aom_rss_cp_title RSS custom page - page title
aom_rss_cp_item_container RSS custom page - news item container
aom_rss_cp_item_title RSS custom page - news item title
aom_rss_cp_item_pubDate RSS custom page - news item publication date
aom_rss_cp_item_description RSS custom page - news item description
aom_rss_cp_item_link RSS custom page - news item link
aom_rss_cb_container RSS custom box - container
aom_rss_cb_item_container RSS custom box - news item container
aom_rss_cb_item_title RSS custom box - news item title
aom_rss_cb_item_pubDate RSS custom box - news item publication date
aom_rss_cb_item_link RSS custom box - news item link
aom_sb Searchbar
aom_sbox Used to style the search text box
aom_sbt Searchbar text
aom_sh Shipping text
aom_sl Subtitle text
aom_smenu Used to style the search drop down menu
aom_st Subtext
aom_sto 'In Stock' message
aom_sth Subtext highlighted
aom_stn Subtext normal
aom_tag[1-6] Used to define tag cloud links. As each link increases in popularity/frequency, it uses a higher number (the largest items being aom_tag6.
a:hover.aom_tag[1-6] Defines the href links for the various tag cloud tiers above
aom_t1 All CSS hooks related to the Rounded tab style
aom_t2 All CSS hooks related to the Square tab style
aom_t Text title
aom_tl Text logo settings
aom_tr Text regular
aom_ts Text small
aom_pg Controls the pagination look and feel
aom_auto Controls the Auto Parts Finder Box look and feel
ac Controls the Auto Completion look and feel


Customize Individual Tab Colors


Each tab is automatically assigned a class ID which is in the format aom_tab_[YourCategoryID] (e.g. aom_tab_ebooks).
To customize a tab you would use your Category ID in place of the example ebooks ID used in the example below.
Then change the color (e.g. #FFFFFF) and background-color (e.g. #5A7BAD) to the colors you would like to use.

/* rounded tab style */
.aom_t1 .aom_tab_ebooks_on {color:#FFFFFF; background-color:#5A7BAD;}
.aom_t1 A:hover .aom_tab_ebooks {color:#FFFFFF; background-color:#5A7BAD;}
.aom_sb_ebooks {background-color:#5A7BAD;}
A.aom_sbt_ebooks:link {color:#FFFFFF;}

/* square tab style */
.aom_t2 A.aom_tab_ebooks_on:link, .aom_t2 A.aom_tab_ebooks_on:visited {color:#FFFFFF; background-color:#5A7BAD;}
A.aom_tab_ebooks:hover, A.aom_tab_ebooks:active {color:#FFFFFF; background-color:#5A7BAD;}
.aom_sb_ebooks {background-color:#5A7BAD;}
A.aom_sbt_ebooks:link {color:#FFFFFF;}


Customize Box Headings

To customize the header section of any Box such as adding a background image, etc, you would create rules associated with the Box name.

The Boxes available are:

SubcategoryBox
RelatedCategoryBox
NarrowByBrandBox
NarrowByPriceBox
NewReleaseBox
BestsellerBox
Information Box
CustomBox[index] (see instructions below)


So let's say you wanted to add a background image to the Category Box that repeats. You could add the following CSS entry to the cfg.css.php file (editing the url value to the actual url):

.CategoryBox {
background-image:url("http://url/to/picture.gif");
background-repeat: repeat;
background-color: #FFFFFF;
}


To customize any Custom Boxes you would reference "CustomBox[index here]". So if you create 4 Custom Boxes, the order they appear in the Control Panel is the order they get assigned index numbers. The first box would be referenced with CustomBox1, the
second box with CustomBox2 and so on.

.CustomBox1 {
background-image:url("http://url/to/picture.gif");
background-repeat: repeat;
background-color: #FFFFFF;
}