Creating a new theme for Plone: a real-world example (Plone 2.1, 2.5)

In this tutorial, Alexander Limi will show you how to take a default Plone site and put a totally different look on it. (Not updated for Plone 3.0)

1. Introduction Introduction to the tutorial, and the new theme approach made possible using Plone 2.1 and later versions.
2. Toolchain Quick walk-through of the different tools we have at our disposal to create and inspect CSS-based designs.
3. Real-world use case For our purposes, we will show how to build a theme from a Photoshop mock-up.
4. A proper foundation Before we start adding our CSS styles, we need to create the basic foundation for our theme. This is essentially a blank skeleton product that we can put our images and CSS inside.
5. Scaffolding Before we can start writing CSS, we are going to do some structural changes and export the graphical elements.
6. Adding CSS styles Finally, it's time to apply our CSS styles. Each step is illustrated by an image showing the progression of the theme.
7. Header styles First up, the site header.
8. Basic styles Adding the basic body styles.
9. Background image styles Adding a background image and locking the width of the design.
10. Headline and paragraph styles Adding styles for headlines and paragraphs.
11. List styles Making the lists be displayed inline and without bullets.
12. Portlet and navigation styles Adding proper styles to the portlets and the navigation tree in particular.
13. Re-positioning the navigation Removing redundant margins on the portlets and navigation tree.
14. Footer styles Final element, styling the footer.
15. Tips for creating your own Plone Themes Some useful tips for making your site designs stand out and work well with future versions of Plone.

All content on one page (useful for printing, presentation mode etc.)

Related content

DIYPloneStyle: Creating a Custom Style for Plone 2.1 and 2.5

This tutorial will teach you how DIYPloneStyle can be used as a base for creating a custom style product for Plone 2.1 or Plone 2.5 that adds to a portal a new skin selection and makes use of the new stylesheet and javascript registries.