collective.examples.diazo 0.2

Multiple themes

We want to use a different theme for the “News” section. This is done using the <theme> directive.

We did this by setting a selector for the body element’s content class:

<theme href="theme.html" />
<theme
    href="theme-news.html"
    css:if-content="body.section-news"
    />

Note that we have to set the fallback theme. Failing to do so will result in an unthemed page.

To use a specific theme for a content type, you can use another selector for the body element’s class, ie:

<theme href="theme.html" />
<theme
    href="theme-news.html"
    css:if-content="body.portaltype-folder"
    />

You could also theme for a specific template in this way.

This only works on xdv >= 0.4b3, which the current KGS does not include. To force the right version of xdv, add this to your buildout:

[versions]
xdv = 0.4b3

Including extra rules files

To include an extra rules file, use the XInclude statement. You could use this statement to slit up a large rules file into separate files.

For example, this rule in rules.xml calls another rules file rules-standard.xml:

<!-- Stuff that happens on all pages -->
<xi:include href="rules-standard.xml" />

This one executes the rules-document.xml, but only for Plone Document objects:

<!-- Stuff that happens on Plone's Documents (standard pages) only -->
<rules css:if-content="body.portaltype-document">
    <xi:include href="rules-document.xml" />
</rules>

Installation

You have obviously already installed the collective.examples.xdv product that contains the orange_sunset theme and its directory containing static HTML, image, and CSS files.

Once you have installed the collective.examples.xdv product in your Plone site via the Site Setup -> Add Ons area (click checkbox next to this product and then click the ‘Activate’ button.)

Once you have activated the product, click on the new ‘XDV theme’ configlet link under the Add-on Configuration section of Site Setup.

In the ‘Theme template’ field enter: python://collective.examples.diazo/static/orange_sunset/index.html

In the ‘Rules file’ field enter: python://collective.examples.diazo/static/orange_sunset/rules.xml

In the ‘Absolute URL Prefix’ field enter:

/++resource++collective.examples.diazo/orange_sunset

You can modify the ‘Domains’ box to use the IP and/or port that will work for reaching your Plone site. It typically defaults to port :8080 on localhost, but if your Zope is running on port 6000, change it to that.

Be sure to have the ‘Enabled’ checkbox at the top checked in order to have this theme applied to your site.

Note: Do not try to enter ‘127.0.0.1:your-port’ as one of the themed domains in your configuration, as the 127.0.0.1 address has been reserved, so that you always have a way to get back to viewing the unthemed-through-Diazo Plone website (in case you break your theme so badly when modifying your rules file that it renders the site unviewable.)

Extending

You can modify the rules.xml file in this distribution to adjust the existing theme mapping rules, create your own, or whatever.

To create your own theme, you might copy/paste the orange_sunset directory in this product’s /static directory, rename the new directory to a unique name for your new theme, and then copy in whatever static html/css/images you’d like to use under that directory, as well as modify the rules.xml file in your new Diazo theme directory. We hope this jumpstarts your Diazo theme development!