Personal tools
Contact Us 24/7 > 1 866.SIX FEET
Sections

Skip to content. | Skip to navigation

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

Blog

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!)
    • 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 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:

 
Add comment

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

puzzle

Next Steps


Select a type of support:

Contact our sales team

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