<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE section
[
<!ENTITY % xinclude SYSTEM "../../en/xinclude.mod">
%xinclude;
<!-- Add translated specific definitions and snippets -->
<!ENTITY % language-snippets SYSTEM "../standalone/language-snippets.xml">
%language-snippets;
<!-- Fallback to English definitions and snippets (in case of missing translation) -->
<!ENTITY % language-snippets.default SYSTEM "../../en/standalone/language-snippets.xml">
%language-snippets.default;
]>
<section id="themes.resources">
<title>Resources</title>
<para>
Theme <emphasis>resources</emphasis> are <acronym>CSS</acronym> stylesheets, graphics, and
other assets such as Java applets and Flash files, basically anything included in your web
site's presentation. <acronym>CSS</acronym> stylesheets that are declared in the
configuration (<filename>theme.ini</filename>) file are loaded after the standard
&product.longname; stylesheets, in the order declared in the configuration file, which
enables you to override default styles.
</para>
<para>
When developing <acronym>CSS</acronym> specifiers for styles, use your browser's
<command>View source</command> feature to display the markup and <acronym>CSS</acronym>
classes being used. Many modern browsers also provide development tools that can display the
<acronym>CSS</acronym> class hierarchy and how classes are being overridden.
</para>
<section id="theme.resources.body-classes">
<title>Body Classes</title>
<para>
Each full page of <acronym>HTML</acronym> that is generated by &product.name; has the
following classes added to the <code>body</code> tag. These classes are defined using
targeted <acronym>CSS</acronym> specifiers that enable you to override existing styles,
as follows:
</para>
<itemizedlist>
<listitem>
<emphasis role="css"><replaceable>xxxx</replaceable>-layout</emphasis>:
<replaceable>xxxx</replaceable> refers to the current layout, typically "default"
(for example, <emphasis role="css">default-layout</emphasis>).
</listitem>
<listitem>
<emphasis role="css"><replaceable>mmmm</replaceable>-module</emphasis>:
<replaceable>mmmm</replaceable> refers to the current module (for example,
<emphasis role="css">content-module</emphasis>).
</listitem>
<listitem>
<emphasis role="css"><replaceable>cccc</replaceable>-controller</emphasis>:
<replaceable>cccc</replaceable> refers to the current controller (for example,
<emphasis role="css">index-controller</emphasis>).
</listitem>
<listitem>
<emphasis role="css"><replaceable>aaaa</replaceable>-action</emphasis>:
<replaceable>aaaa</replaceable> refers to the current action (for example,
<emphasis role="css">view-action</emphasis>).
</listitem>
</itemizedlist>
<para>
The &product.name; management interface is also displayed using <acronym>CSS</acronym>
styling. It uses a specific class, <emphasis role="css">p4cms-ui</emphasis>, to
identify its styles.
</para>
<warning>
<title>Important</title>
Do not override &product.name; styles unless you are attempting to adjust the
&product.name; user interface itself. Styling errors can render &product.name;
unusable.
</warning>
</section>
<section id="theme.resources.region-classes">
<title>Region Classes</title>
<para>
Regions are areas on a web page where widgets can be added and removed. Each region is
identified when you use the <classname>region</classname> view helper and provide the
region with a name. For example:
</para>
<programlisting language="text">
<?= $this->region('<emphasis>rrrr</emphasis>') ?>
</programlisting>
<para>
When the <classname>region</classname> view helper is used, it produces markup that
allows the region to be editable. The surrounding markup is assigned a
<acronym>CSS</acronym> identifier using the format
<emphasis role="css">region-<replaceable>rrrr</replaceable></emphasis>, where
<replaceable>rrrr</replaceable> 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
<xref linkend="themes.view.helpers"/> for more information.
</para>
</section>
<section id="theme.resources.widget-classes">
<title>Widget Classes</title>
<para>
Widgets provide dynamic presentation inside regions. There are several layers of markup
that make up a widget.
The outermost markup has two <acronym>CSS</acronym> classes:
<emphasis role="css">widget-container</emphasis> and
<emphasis role="css">widget-<replaceable>n</replaceable></emphasis>, where
<replaceable>n</replaceable> is the index of the widget within its region. For example,
the first widget in a region has the class <emphasis role="css">widget-1</emphasis>.
</para>
<para>
The next layer of markup has two <acronym>CSS</acronym> classes:
<emphasis role="css">widget</emphasis>, and
<emphasis role="css">widget-<replaceable>wwww</replaceable></emphasis>, where
<replaceable>wwww</replaceable> 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 <acronym>CSS</acronym>
classes <emphasis role="css">widget</emphasis> and
<emphasis role="css">widget-widget-image</emphasis>.
</para>
<para>
Widgets can also have a user-supplied class name, to help distinguish a specific widget
for styling purposes. Simply enter the desired <acronym>CSS</acronym> class name in the
widget's configuration panel.
</para>
</section>
<section id="theme.resources.menu-classes">
<title>Menu/Navigation Classes</title>
<para>
Menus created with the use of the navigation view helpers receive the
<emphasis role="css">navigation</emphasis> class included by default. For more details,
see the <ulink url="http://framework.zend.com/manual/1.11/en/zend.view.helpers.html">Zend
Framework documentation</ulink>; scroll down to the section entitled 'Navigation
Helpers'.
</para>
</section>
<section id="theme.resources.view-source">
<title>View the Source</title>
<para>
One of the challenges of producing a theme is understanding the markup and
<acronym>CSS</acronym> 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
&product.name; to identify the markup and <acronym>CSS</acronym> classes being used.
Browser tools, such as <application>Firebug</application> and
<application>Chrome</application>/<application>Safari</application>'s built-in
development tools can assist greatly by showing which <acronym>CSS</acronym> classes
have been applied to selected markup.
</para>
</section>
<xi:include href="../standalone/ie-css-limitations.xml" role="module">
<xi:fallback>
<xi:include href="../../en/standalone/ie-css-limitations.xml" />
</xi:fallback>
</xi:include>
</section>
<!--
vim:se ts=4 sw=4 et:
-->