Installation and basic example

Installing the product First, download the last version of "DIYPloneStyle":/products/diyplonestyle/releases (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":/documentation/tutorial/creating-custom-style/automated-setup 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":base-properties. * **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":stylesheets 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":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'.