1. Aims and Prerequisites

The aim of this manual is to give you an overview of the theory, tools, and techniques involved in customizing Plone's look and feel or creating your own theme.

Aims

Don't read this manual from beginning to end. Think of it as a guide or phrase book to help you get your bearings in the rather complicated world of Plone themes.

We'll introduce you to the theory, but there's no substitute for practice; so we'll point you to the many excellent tutorials, books, and resources on this site and elsewhere, which will walk you through various aspects of themes for Plone 3. We aim to complement those resources by filling in gaps, providing brief overviews of theory, setting things in context, and giving you a quick reference for bits you find confusing or can't remember clearly from the last time you tried them out.

Prerequisites

This manual is written for integrators and customizers, and we're not assuming any development experience. We do however imagine that you are experienced with XHTML and CSS, know a little about XML, and have some knowledge of scripting languages. We're working from the premise that you are entirely new to Plone, though if you are familiar with Plone 2, you'll find one or two new things.

It will help if you have installed Plone and have looked briefly at the directories that ended up on your file system when you did this. It is also useful to have investigated the Site Setup link on your Plone website and to have clicked through to the Zope Management Interface for a brief look behind the scenes.

2. What's a Plone Theme?

A brief description of what we're talking about.

A theme is a collection of page templates, style sheets, components, and configuration settings that go to make up the individual look and feel of a Plone site.

Plone gives you the option of embedding your theme changes and additions into a single site by working through the web. Or, alternatively, by packaging your theme into your own product, you can then install and uninstall it at will and apply it to a number of sites. There are pros and cons to both approaches, and this manual runs through them in later sections.

Plone 3 comes with with two themes:

an inbuilt, ready-made theme - Plone Default
and an additional optional replacement - NuPlone.

Things are somewhat different in Plone 4:

Two themes are available - Plone Classic and Sunburst (with Sunburst being the active theme when you first install Plone)
Plone Default still exists as the core on which both Plone Classic and Sunburst are built and should prove a useful basis for any theme product
NuPlone has been removed but is still available for download if required

If you're at all skeptical about what can be achieved, have a look at the wealth of different sites showcased on plone.net or at the downloadable themes available from the Products section of this site.

If you already have a Plone 3 theme and want to know how to upgrade it to work with Plone 4 then the upgrade guide has further information and guidance.

3. Overview

Here's a quick overview of what this manual covers.

A mind map of the manual, click to enlarge Section 1: Introduction

A theme is a distinct look and feel for Plone, which is often based structurally on the out-of-the box Default Plone theme.

Section 2: Approaches

What's the best way to go about it - what are the pros and cons of working through the web or on the file system?

Section 3: Tools

What tools are required and what's available to help you build your theme?

Section 4: Building Blocks

There are three main building-blocks in a Plone 3 theme. While there are a few overlaps between them, in general, it helps to see them as discrete entities.

skin
components
configuration

This section will give you an overview of

the terminology involved in each of these building blocks
the languages you'll need to work with each of them
the techniques / approaches required to customize these building blocks or create new ones
how you can locate the files you need

Section 5: Putting a Page Together

How is everything pulled together to create a page? We'll look at

how a page is constructed
how content reaches the page
how style sheets and JavaScript reach the page
how you can get hold of other information about your site

Sections 6: Elements Reference

There's a quick reference to page elements and a brief summary of how to tackle customization and creation of components.

Section 7: Where is What?

It's often difficult to identify the location of the files you need. This section gives you a quick reference to the file layout of a theme product. There are also pointers to other diagrams on the web which should help you to map the visual page elements to components, templates and styles.