11.2. Resources

Theme resources are CSS stylesheets, graphics, and other assets such as Java applets and Flash files, basically anything included in your web site's presentation. CSS stylesheets that are declared in the configuration (theme.ini) file are loaded after the standard Perforce Chronicle stylesheets, in the order declared in the configuration file, which enables you to override default styles.

When developing CSS specifiers for styles, use your browser's View source feature to display the markup and CSS classes being used. Many modern browsers also provide development tools that can display the CSS class hierarchy and how classes are being overridden.

11.2.1. Body Classes

Each full page of HTML that is generated by Chronicle has the following classes added to the body tag. These classes are defined using targeted CSS specifiers that enable you to override existing styles, as follows:

xxxx-layout: xxxx refers to the current layout, typically "default" (for example, default-layout).
mmmm-module: mmmm refers to the current module (for example, content-module).
cccc-controller: cccc refers to the current controller (for example, index-controller).
aaaa-action: aaaa refers to the current action (for example, view-action).

The Chronicle management interface is also displayed using CSS styling. It uses a specific class, p4cms-ui, to identify its styles.

	Important
	Do not override Chronicle styles unless you are attempting to adjust the Chronicle user interface itself. Styling errors can render Chronicle unusable.

11.2.2. Region Classes

Regions are areas on a web page where widgets can be added and removed. Each region is identified when you use the region view helper and provide the region with a name. For example:

<?= $this->region('rrrr') ?>

When the region view helper is used, it produces markup that allows the region to be editable. The surrounding markup is assigned a CSS identifier using the format region-rrrr, where rrrr refers to the region's name, as in the example above. You can use this identifier to manage the size of the region, and influence the style applied to any widgets the region may contain in the future. See the discussion in Section 11.5, “View Helpers” for more information.

11.2.3. Widget Classes

Widgets provide dynamic presentation inside regions. There are several layers of markup that make up a widget. The outermost markup has two CSS classes: widget-container and widget-n, where n is the index of the widget within its region. For example, the first widget in a region has the class widget-1.

The next layer of markup has two CSS classes: widget, and widget-wwww, where wwww refers to the widget's type. The widget's type is usually composed of the name of the module providing the widget, and the name of the widget itself. For example, the image widget includes the CSS classes widget and widget-widget-image.

Widgets can also have a user-supplied class name, to help distinguish a specific widget for styling purposes. Simply enter the desired CSS class name in the widget's configuration panel.

11.2.4. Menu/Navigation Classes

Menus created with the use of the navigation view helpers receive the navigation class included by default. For more details, see the Zend Framework documentation; scroll down to the section entitled 'Navigation Helpers'.

11.2.5. View the Source

One of the challenges of producing a theme is understanding the markup and CSS classes so that the presentation can be controlled in a way amenable to your design. When in doubt, view the source of pages produced by Chronicle to identify the markup and CSS classes being used. Browser tools, such as Firebug and Chrome/Safari's built-in development tools can assist greatly by showing which CSS classes have been applied to selected markup.

	Internet Explorer CSS Limitations
Internet Explorer (IE) has a limitation of directly loading up to 31 CSS stylesheets. As Chronicle has many optional modules and themes, each with their own styles, it is very easy to reach or exceed this limitation. When this occurs, any additional stylesheets are not loaded and the styling of your site will be incorrect. Please see Eric Law's IEInternals blog posting for more details. To mitigate this limitation, Chronicle will automatically aggregate or consolidate stylesheets for production or development modes respectively. In production mode, all stylesheets are aggregated into a single stylesheet to minimize the web requests and improve cache behaviour. In development mode, stylesheets are consolidated into style blocks that use the @import CSS rule when the site is accessed via Internet Explorer. Microsoft allows up to 31 such style blocks that can each include up to 31 @import rules.

Internet Explorer CSS Limitations

Internet Explorer (IE) has a limitation of directly loading up to 31 CSS stylesheets. As Chronicle has many optional modules and themes, each with their own styles, it is very easy to reach or exceed this limitation. When this occurs, any additional stylesheets are not loaded and the styling of your site will be incorrect. Please see Eric Law's IEInternals blog posting for more details.

To mitigate this limitation, Chronicle will automatically aggregate or consolidate stylesheets for production or development modes respectively. In production mode, all stylesheets are aggregated into a single stylesheet to minimize the web requests and improve cache behaviour. In development mode, stylesheets are consolidated into style blocks that use the @import CSS rule when the site is accessed via Internet Explorer. Microsoft allows up to 31 such style blocks that can each include up to 31 @import rules.