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 (see figure 2 for an example).
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.
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:
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: Similar sets of rules are included in the iframe CSS, to control the appearance of styles within the iframes.
The Active web pages offer a number of alternative design variants; these are illustrated on the companyʼs web site. Each design is built on a corresponding master style sheet (ACSWallawalla2.css, ACSNapa2.css, etc.). Once the client has selected a design, add a reference to this file 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).
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.