Building Skins

Before you begin

This document assumes you have a current working installation of Plone on your development system and know where the Products directory is and how to install a product into it.

Where to start - DIY

Your best bet is to start by using Dave Convent's DIYPloneStyle product. This code will simplify the process of building a skin that includes everything it needs to easily install into our environment.

You won't want to install DIYPloneStyle directly into your development system's Products directory. Instead, you'll use it as a tool to generate your own stand-alone skin product.

Download the latest version of DIYPloneStyle and place it into a working directory, such as where you keep your source files. The DIYPloneStyle product contains a script ./DIYPloneStyle/bin/generator.py'. That's what we'll run to generate your skin template.

Skin product naming convention

A skin will have a product name, stylesheet name, skin directory, and skin name. You pass values for these to the generator.py script to build your custom skin product.

Note: All skin products and the included stylesheet must use the following naming conventions. We will reject any skin product submitted that does not conform to these naming conventions. Fortunately, if you make a mistake, it's easy for you to rebuild your product after-the-fact.

Product Name

The product name must start with Skin- and a human-readable product name suffix in "StudlyCaps" with no spaces or special characters (In this case, a special character is any character that's not a letter or a regular dash.). For example, if you are building a product for the school of Public Health, you might name your product, Skin-PublicHealth. Acronyms for product and option names will be rejected.

skindir

The '--skindir' must match the product name suffix exactly, but in all lower-case (publichealth).

stylesheet

As with the skindir, the '--stylesheet' similarly matches the product name suffix, but in all lower-case (publichealth).

skinname

The '--skinname' option allows you to set the publicly viewable name of the skin. It can contain upper and lowwer-case characters and spaces. In this example, we'll call it "Public Health"

Generating your template skin shell

If you wanted to create a skin for your school or department (in this case, Public Health) run the ./DIYPloneStyle/bin/generator.py script with a command similar to the following:

./generator.py -v  -p Skin-PublicHealth --skindir=publichealth  \
 --stylesheet=publichealth --skinname="Public Health" --enable-public-stylesheets

For more information about these and other DIYPloneStyle options, refer to the documentation in the README.txt file.

Where to begin

Almost everything you'll want to change about the layout can be controlled through CSS. Just about every itemyou can think of has specific markup that will allow you to control many aspects of it's presentation. A good place to start is by examining the default plone skins. You can find the the default CSS files in this directory under your INSTANCE_HOME:

./Products/CMFPlone/skins/plone_styles/

You may want to copy the content from some of these and place the CSS definitions in the template that DIY's 'generator.py' script built in your skin product, Skin-YourSkinName/skins/yourskinname/yourskinname.css.dtml. You'll get the most mileage out of the pulling data from the following Default CMFPlone CSS style files:

CMFPlone/skins/plone_styles/
    portlets.css.dtml
    public.css.dtml
    columns.css.dtml

Place the bits and piece of these you'll want to modify into your yourskinname.css.dtml. You'll want to note some of the variables in theses CSS files that begin with &dtml- such as &dtml-globalBackgroundColor;. These variables are defined in the base_properties.props file also found in your styles directory, which supplies a good deal of the basic color scheme data throughout the template.