Personal tools

Contact Us 24/7 > 1 866.SIX FEET

Skip to content. | Skip to navigation

Home > Blog > Updating a Traditional Plone Theme to Diazo for Plone 5


Updating a Traditional Plone Theme to Diazo for Plone 5

written by Chrissy Wainwright on Thursday June 19, 2014

If you have a traditional-style Plone theme that will continue to be in use for Plone 5 and beyond, I recommend updating it to use Diazo. This involves a few steps:

  • Add a folder for your static content
  • Move all custom CSS, JS, and images into the static folder
  • Use Plone Default as the base theme
  • Write an index.html and rules.xml
  • Remove all skins overrides
  • Reduce number of z3c.jbot overrides
  • Move custom skins templates into view templates

One nice thing about these steps is that they don't all need to be done at the same time. They can be done gradually in pieces if you are short on time.

Add a folder for your static content

This folder is basically a browser resource, which converts into a theme.

name="mytheme" />

Include a manifest.cfg in the directory for information about the theme that will display in the Theming control panel.

Move all custom CSS, JS, and images into the static folder

Move any CSS, JS, and images from your skins folders into the new static folder. They can be put into subdirectories to keep the file structure clean. The CSS and JS files can (and should) remain in the resource registries, the entries will need to be updated to include the new path, for example: ++theme++mytheme/main.css. If doing this from cssregistry.xml, remove the entries with the old path using remove=“true”. Paths to images from the CSS will need to be updated as well, and these can use relative paths as long as the applyPrefix is set to True in the CSS registry.

Use Plone Default as the base theme

Chances are, your theme is currently based on Sunburst. This should continue to work in Plone 5 initially, but eventually portal_skins will be removed completely (currently it is deprecated). In switching to Plone Default as the base, you can copy all styles from Sunburst and add them to your static folder. Entries in the CSS Registry will need to be updated by removing the files you copied, and re-adding them with the static path.

Write an index.html and rules.xml

These files will live directly inside the static folder. If you want to keep your theme looking the same, you can go to your site, View Source, copy all the code and put it in your index.html. Strip out any extra bits you don’t need. Then write your rules to map the dynamic content from Plone to this static html.

Remove all skins overrides, and reduce number of z3c.jbot overrides

portal_skins is being deprecated, and many of the skins templates are being moved into views, which means your customizations will no longer work in Plone 5. Now that you have a Diazo theme in place, see if your customizations can instead be done with a Diazo rule, so that you can remove the override completely. If you need to keep the override, use z3c.jbot instead of skins. When you upgrade to Plone 5, you will likely just need to change the name of the override to point to the original file’s new location. Try to do as much as you can with Diazo, to keep the number of overrides at a minimum. This will make upgrading easier.

Move custom skins templates into view templates

Let’s say you have a custom template for your homepage in skins. Move that template to the browser folder in your theme, and put this in the configure.zcml:

permission="zope2.View" />

The template will now be accessible in the site at /@@homepage (path is based on the name you set). You will need to remove or update any code that assigns the template to the page. You can just specify the template as the href in a Diazo rule:



There will still need to be adjustments once you upgrade to Plone 5. The steps in this outline are just my recommendations from my theming experience and investigation into Plone 5. I would love to get some opinions and suggestions from developers that have been actively working on Plone 5.

Posted by zmijunkie on Dec 25, 2014 04:16 AM
Pagetemplates consist of HTML+some TAL, TALES and Metal. Can be used by Designer and Programmer -what you see tranforms to HTML in a single step. Diazo User need to know the Sunburst Templates, Diazo Rules and XSLT (four Rules are not enough), the resulting theme, TAL, TALES and Metal. Designer styling with CSS now look at both or even more templates. Common result: Fromtend Editing is broken and another technologie is put on the stack. Also Diazo is delivered with a broken twitter bootstrap example where editing is maybe possible. Welcome Plone5 - index.html is our new maintemplate and we keep sunburst Templates until the end of time. Regards, Sascha
Posted by Bob on May 06, 2016 12:54 PM
Thank you for this. I can't believe i finally found something that answers my "Customer Customer homepage page template" challenge. If your team is ever near Philly, first beer's on me.
Add comment

You can add a comment by filling out the form below. Plain text formatting.


Next Steps

Select a type of support:

Contact our sales team

First name:
Last name:
Phone Number:
Fight spam:
What is + ?
Call Us 1 866.SIX FEET