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