Installing the product

First, download the last version of DIYPloneStyle (this tutorial covers version 2.1.x), expand it, and follow the installation instructions that are in the README.txt (it is a classic installation procedure for a Plone product).

Your portal should now look like this:

Basic Example

The code of the example resides in the files contained in the folders which name starts with diystyle_example in the DIYPloneStyle/skins/ directory (on the filesystem).

We can see that there aren't many files in those folders:

• Some images

  They are kept in the folder diystyle_example_images.
  You can add to this folder the images that will override the ones shipped with Plone (mainly action and content type icons).

  It is better to keep them in a separate folder for having tidy folder listings in the portal_skins tool.

• A custom base_properties.props file

  From this file, you can learn how to replace the portal logo by another one, and how to simply change portal style properties.
  This file is not used by the example, but is provided by the skeleton theme created by the generator script for your convenience.

  note

  Customizing base_properties.props is the easiest way to modify the style attributes of Plone UI elements, but it has its caveat as you will see further in this tutorial.

• A custom stylesheet (diystylesheet.css.dtml)

  The most interesting thing about that stylesheet is probably that its name is not (and must not be) ploneCustom.css.dtml.

  You will learn in a further chapter of this tutorial how to register stylesheets with the new portal_css tool introduced in Plone 2.1 instead of using the old ploneCustom.css implementation.

  Stylesheets and base_properties.props are stored in the DIYPloneStyle/skins/diystyle_example_styles folder.

• A set of empty stylesheets

  Their names are public.css.dtml, base.css.dtml, generated.css.dtml, and portlets.css.dtml.

  They are used to disable equivalent Plone stylesheets by overriding them with empty CSS files (see chapter about skin layers).

• Some templates

  As Alexander Limi states, it is ok to customize Plone templates as long as it is only for small structural changes. The templates that are customized in the example are kept in DIYPloneStyle/skins/diystyle_example_templates.