NOTE: Most of the screen shots in this tutorial were taken using Firefox with the web developer extension, which lets you do things like outline block elements, outline table cells, view ID and CLASS usage, and even edit CSS real-time on the page. Invaluable for skin developers!

Before we start: About roles

Plone has the ability to recognize various user roles. An assigned role (usually one of Anonymous, Member, Reviewer, or Manager, and possibly a few more) determines what the user can see or do on the site:

• Anonymous users generally are not given the ability to add or edit content, and therefore will not see those options when visiting the site.
• When a Member logs in, his or her view of the site will change to include the elements needed to add and edit content, as well as change preferences.
• The role of Reviewer is similar to Member, but with the added responsibility of approving or rejecting new content that has been submitted for publishing.
• Managers can do it all: they are given complete control of the site.

The Structure

This image depicts the basic structure of a Plone site from the viewpoint of a logged in user. Plone does a great job of separating structure, presentation, and content.

The Presentation

Below you see the presentation of a Plone site, with outlines around all of its block elements. We'll go through each element and explain where to find the templates and CSS that control them.

Note:

You should be able to do most (if not all) of your modifications through CSS style sheets, without having to modify any templates.

Note:

Plone is designed so that any CSS customization made in ploneCustom.css (located in [site]/portal_skins/plone_styles) will take precedence. So when you modify any CSS elements, move them into ploneCustom.css, and leave the original style sheets alone.

Note:

To determine which CSS is being used, look at the template code and search for class= and id=. The name in "quotes" after them is the CSS element that is pulled from the CSS file.