Most of the elements can be classified meaning that you can assign some value to the "class" attribute of their XML tags. This allows you to tweak the appearance and/or behavior of the different elements. Elements of the same type can be classified in different ways. For example, if you want some of your paragraphs to look different from others, you can define custom stylesheets and use the "class" parameter as a style selector (to determine which CSS class that should be used).

The "class" parameter can be set for the following elements:

• Headings
• Bold text
• Italic text
• Numbered lists
• Bullet lists
• Embedded objects
• Hyperlinks
• Literals
• Tables
• Table headers
• Table cells
• Paragraphs

To set the "class" parameter for a particular element, you'll have to access the element's properties. Choose the necessary class from the drop-down list and click the "OK" button. If there are no available classes specified for the selected item then the drop-down list will be empty.

Available classes

Use the "AvailableClasses[]" array from within an override for the "content.ini" configuration file to specify the available classes for the different tags.

For example, the following lines will allow the "html" class to be selected for literal text.

[literal]
AvailableClasses[]=html

The following lines define "pRed", "pBlue" and "apple" classes for paragraphs.

[paragraph]
AvailableClasses[]=pRed
AvailableClasses[]=pBlue
AvailableClasses[]=apple

Using alternate/custom templates

The default templates in the directory "design/standard/templates/content/datatype/view/ezxmltags/" determine how the content of XML tags should be rendered.

Example

When the XML code is rendered, the system will replace the XML code

<emphasize>Emphasized text.</emphasize>

by the following XHTML code:

<i>Emphasized text.</i>

so that it will be displayed on the site as follows:

Emphasized text.

This behavior is dictated by the following instruction:

<i{section show=ne($classification|trim,'')} class="{$classification|wash}"{/section}>{$content}</i>

that is specified in the default template "emphasize.tpl" located in the "design/standard/templates/content/datatype/view/ezxmltags/" directory.

The templates are written using the eZ Publish template language. In the template, the tag contents is available in the "$content" variable.

All the XML tags can be fully customized by changing the templates.

If you need to specify custom rendering for your tags, you can use custom templates in your design directory. For example, you can create a template called "paragraph.tpl" inside the "templates/content/datatype/view/ezxmltags/" subdirectory of your design. The system will then use this template whenever it is about to render the contents of a paragraph. The value of the "class" parameter will be available in the $classification variable.

It is also possible to use the template override system. This approach allows you to trigger custom templates based on a set of conditions. For example, if some of your paragraphs are classified as "apple", you can create a new template called "apple_paragraph.tpl" in the "override/templates/" directory of your design. In order to trigger the new template, you'll have to make sure that the "override.ini.append.php" file that belongs to the siteaccess contains the following lines:

[apple_paragraph]
Source=content/datatype/view/ezxmltags/paragraph.tpl
MatchFile=apple_paragraph.tpl
Subdir=templates
Match[classification]=apple

After the caches are cleared, all paragraphs classified as "apple" will be rendered using your custom template. Other paragraphs using none or alternative classes will be rendered using the default paragraph template.

Appearance of classified elements on the site

It is possible to control how the different elements should look like on the site pages. In other words, it is possible to tweak the final look/output that will be seen when the site is being browsed by visitors. The following text explains how this can be done.

1. Create a custom CSS file, for example "abc.css" inside the "stylesheets" directory of your design.
2. Add some CSS code. The following example will set a blue background and center the text for the paragraphs of "apple" class:
   

   p.apple
   {
      background-color: blue;
      text-align: center;
   }
   

   In this example, CSS settings are specified for XHTML tag "p", not for XML tag "paragraph". Please note that it is impossible to specify CSS settings directly for original XML tags. To learn which XHTML tag that corresponds to a particular element please refer to the section that describes it (this is usually defined by templates).
3. Specify the custom CSS file using the "CSSFileList[]" array within an override for the "design.ini" configuration file:
   

   CSSFileList[]=abc.css
   

The main template "pagelayout.tpl" will now use the custom CSS file "abc.css".

Please note that you can also specify the custom CSS file by including it directly in the pagelayout. To do this, add the following code after the already existing stylesheet-related lines in the head section:

<link rel="stylesheet" type="text/css" href={'stylesheets/abc.css'|ezdesign} />

Appearance of classified elements inside OE

It is possible to control how the different elements should look like inside the Online Editor.
To set the different styles edit the "editor_classes.css" file located in the "extension/ezdhtml/design/standard/stylesheets/ezdhtml/" directory. Please note that the CSS files will only control the appearance in the OE but will not affect the actual site itself.

The files "editor_classes.css" and "editor.css" are determined by the "EditorCSSFileList[]" array in the "[StylesheetSettings]" section of the configuration file "extension/ezdhtml/settings/design.ini.append".

In the beginning of the "editor_classes.css" file the CSS rules for visualization of eZXML elements are listed. We strongly recommend that you follow these instructions. Please note that no templates are used to define the XML tags appearance and/or behavior inside OE.

The following example shows how you can set a red background and center the text for "pRed" classified paragraphs.

p.pRed
{
   background-color: red;
   text-align: center;
}

The following screenshot shows the appearance of the "pRed" classified paragraph and another (non-classified one) in the OE text area.

The appearance of the "pRed" classified paragraph in the OE text area.