Common Diazo Rules for Plone

Here is a list of useful rules for your Diazo theming needs.

Common Plone Specific Diazo Rules

Adding the main plone content to a specific container

<prepend css:theme="#container" css:content="#portal-columns"/>

Ensure that the body tag inherits Plone classes

<!-- BODY THEME (inject body classes from Plone into the theme) -->
     <copy attributes="*" css:theme="body" css:content="body" />

Replace the theme title and base tags in the head (including styles from the Plone site)

    <!-- Base tag -->
    <replace theme="/html/head/base" content="/html/head/base" />
    <!-- HEAD: title -->
    <replace theme="/html/head/title" content="/html/head/title" />
   <before theme="/html/head" content="/html/head" />

To prevent the theme from affecting the Zope Management Interface (ZMI) and most popups you can use the following 'rules' filter to only enable the theme when there is a visual portal wrapper present in the markup:

<rules css:if-content="#visual-portal-wrapper">
        <theme href="index.html" />
</rules>

Add Login and Personal Tools

<!-- ADD LOGIN/Personal Tools  -->
    <prepend content='//*[@id="portal-personaltools"]' theme='//*[@id="header"]' />

Ensure that tinymce popups remain unstyled

 <notheme if-path="presentation_view"/>
    <notheme if-path="source_editor.htm"/>
    <notheme if-path="ploneimage.htm"/>
    <notheme if-path="anchor.htm"/>
    <notheme if-path="table.htm"/>
    <notheme if-path="attributes.htm"/>

Edit Bar provides the green content bar. Prevent unwanted styling to the edit bar by adding the #edit-bar before the content of your theme. If the main content area is #contentBlock then something like this:

<before css:content="#edit-bar" css:theme="#contentBlock"/>

 Use method="raw" to force a rule to work even after the selector has been dropped by another rule. In the example below the viewlet has been dropped from the content but it is still added back to the theme using a replace with the method="raw".

<drop css:content="#viewlet-above-content"/>

<replace method="raw" css:theme="#top-viewlet-holder" css:content="#viewlet-above-content"/>

 Append the <script> tag at the bottom of your theme (this example appends the scripts to a div with id 'footer', this is important to ensure that analytics or other javascript based includes show up in the theme.

<append content='//*[@id="visual-portal-wrapper"]/script' theme='//*[@id="footer"]'/>

 Using XSL with Diazo

If you need more logic try setting and using variables (requires use of XSL)

 <xsl:variable name="carousel" css:select="body .carouselWrapper"/>
   <rules if-content="not($carousel)">
      <drop css:theme="#header" />
   </rules>

Here's an example of dynamically inserting a new class based on the existence of another class called 'carousel', the space before the word 'carousel' is needed.

<prepend theme="/html/body" css:if-content="body.section-home">
                <xsl:attribute name="class"><xsl:value-of select="/html/body/@class"/> carousel</xsl:attribute>
</prepend>