<< All Blog Posts

The Future of [Plone] Theming (PSM14 Recap)

Chrissy Wainwright
By Chrissy Wainwright
July 2, 2014
Share

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

The Future of [Plone] Theming from cdw9

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!)
    • https://plone5.veit-schiele.de (demo site)
    • http://plone.org/try-five (download)

How can you future-proof a Plone theme?

  • Make it a Diazo theme
  • Use Plone Default as the base theme
  • Reduce the 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:

<browser:page 
    for="*" 
    name="homepage" 
    class=".homepageview.HomePageView" 
    template="homepageview.pt" 
    permission="zope2.View" 
    />

This template is accessible at yoursite.com/@@homepage, 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
  • http://caniuse.com/

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
  • http://jpegmini.com
  • https://tinypng.com

Learn More:

Thanks for filling out the form! A Six Feet Up representative will be in contact with you soon.

Connect with us