plone.app.theming-1.1.1-2.lbn13.noarch

Introduction

In Plone versions 4.3 and higher you can edit your website theme through web browser in Plone's site setup control panel. Only HTML, CSS and little XML knowledge needed as the prerequisitements. This guide explains how to use this feature of Plone.

See introduction video to plone.app.theming. What is a Diazo theme?

A "theme" makes a website (in this case, one powered by Plone) take on a particular look and feel.

Diazo (formerly known as XDV) is a technology that can be used to theme websites. It is not specific to Plone per se, but has been created by the Plone community and, as of Plone 4.3, provides the default way to apply a theme to a Plone site. You can learn more about Diazo at http://diazo.org.

Diazo themes may be a little different to themes you have created in other systems, and indeed to themes you may have created for earlier versions of Plone. A Diazo theme is really about transforming some content - in this case the output from "vanilla" Plone - into a different set of HTML markup by applying a set of rules to combine a static HTML mock-up of the end result you want with the dynamic content coming from Plone.

In comparison, the previous way to theme a Plone site (like the way many other content management systems are themed) relies on selectively overriding the templates and scripts that Plone uses to build a page with custom versions that produce different HTML markup. The latter approach can be more powerful, certainly, but also requires much deeper knowledge of Plone's internals and command of server-side technologies such as Zope Page Templates and even Python. Diazo themes, by contrast, are easy to understand for web designers and non- developers alike.

A Diazo theme consists of three elements:

One or more HTML mockups, also referred to as theme files, that represent the desired look and feel.

These will contain placeholders for content that is to be provided by the Plone content management system. Mockups usually reference CSS, JavaScript and image files by relative path. The most common way to create a theme is to use desktop software like Dreamweaver or a text editor to create the relevant markup, styles and scripts, and test the theme locally in a web browser.

The content that is being themed. In this case, that is the output from Plone.

A rules file, which defines how the placeholders in the theme (i.e. the HTML mockup) should be replaced by relevant markup in the content.

The rules file uses XML syntax (similar to HTML). Here is a very simple example:

`

Here, we are replacing the contents (child nodes) of a placeholder element with HTML id main in the theme file (theme.html, found in the same directory as the rules.xml file, as referenced by the rule) with the contents (children) of the element with the HTML id content in the markup generated by Plone.

When this theme is applied, the result will look very much like the static HTML file theme.html (and its referenced CSS, JavaScript and image files), except the placeholder that is identified by the node in the theme with id main will be filled by Plone's main content area.

Plone ships with an example theme called, appropriately, Example theme, which uses the venerable Twitter Bootstrap to build a simple yet functional theme exposing most of Plone's core functionality. You are advised to study it - in particular the rules.xml file - to learn more about how Diazo themes work. Using the control panel

After installation of the Diazo theme support package in a Plone site, the Theming control panel will appear in Plone's Site setup.

The main tab of this control panel, Themes, will show all available themes, with buttons to activate/deactivate, modify, copy or delete each, as well as buttons to create new themes or bring up this help text.

Click on a theme preview image to open a preview of that theme in a new tab or window. The preview is navigable, but form submissions and some advanced features will not work. Selecting a theme

To apply an existing theme, simply click the Activate button underneath the theme preview. The currently active theme will be highlighted in yellow. If you deactivate the currently active theme, no Diazo theme will be applied, i.e. "vanilla" Plone theming will apply.

Note: The Theming control panel is never theemd, ensuring that you can always deactivate an errant theme that could render the control panel unusable. Thus, you may not see any difference immediately after enabling a theme. Simply navigate to another page in the Plone site, though, and you should see the theme applied. Creating a new theme

New themes can be created in one of two ways:

Click the New theme button at the top of the Themes tab in the Theming control panel and enter a title and description in the form that appears. A bare-bones theme will be created, and you will be taken to the Modify theme screen (see below), where you can edit or create theme and rules files. Click the Copy button underneath any existing theme and enter a title and description in the form that appears. A new theme will be created as a copy of the existing theme, and you will be taken to the Modify theme (see below), where you can edit or create theme and rules files.

Uploading an existing theme

Themes can be distributed as Zip files, containing the HTML mockup and rules file. To download an existing theme, click the Download button underneath the theme on the Themes tab of the Theming control panel.

To upload such a Zip file into another site, use the Upload Zip file button on the Themes tab of the Theming control panel. You can choose whether or not to replace any existing theme with the same name (based on the name of the top-level directory contained within the Zip file).

You can also upload a Zip file of a static HTML mockup that does not contain a rules file, such as a design provided by a Plone-agnostic web designer.

In this case, a basic rules.xml file will be added for you to start building up a theme from using the Modify theme screen (see below). The generated rules file will assume the main HTML mockup file is called index.html, but you can change this in rules.xml.

Once you have successfully uploaded a theme Zip file, you will be taken to the Modify theme screen (see below), where you can edit or create theme files.

Hint: If you get an error message like "The uploaded file does not contain a valid theme archive", this usually means that you have uploaded a Zip file that contains multiple files and folders, rather than a single top level folder with all the theme resources in it. This could happen if you compressed a theme or HTML mockup by adding its files and folders directly a Zip archive, rather than compressing the directory in which they were found. To fix this, simply unzip the archive on your computer into a new directory, move up a level, and compress this directory on its own into a new Zip file, which you can then upload. Modifying the theme

You can modify a theme by clicking Modify theme underneath a theme in the Themes tab of the Theming control panel. This screen is also launched automatically when you create or upload a new theme.

Note: Only themes created or uploaded through the Theming control panel can be modified through Plone. Themes installed by third-party add-ons or distributed on the filesystem cannot, although changes made on the filesystem will be reflected immediately if Zope is running in debug mode. To modify a filesystem theme, you can copy it to a new in-Plone theme by clicking the Copy button underneath the theme in the Theming control panel.

The Modify theme screen initially shows a file manager, with a file tree on the left and an editor on the right. Click on a file in the file tree to open an editor or preview: HTML, CSS, JavaScript and other text files can be edited directly through the editor. Other files (e.g. images) will be rendered as a preview.

Note: The advanced editor with syntax highlighting is not available in Microsoft Internet Explorer.

Click New folder to create a new folder. You can also right-click on a folder in the file tree to bring up this action.

Click New file to create a new text file. You can also right-click on a folder in the file tree to bring up this action.

Click Upload file to upload a file from your computer. You can also right- click on a folder in the file tree to bring up this action.

Click Preview theme to preview the theme as it will be applied with the mockup and rules as currently saved. The preview is navigable, but forms and certain advanced features will not work.

To save the file currently being edited, click the Save file button, or use the keyboard shortcut Ctrl+S (Windows/Linux) or Cmd+S (Mac).

To rename or delete a file or folder, right-click on it in the file tree and select the appropriate action. The theme inspector

The theme inspector provides an advanced interface for discovering and building up the rules of a Diazo theme. It can be launched by clicking the Show inspectors button on the Modify theme screen for in-Plone themes, or by clicking the Inspect theme button underneath a filesystem theme on the Themes tab of the Theming control panel.

The theme inspector consists of two panels:

The HTML mockup. If there are several HTML files in the theme, you can switch between them using the drop-down list underneath the HTML mockup panel. The Unthemed content. This shows Plone without any theme applied.

Either panel can be maximised by clicking the arrows icon at the top right of either.

The HTML mockups and Unthemed content panels can be switch to source view, showing their underlying HTML markup, by clicking the tags icon at the top right of either.

As you hover over elements in the HTML mockup or Unthemed content panels, you will see:

An outline showing the element under the cursor. A CSS or XPath selector in the status bar at the bottom if the panel which would uniquely identify this element in a Diazo rule.

Click on an element or press Enter whilst hovering oveer an element to select it. The most recently selected element in each panel is shown in the bottom right of the relevant status bar.

Press Esc whilst hovering over an element to select its parent. This is useful when trying to select "invisible" container elements. Press Enter to save this selection.

The contents of the HTML mockup or (more commonly) Unthemed content panels can be navigated, for example to get to a content page that requires specific theme rules, by disabling the inspector. Use the toggle switches at the bottom right of the relevant panel to enable or disable the selector. The rule builder

Click the Build rule button near the top of the Modify theme or Inspect theme screen to launch an interactive rule building wizard. You will be asked which type of rule to build, and then prompted to select the relevant elements in the HTML mockup and/or Unthemed content panels as required. By default, this will use any saved selections, unless you untick the Use selected elements box on the first page if the wizard.

Once the wizard completes, you will be shown the generated rule. You can edit this if you wish. If you click Insert, the newly generated rule will be inserted into the rules.xml editor at or near your current cursor position. You can move it around or edit it further as you wish.

Click Preview theme to preview the theme in a new tab or window. Don't forget to save the rules.xml file if you have made changes.

Note: In readonly mode, you can build rules and inspect the HTML mockup and theme, but not change the rules.xml file. In this case, the Insert button of the rule builder (see below) will not be available either.

Note: The ability to insert rules from the Build rule wizard are not available in Microsoft Internet Explorer, although you will be given the option to copy the rule to the clipboard when using this browser. Advanced settings

The Theming control panel also contains a tab named Advanced settings. Here be dragons.

The Advanced setings tab is divided into two areas. The first, Theme details, contains the underlying settings that are modified when a theme is applied from the Themes control panel. These are:

Whether or not Diazo themes are enabled at all. The path to the rules file, conventionally called rules.xml, either relative to the Plone site root or as an absolute path to an external server. The prefix to apply when turning relative paths in themes (e.g. references to images in an tag's src attribute) into absolute ones at rendering time. The HTML DOCTYPE to apply to the rendered output, if different to the default XHTML 1.0 Transitional. Whether or not to allow theme resources (likes rules.xml) to be read from the network. Disabling this gives a modest performance boost. A list of host names for which a theme is never applied. Most commonly, this contains 127.0.0.1, allowing you to view an unthemed site through http://127.0.0.1:8080 and a themed one at http://localhost:8080 during development, say. A list of theme parameters and the TALES expressions to generate them (see below).

The second, Theme base, controls the presentation of the unthemed content, and apply even if no Diazo theme is being applied. These are the settings that used to be found in the Themes control panel in previous versions of Plone.