Building the page

The web toolkit

Iframe descriptions

Other components

Building the page

Implementing in WordPress

Implementing in HTML

Configuring CSS styles

Iframe CSS styles

CSS file structure

The checkout screens

Club selection and signup

The account manager

Administrative tools

Installing the Active web tools on a clientʼs site requires three main steps:

  1. Create the iframes by adding the HTML code from one of the available design templates to the page. For sites built with WordPress, this entails installing the Active WordPress plugin and inserting the appropriate shortcodes on each page.

  2. Change the parameters as needed to refer to the clientʼs database and set display options.

  3. Set up the necessary CSS styles.

Video tutorials

Iframe scenarios

A clientʼs Active web site typically consists of multiple pages, each containing one or more of the available web tools components. These can occur in the following functional combinations:

Using WordPress

To construct a web page with standard HTML techniques, the web designer chooses one of these scenarios and adds the appropriate <iframe> elements as listed. In practice, however, most client web sites are built with the WordPress content management system. Active recommends this method for two reasons:

For details on setting up the Active web tools in WordPress, see Implementing in WordPress.

Master pages

A client normally develops its e-commerce web pages using one of three main approaches:

A client who elects to eschew all of these options will be provided by default with an e-commerce web site on an Active server. This “master” site is fully functional once the client supplies its preferred header images. The main e-commerce page for the master site is at, where scenario_number selects one of the available iframe scenarios listed above.

To see different versions of the sample master site, follow the link above. Once the browser displays the page, change the scenario= parameter to any number from 1 to 8 and reload.

Additional master pages implement the corresponding web components for a fully functioning package:

The design of these pages is fixed in corresponding master style sheets; styling changes are not permitted.

Modifying the styles

The appearance of the iframes on the host page is determined by CSS styles in the master style sheet, maintained on the Active web server. The client can modify these styles with an override style sheet.