Overview

In Spring 2008 i started with to develop a skin for Plone 3.0. During the process i encountered various Problems and needed to learn a lot of stuff new to Plone 3.

Download

CHZenlike-20080328.tar.gz

Information

Documentation

I assume you already know the basics about python und Zope Page Templates.

Useful links

When starting to customize, you need to know what part of the plone system you are actually looking at. A very good reference is the tutorial from John DeStefano

A General Overview about Plone 3 Customizations has been written by Martin Aspeli. Don't be scared by all the strange words and stuff. Have a look at it to get a general overview and a grip on some words.

Starting

Customizing plone involves writing a Plone-Product. Don't start to write it from scratch. Reuse the work from David Convent: DIYPloneStyle and also his tutorial.

DIY Plone Style

Download, unpack and run the generator.

user@host:~$ tar zxvf DIYPloneStyle-3.0.tar.gz
user@host:~$ DIYPloneStyle/bin/generator.py -p CHZenlike -t CHZenlike --add-viewlet-example

Replace CHZenlike with your custom skinname.

You now have the following structure

CHZenlike/
|-- HISTORY.txt
|-- LICENSE.txt
|-- README.txt
|-- __init__.py
|-- browser
|   |-- __init__.py
|   |-- configure.zcml
|   |-- images
|   |-- interfaces.py
|   |-- stylesheets
|   |   `-- main.css
|   |-- templates
|   |   `-- custom_viewlet.pt
|   `-- viewlets.py
|-- configure.zcml
|-- profiles
|   `-- default
|       |-- cssregistry.xml
|       |-- jsregistry.xml
|       |-- properties.xml
|       |-- skins.xml
|       `-- viewlets.xml
|-- profiles.zcml
|-- refresh.txt
|-- skins
|   |-- chzenlike_custom_images
|   |   `-- CONTENT.txt
|   |-- chzenlike_custom_templates
|   |   `-- CONTENT.txt
|   `-- chzenlike_styles
|       |-- CONTENT.txt
|       |-- base.css.dtml
|       |-- base_properties.props
|       |-- portlets.css.dtml
|       `-- public.css.dtml
|-- tests
|   |-- __init__.py
|   `-- testSkeleton.py
`-- version.txt

Install this skin and try it. It will look... interessting.

Styles

Your first go should be the Base Stylesheet base_properties.props and base.css.dtml. You should customize colors in base_properties and use those definitions in base.css. One reason is, that you might want to avoid to customize all stylesheets plone uses and they also use base_properties to find their color definitions.

Initially I moved a lot of viewlets around using absolute positions. This causes troubles when you use the plone url @@manage-viewlets to hide/show and move them. Same thing for fixed heights of complete divs. I rewrote most of my CSS but there a still some places where it is easier whith absolute heights and positions. If you run in this problem you can either live with it (hey only admins will use @@manage-viewlets) or you need to add additional styles to remove the position arguments in @@manage-viewlets. For example

/* remove absolute positions from portlets */
.portletItem #portal-siteactions {
        position: static !important;}

Always check you styles as

anonymous user
authenticated user
using presentation mode
inside the visual editor (kupu)

I had some troubles with the background image also shown inside kupu. So i needed to remove it using

/* kupu */
body#content.kupu {
        background: &dtml-globalBackgroundColor;;}

Viewlets

Viewlets are small snippets distributed all around the page. The site logo, the Login link top righ the sitemap link ...

All the stuff about customizing Viewlets can be found in this nice Tutorial. You want to move them around and change the templates. For example i customized the footer.

First step, change browser/configure.zcml to include my template.

<!-- customize footer viewlet -->
    <browser:viewlet
        name="plone.footer"
        for="*"
        manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
        layer=".interfaces.IThemeSpecific"
        template="footer.pt"
        permission="zope.Public"
        />

Next place a footer.pt in browser/footer.pt and you are done.

Moving viewlets around is explained in the Tutorial. I encountered one Problem when moving a viewlet from one Manager to another. I forgot to change the Interface of the viewlet, as each manger only accepts viewlets with the right interface. For example to move the Searchbox i needed to change the interface in browser/configure.zcml

<!-- overwrite searchform to place it in portal-top -->
 <browser:viewlet
        name="plone.searchbox"
        manager="plone.app.layout.viewlets.interfaces.IPortalTop"
        class="plone.app.layout.viewlets.common.SearchBoxViewlet"
        permission="zope2.View"
        layer=".interfaces.IThemeSpecific"
        />

And in profiles/default/viewlets.xml i could move it

<!-- remove searchbox from portalheader -->
<hidden manager="plone.portalheader" skinname="CHZenlike">
    <viewlet name="plone.searchbox" />
</hidden>

<!-- place it in portaltop -->
<order manager="plone.portaltop" skinname="CHZenlike" based-on="Plone Default">
    <viewlet name="plone.searchbox" insert-after="*"/>
</order>

Templates

Customizing templates will very likely break you upgrade paths. But sometimes there is no other way. Copy them from plone to skins/chzenlike_custom_templates and go for it.

Personal tools

Sections