Iframe CSS styles

The web toolkit

Iframe descriptions

Other components

Building the page

Implementing in WordPress

Implementing in HTML

Configuring CSS styles

Iframe CSS styles

The checkout screens

Club selection and signup

The account manager

The diagrams below describe the structure of the HTML streams returned by the Active Club cart scripts. Use this information to determine how to modify the CSS styles for each component of the “shopping cart.”

In each diagram, hold the cursor over a block of text to see which CSS class applies to it.

For example, to change the appearance of the item price in the product catalog, hold the cursor over “$48.00” in the diagram below; this reveals that the style is applied through a <SPAN> tag, with the class attribute “CatalogPrice.” In the override style sheet, locate this selector:

.CatalogPrice {
  color: #b10101;
  font-size: 32px;
  font-weight: bold;
}

and change its color, font-size, font-weight, or other attributes as needed.

For examples of how to include CSS selectors, use the developer tools in many web browsers to inspect the master iframe style sheet. Note also that users of Active Club Manager can modify the text of most of the fields in any of the iframes — for example, “Available,” “Vintage,” or “QTY” — as needed in the corresponding Frame Configuration record.

In addition, we describe here the @media queries which respond to device display dimensions.


   Logout button and Join header


   The product catalog



   The member login form


   The product details display



   The member choice catalog



   The shopping cart editor


   The “shopping basket”



   The display menu


   The user message display



   The @media queries