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
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.
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,
xxxxrefers to the current layout, typically "default" (for example, default-layout).
mmmmrefers to the current module (for example, content-module).
ccccrefers to the current controller (for example, index-controller).
aaaarefers 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.
|Do not override Chronicle styles unless you are attempting to adjust the Chronicle user interface itself. Styling errors can render Chronicle unusable.|
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') ?>
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
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.
Widgets provide dynamic presentation inside regions. There are several layers of markup
that make up a widget.
The outermost markup has two CSS classes:
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:
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
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.
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'.
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.