Skip to content.

Personal tools
You are here: Home » Development » Teams » User Interface Team » The Plone 2 UI Cookbook


last edited 2 hours ago by eaon

This cookbook forms a collection of tips, tricks, tutorials and articles for customising the Plone 2 UI. It is a constant work-in-progress, documenting current best-practice for creating content views, forms and skins.

UI generals

Articles on the good UI principles that Plone 2 follows.

Views, portlets and actions
An explaination as to which is most appropriate for a given UI idea.
The Markup Contract
How Plone achieves a consistent look and feel for sites without sacrificing design flexibility.

Creating templates

Articles on the creation of accessible, clean templates that follow the Plone UI allowing seamless skinning.

Modifying Columns from a Template
How to remove or fill the Side Columns in Plone 2 correctly - Michael Zeltner
Naked Portlets
Creating a portlet for Plone 2 - Michael Zeltner

CSS in Plone

Articles on the way CSS can be used in Plone 2.

Columns with 100% height
A way to use Columns that use the full height of the Site (for, for example background images). All Liquid - Michael Zeltner
IE and Backgrounds
Eleminating Problems for our favourite Browser (Updated for Plone 2.0 final) - Michael Zeltner & Sasha Vincic
NN 6.x/Moz 0.9.x Tableless Support
moz 0.9 has some float bugs, so you'll need this if you want to support this browser when you want to use the tableless layout
Replace Tabs with Images
example (under construction) - Michael Zeltner
Replace Tabs with Images and Rollovers
example (under construction) - Michael Zeltner
Columns Starting On Top
example (under construction) - Michael Zeltner

CSS generals

Articles on general CSS. Nothing Plone specific.


Don't know anything about CSS yet? These links provide starting points!

Designing With Webstandards
The great CSS & Webstandard Book for newbies (and a musthave for people that already know CSS).
W3 Schools: CSS
CSS Tutorials and more for mainly aimed at Newbies


Solution lists: Noodle incident (good main page), and glish. A runner up mention. Excellent display discussion from quirksmode.

Converting from old school to new school? Structured content instead of table designs discussion and an entertaining (long) slideshow.

Centered Box
Center a div Box Horizontally. (Also from glish )
Dead Centre
Center div tags horizontally and vertically

Images in CSS

Nice article on stopdesign, a good solution from pixy and a great discussion (comprehensive backgrounder) on mezzoblue.

Essential tools for developing

CSS Edit Bookmark for Mozilla
Bookmarklet for Mozilla based browser - a good/better alternative to the EditCSS? external - uses monospaced fonts and a seperate window - works the same otherwise
Inline CSS Editor
Same functionality as above just for our favourite browser: IE


Articles on the construction of icon sets.

Custom markup

Articles on the correct ways to extend the classes and IDs? used in Plone 2 in order to minimise clashing.

Coding Standards
The Document that currently holds the Naming Standards - used by the UI Team


Using technologies (such as Flash or Quicktime) in accessible ways within Plone.

Flash Satay
The correct Way to use Flash in a Webstandard based Environment. By Drew McLellan

Other resources

A collection of external resources liable to be of help to the skinner.

A List Apart
Various Articles from famous Webstandard-People all around the World.
CSS Discuss
A Useful Mailinglist about CSS
CSS Discuss Wiki
All about CSS Design - From Hacks to Chosing a Unit
CSS Discuss showcase
A showcase of sites, from personal to large corporate, that use CSS for their design.
Real-world CSS inspiration.
CSS Zen Garden
The CSS Zen Garden is stalwart of the design world, showing off what is possible with CSS-based designs.
CSS2 Specification
The definitive reference to the CSS2 recommendation.
CSS Talky
A worryingly complete guide to CSS. In German.
Free Software User Interface
A lucid and intelligent article on UI design in free software by the developer of the Metacity window manager.
User Interface Design for Programmers
Joel delivers a great article on UI design for programmers.
Liquid Layouts
A discussion on practical liquid layouts in CSS.
Coloured boxes
A clever process for the generation of custom layouts with CSS.
The Daily Standards
"Recognizing sites that have been lovingly crafted with web standards and the future in mind.”
A Webstandard-Webdesign List
good CSS stuff

Powered by Plone

This site conforms to the following standards: