Theming Plone

Intro

The current best-practice way to theme a Plone site is by using an engine called “Diazo”. This allows designers to design a theme in just plain, flat HTML, CSS (and JavaScript, if wanted) and then to hook that into the Plone backend to fill it with sophisticated content.

The easiest way to do this is to use “plone.app.theming”. But if you need to integrate Plone with other back-end servers, legacy systems, or any webservice, you can use Diazo to all combine it in a unified look & feel.

• Create a Plone 5 theme product (addon)
  • Introduction
  • Create a product to handle your Diazo theme
  • Override Plone BrowserViews with jbot

• Plone 5 Resource Registry
  • Introduction to Plone 5 resources
  • Resources
  • Bundles
  • Controlling Resource and Bundle Rendering
  • Aggregate Bundles for Production
  • Diazo Bundles
  • Migrating Older Add-ons
• Barceloneta theme
  • Structure
  • Changes from previous versions of Plone
  • Register LESS resources profile
  • Using the barceloneta theme only for the backend

An older (Plone 4.2) quick guide which may help to understand Diazo better:

• Quick Test Recipe
  • Ingredients
  • Procedure

Using Diazo is also possible as a standalone service. Normally the Diazo theme transformation is running inside the Plone process. But you can compile the Diazo rules to low level XSLT and let a webserver do the actual transformation, or run the Diazo transformations in a WSGI enabled service. If you want this advanced stand alone set up, please take a look at documentation on www.diazo.org, especially the Compilation and Deployment chapters.

General information on the stylesheets and other resources in Plone

• Front-end: templates, CSS and JavaScript
  • TAL page templates
  • CSS
  • Resource folders
  • Skin layers
  • DTML

Note

Up to version 4.1, Plone was using an older style of theming. Using that is not considered best practice anymore. See older versions of these docs if you need the information.