Personal tools

Contact Us 24/7 > 1 866.SIX FEET

Skip to content. | Skip to navigation

Home > Blog > The Future of [Plone] Theming (PSM14 Recap)

EVERYONE.NET SCHEDULED MAINTENANCE will be performing maintenance on their databases Friday, January 13th, 2016 between 9:00PM PT to 3:00AM PT / 12:00AM ET to 06:00AM ET. During this time, all services including web mail, POP, IMAP, and SMTP relay may experience degraded performance and inbound mail delivery delays. We apologize for any inconvenience.


The Future of [Plone] Theming (PSM14 Recap)

written by Chrissy Wainwright on Thursday July 3, 2014

This is a recap of Chrissy Wainwright's talk at PSM 2014

What's new in Plone 5?

  • Diazo is the default theming story
  • portal_skins becomes deprecated
  • There is a new default Plone theme
  • Uses Chameleon for templates
  • Lots of other things (go check it out!)
    • (demo site)
    • (download)

How can you future-proof a Plone theme?

  • Make it a Diazo theme
  • Use Plone Default as the base theme
  • Reduce number of template overrides
  • Turn custom skins templates into view templates

Make a Diazo Theme

  • Diazo is a method of mapping dynamic content to a static theme
  • zopeskel.diazotheme for boilerplate
  • A Diazo theme is basically a resource directory

Use Plone Default as Your Base

  • Don't use Sunburst (Plone 4 Theme)
  • Navbar will still be styled
  • Also note that the main_template now uses HTML5 elements

Reduce Number of Template Overrides

  • Includes skins and z3c.jbot
  • Do as much as possible with Diazo
  • Some templates will be relocated in Plone 5 Upgrading
  • Plone is easier when you don't have to manage the template overrides
  • When you do override a template, add a note of what version it came from

Create View Templates

In configure.zcml:


This template is accessible at, so with Diazo:

<replace css:theme="#content" css:content="#home" href="/@@homepage"/>

What changes are happening with the Internet?

  • Supported Technologies
  • Browser Usage
  • Responsive Themes

Supported Technologies

  • HTML5
  • CSS3
  • SVG images

Browser Usage

  • Focus on Chrome, FF, IE11, Safari iPad, IE8-10
  • Look at your site's analytics IE6 is "dead"!

Responsive Themes

  • Fairly easy to implement
  • Don't need a separate site or an app for mobile
  • Use the viewport <meta> tag
  • Uses CSS media queries, tiny bit of JS for navigation toggle

CSS/JS Optimization

  • Put all CSS and JS files in the resource registries
  • Order files in CSS and JS registries to make as few requests as possible

Image Optimization

  • Use image sprites
  • Use CSS instead of images where possible

Learn More:

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