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

CSS file structure

The checkout screens

Club selection and signup

The account manager

Administrative tools

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 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. For example, Figure 2 shows the selectors and their values for one of the Active design templates (“Livermore”; ACSWPLivermore.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 web toolkit styles ******/

.ACSLoginDiv {
  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 {
  margin-top: 0;
  margin-left: 15%;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  background-color: white;
  width: 80%;
}
.CatalogFrame {
  width: 100%;
  border: none;
  height: auto;
}
.BasketFrameDiv {
  border: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 180px;
  right: 10px;
  height: auto;
  width: 380px;
  z-index: 101;
}
.BasketFrame {
  border: none;
  margin: 0;
  padding: 0;
  width: 100.5%;
  height: auto;
}
.MenuFrameDiv {
  border: none;
  margin: 0;
  padding: 0;
  float: left;
  top: 450px;
  left: 5%;
  height: auto;
  width: 15%;
  max-width: 220px;
  position: fixed;
  z-index: 102;
}
.MenuFrame {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}
.MsgFrameDiv {
  border: none;
  margin: 0;
  padding: 0;
  position: fixed;
  height: auto;
  max-width: 50%;
  width: 60%;
  z-index: 10000;
}
.MsgFrame {
  width: 100%;
  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 {
  margin-top: 0;
  margin-left: 10%;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  background-color: white;
  width: 80%;
}
.RegisterFrame {
  width: 100%;
  border: none;
  height: auto;
}
.ManageFrameDiv {
  margin-top: 0;
  margin-left: 10%;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  background-color: white;
  width: 80%;
}
.ManageFrame {
  width: 100%;
  border: none;
  height: auto;
}
.SelectionFrameDiv {
  margin-top: 10px;
  margin-left: 10%;
  margin-right: 0;
  margin-bottom: 0;
  height: auto;
  background-color: white;
  width: 80%;
}
.SelectionFrame {
  width: 100%;
  border: none;
  height: auto;
  outline:none;
}
.ForgotPasswordFrameDiv {
   margin-top: 0;
   margin-left: 10%;
   margin-right: 0;
   margin-bottom: 0;
   height: auto;
   background-color: white;
   width: 80%;
}
.ForgotPasswordFrame {
   width: 100%;
   outline: none;
   border: none;
   height: auto;
}
.ResetPasswordFrameDiv {
   margin-top: 0;
   margin-left: 10%;
   margin-right: 0;
   margin-bottom: 0;
   height: auto;
   background-color: white;
   width: 80%;
}
.ResetPasswordFrame {
   width: 100%;
   outline: none;
   border: none;
   height: auto;
}
.UnsubscribeFrameDiv {
   margin-top: 0;
   margin-left: 10%;
   margin-right: 0;
   margin-bottom: 0;
   height: auto;
   width: 80%;
}

.UnsubscribeFrame {
   width: 100%;
   outline: none;
   border: none;
   height: auto;
}

.NewsletterHookFrameDiv {
   margin-top: 0;
   margin-left: 10%;
   margin-right: 0;
   margin-bottom: 0;
   height: auto;
   background-color: transparent;
   width: 26%;
}

.NewsletterHookFrame {
   width: 100%;
   outline: none;
   border: none;
   height: auto;
}

.NewsletterFrameDiv {
   margin-top: 0;
   margin-left: 20%;
   margin-right: 0;
   margin-bottom: 0;
   height: auto;
   background-color: white;
   width: 60%;
}

.NewsletterFrame {
   width: 100%;
   outline: none;
   border: none;
   height: auto;
}

/****** Start Media Statements ******/
@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: 1090px) {
}

@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;
   }
}
/****** End Media Statements ******/

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 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 Manager (see note below); no stylesheet links are needed on the host page.

Choosing a layout

The Active web pages offer a number of alternative design variants (named ACSWallawalla.css, ACSNapa.css, etc.); these are illustrated on the companyʼs 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. Any aspect of the iframesʼ format and appearance may be modified for a specific site by adding an “override” style sheet, which is read after the master style sheet. It can be edited and maintained either by Activeʼs designer or locally by the client, who may place this file in any desired location, but must provide Active with the link to it; it must be on an SSL-secured server, accessible through an https:// link. Once the design is settled, the override style sheet can be moved permanently to the Active web server for better performance, or copied there for backup.

This file should named CompanyNameiframe.css; Activeʼs web designer will create it from the template redlavaposiframe.css. Do not create an override sheet by simply copying and pasting the entire master style sheet. The override CSS should contain only style definitions that differ from the defaults. See Editing the styles.