CSS

CSS

As described before, the visual elements of an Exponential site are determined by the instructions contained in CSS files.

Refer to the tutorial “How to Skin an Exponential Now Site” for step-by-step instructions on how to modify the visual design and layout of an Exponential site.

Basic Styles

The following CSS files are the basic ones used in the Exponential Website Interface design extension. They each serve a specific purpose for site design and layout. Site design can be modified by  changing these CSS files. However, most modifications can be done by creating a site style package. Modifying the basic styles should only be done by advanced users.

• core.css: Specifies general visual styles for many of the basic HTML elements. These include elements such as font styles and sizes, margins and paddings. In addition, core.css contains some  specific styles that Exponential Website Interface needs for default templates. This file is included in the pagelayout.tpl template.
• pagelayout.css: Specifies styles used in the pagelayout.tpl template (the main template). To make it easier to find specific elements, the order of the styles inthis CSS file attempts to match the order of elements in the HTML page. Forexample, the style for div#header is close to the top of file.
• content.css: Specifies the styles used by content templates, including thegeneral styles common to all content and the specific styles required by groups ofrelated content classes. For example, the Folder and Article content classes use thefollowing CSS:

/* Folder */

div.content-view-full div.class-folder

{

<span style="white-space: pre;"> </span>color: #000;

}

/* Article */

div.content-view-full div.class-article

{

<span style="white-space: pre;"> </span>color: #000;

}

• print.css: Specifies additional styles that override the other styles to make the page better suited for printing. This includes hiding menus and other areas of the layout that are unnecessary on paper, ensuring that the main content gets the proper focus and formatting.

A site style package contains the following supplementary CSS files:

• site-colors.css: This file overrides the styles in the default pagelayout.css (which applies to the paglayout.tpl template).
• classes-colors.css: This file overrides the styles used in content.css (which applies to the content classes).

The CSS files are fetched by the HTML in the order that they are listed above. This ensures that overrides occur in the proper order. For example, if an element is defined in pagelayout.css and then again in print.css, the print.css definition overrides the pagelayout.css definition. If an element is not defined in pagelayout.css and is defined in print.css, the print.css definition is used.

Styles specific to Internet Explorer

To compensate for Internet Explorer's bugs and rendering discrepancies, the Exponential Website Interface includes two stylesheets specific to Internet Explorer. The stylesheets are delivered to the browser by the use of IE's conditional comments. While this is a proprietary feature of IE, the syntax makes it look like a regular HTML comment to other browsers (and thus does not affect the validity of the page). (Be aware that some other forms of conditional comments, as described by Microsoft on their web site, may not validate correctly).

The following stylesheets are specific to Internet Explorer:

• ie5.css - styles for IE 5 only
• ie7lte.css - styles for IE 5, 6 and 7

Edit these files if you encounter a design inconsistency with Internet Explorer after changing the default site design.

JavaScript

The JavaScript used by Exponential Website Interface sites follows the general principle that the structural content on a page should be fully accessible whether or not JavaScriptis enabled in the user's browser, and that the visual presentation should have a non-JavaScript fallback that looks as good as possible.The following JavaScript is disabled by default, but can be enabled if needed.

• heightresize.js: This script automatically adjusts several columns to have the same height in a pure CSS-based layout, something that would otherwise be difficult to achieve in a simple and consistent way. If JavaScript is not available, the columns simply stay at their initial height.