Configuring 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 appearance of the iframe components on the page is defined by two sets of CSS class rules:

Host site styles

Because the iframes in the web toolkit are embedded in the existing host web page, their formatting and appearance are subject to its sitewide CSS rules. Each Active Club iframe includes a class attribute (e.g. CatalogFrame, MenuFrame), and its containing <DIV> element similarly includes a corresponding class (e.g. CatalogFrameDiv, MenuFrameDiv). These refer to selectors that are stored in CSS style sheets for the site. Figure 2 shows the selectors and their values for one of the Active Club design templates (“Livermore”; ACSLivermore.css).

alert The styles shown in figure 2 are for illustration only. The correct styles for each design version appear in a correspondingly named master style sheet; see Choosing a layout.


Figure 2: Example host site CSS styles (style “Livermore”)

/* Active Club web toolkit styles */

.ACSLoginDiv { /* Member login */

position: fixed;
top: 0;
right: 1%;
width: 130px;
height: 40px;
z-index: 10000;
vertical-align: bottom;

  }

.ACSLogin {

font-size: 120%;
font-weight: 500;
color: #b10101;
line-height: 40px;
margin-left: 10px;

  }

.ACSLoginDiv:hover {

background-color: #EA3D47;
cursor: pointer;

  }

.CatalogFrameDiv { /* “Catalog” div */

float: left;
margin-top: -100px;
margin-left: 15%;
margin-right: 0;
margin-bottom: 0;
width: 80%;
height: auto;
background-color: white;

  }

.CatalogFrame { /* “Catalog” iframe */

outline: none;
border: none;
width: 100%;
height: auto;

  }

.BasketFrameDiv { /* “Shopping basket” div */

outline: none;
border: none;
margin: 0;
padding: 0;
position: fixed;
top: 160px;
right: 10px;
height: auto;
width: 380px;
z-index: 101;

  }

.BasketFrame { /* “Shopping basket” iframe */

outline: none;
border: none;
margin: 0;
padding: 0;
width: 100.5%;
height: auto;

  }

.MenuFrameDiv { /* Catalog menu div */

outline: none;
border: none;
margin: 0;
padding: 0;
float: left;
position: fixed;
top: 350%;
left: 5%;
height: auto;
width: 15%;
max-width: 220px;
z-index: 102;

  }

.MenuFrame { /* Catalog menu iframe */

outline: none;
border: none;
margin: 0;
padding: 0;
position: fixed;
width: 60%;
max-width: 50%;
height: auto;

  }

.MsgFrameDiv { /* Message window div */

outline: none;
border: none;
margin: 0;
padding: 0;
position: fixed;
height: auto;
max-width: 50%;
width: 60%;
z-index: 10000;

  }

.MsgFrame { /* Message window iframe */

width: 100%;
outline: none;
border: none;
margin: 0;
height: auto;
border-left: solid 1px gray;
box-shadow: 3px 5px 3px gray;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 15px;

  }

.RegisterFrameDiv { /* “Register” div */

margin-top: -100px;
margin-left: 10%;
margin-right: 0;
margin-bottom: 0;
height: auto;
width: 80%;
background-color: white;

  }

.RegisterFrame { /* “Register” iframe */

width: 100%;
outline: none;
border: none;
height: auto;

  }

.ManageFrameDiv { /* “Manage” div */

margin-top: -100px;
margin-left: 10%;
margin-right: 0;
margin-bottom: 0;
height:auto;
background-color: white;
width:80%;

  }

.ManageFrame { /* “Manage” iframe */

width:100%;
outline:none;
border:none;
height:auto

  }

.SelectionFrameDiv { /* “Selection” div */

margin-top: 10px;
margin-left: 10%;
margin-right: 0;
margin-bottom: 0;
height:auto;
background-color: white;
width:80%;

  }

.SelectionFrame { /* “Selection” iframe */

width:100%;
outline:none;
border:none;
height:auto;

  }

/* @media queries for responsive design */

@media screen and (max-width: 1530px) {

.ACSLoginDiv {
  top: 40px;
}
.CatalogFrameDiv {
}

  }

@media screen and (max-width: 1224px) {

.CatalogFrameDiv {
}

  }

@media screen and (max-width: 1024px) {

.ACSLoginDiv {
  top: 0;
}
.CatalogFrameDiv {
}
.MenuFrameDiv {
display: none;
}

  }

@media screen and (max-width: 880px) {

.CatalogFrameDiv {
margin-left:0;
width: 100%;
}
.ManageFrameDiv {
margin-left: 0;
width:100%;
}
.BasketFrameDiv {
right: 0;
top: 0;
}
.MenuFrameDiv {
display: none;
}
.MsgFrameDiv {
width: 90%;
max-width: 100%;
}

  }

@media screen and (max-width: 700px) {

.CatalogFrameDiv {
margin-left:0;
width: 100%;
}
.ManageFrameDiv {
margin-left: 0;
width: 100%;
}
.BasketFrameDiv {
right: 0;
}
.MenuFrameDiv {
display: none;
}
  }

@media screen and (max-width: 600px) {

.ACSLoginDiv {
top: 40px;
}
.CatalogFrameDiv {
}
.MenuFrameDiv {
display: none;
}
  }

@media screen and (max-width: 480px) {

.BasketFrameDiv {
top: 0;
right: 0;
}
  }

Rules for Squarespace



The @media queries

In addition to these standard CSS style selectors, the host site styles include a number of conditional instructions based on the display capabilities of the rendering device. For example, the following rule:

@media screen and (max-width: 880px) {

.CatalogFrameDiv {
margin-left:0;
width:100%
}
.ManageFrameDiv {
margin-left:0;
width:100%
}
.BasketFrameDiv {
right:0;
top:0
}
.MenuFrameDiv {
display:none
}
.MsgFrameDiv {
width:90%;
max-width:100%
}
  }

applies when the page appears on a display screen (i.e., a computer, tablet, smartphone, etc., as opposed to a screen reader or printer) whose width is no greater than 880 pixels. It changes the width and margin properties of the catalog (.CatalogFrameDiv), account manager (.ManageFrameDiv), and other <DIV>s to suit devices of this size.

Note: A similar set of rules is included in the catalog CSS, to control the appearance of styles within the iframes.

(For details on using @media queries, see http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.)

Iframe styles

To control how it is rendered in browsers, every element of the text within an iframe is also assigned a class attribute. These are defined in a pair of CSS style sheets:

The web tools read the locations of both of these style sheets from the Frame Configuration record in Active Club Manager (see note below); no stylesheet links are needed on the host page.

Choosing a layout

To provide alternative designs for the web tools, Active Club Solutions offers several versions of the master iframe style sheet, named ACSWallawalla.css, ACSNapa.css, etc. Examples are provided on the Active Club web site. Once the client has selected one of the available designs, add the corresponding master style sheet references to the Frame Configuration record.

Note: The Frame Configuration record contains references to the host and iframe style sheets and numerous other settings used for the page (e.g., the SQL search criteria that determine which inventory items appear in the catalog), as well as the text of most fields and labels within the iframes. By creating alternate Frame Configuration records, you can select a completely different design for a site simply by replacing the wcrshopid and wcripadshopid parameters with the corresponding FC record numbers (see Iframe details).

more

Creating the override CSS

The master iframe style sheet contains the default style settings for the page; no changes are permitted. To modify the iframesʼ format and appearance, you will need to install and edit an “override” style sheet. Active Club support will provide a template for this file, named CompanyNameiframe.css, which you may place in any desired location. You must provide Active Club Solutions with the link to this file; it must be on an SSL-secured server, accessible through an https:// link.

Any of this still true?

Because virtually every element of the embedded iframe components includes a CSS class, the override style sheet provides detailed control over their appearance. The designer can modify the style definitions as needed (e.g., to match the appearance of the existing web site). For details, see Iframe CSS styles.