Customise Design

Before changing the visual design (otherwise known as the "theme", or "skin") of your Plumi site it is helpful to understand how a Plone site is put together. This tutorial on plone.org breaks down the main display elements in a Plone site, and shows you how to control and customize the appearance of each element.

The most basic way to change the layout of your site is to rearrange, add or delete portlets as described in the previous chapter.

Changing CSS

One of the easiest ways to change the look of your Plumi site is to change the CSS. A tutorial on how to change the CSS by using the Firefox developer tool Firebug, in conjunction with the Zope Management Interface (ZMI) can be found here.

Further Info

More documentation on changing the visual design of your Plumi site can be found on plone.org here, including the following topics.

Minor tweaks:

• Replacing Portal Tabs with images
• Formatting Portlets
• Setting the site icon (favicon)

A great reference guide to theming Plone:

• Plone Theme Reference 

Advanced theming topics:

• Creating a Custom Theme for Plone
• Creating a Plone 3.x Theme Product
• Installing a Plone 3.x Theme Using Buildout 

A new way of theming your Plumi site has evolved using technologies such as Diazo or Deliverance, which enable you to create a separate HTML/CSS theme for your site, and then map existing content out of Plumi/Plone into this theme using XSLT. Some more info on this can be found here:

• Rules-based theming - advanced XDV theming with collective.xdv
• collective.examples.diazo - examples of using Diazo/XDV to theme your Plone site
• http://valentinewebsystems.com/en/blog/2011/plone-4-themeing-aka-diazo-is-simple
• http://www.sixfeetup.com/blog/plone-theming-diazo-deliverance-themeeditor 
• http://blog.aclark.net/2011/01/19/new-website-for-2011/