Document Actions
Creating a new theme for Plone: a real-world example
This Tutorial applies to:
Plone 2.5.x, Plone 2.1.x
This Tutorial is intended for:
Integrators, Customizers
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 yet)
limi
All content on one page (useful for printing, presentation mode etc.)
- Introduction Introduction to the tutorial, and the new theme approach made possible using Plone 2.1 and later versions.
- Toolchain Quick walk-through of the different tools we have at our disposal to create and inspect CSS-based designs.
- Real-world use case For our purposes, we will show how to build a theme from a Photoshop mock-up.
- 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.
- Scaffolding Before we can start writing CSS, we are going to do some structural changes and export the graphical elements.
- 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.
- Header styles First up, the site header.
- Basic styles Adding the basic body styles.
- Background image styles Adding a background image and locking the width of the design.
- Headline and paragraph styles Adding styles for headlines and paragraphs.
- List styles Making the lists be displayed inline and without bullets.
- Portlet and navigation styles Adding proper styles to the portlets and the navigation tree in particular.
- Re-positioning the navigation Removing redundant margins on the portlets and navigation tree.
- Footer styles Final element, styling the footer.
- 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.
see also:
-
DIYPloneStyle: Creating a Custom Style for Plone
- 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.
by
Alexander Limi
—
last modified
May 23, 2008 - 22:09
Contributors:
David Convent, Reinout Van Rees
All content is copyright Plone Foundation and the individual contributors.
Copying the main_template
Posted by
Adam Blake
at
March 27, 2007 - 06:01
I've been following along fine with the tutorial, but have been having some trouble with customizing the main template. I've been able to edit the main_template in the custom folder fine but when I attempt "to copy the [main template] that exists in [my] CMFPlone/skins/plone_templates directory to the template directory in the theme product [I] generated with DIYPloneStyle", I get the following error:
This site encountered an error trying to fulfill your request. The errors were:
Error Type
Copy Error
Error Message
! The object main_template does not support this operation.
I am unsure of how to successfully copy a version of the main_template into my newly created DIYPloneStyle Theme. Any clarification you could offer would be most helpful.
Thank You,
Adam Blake
This site encountered an error trying to fulfill your request. The errors were:
Error Type
Copy Error
Error Message
! The object main_template does not support this operation.
I am unsure of how to successfully copy a version of the main_template into my newly created DIYPloneStyle Theme. Any clarification you could offer would be most helpful.
Thank You,
Adam Blake
Content Overlaps & a few other fixes
Posted by
Ben Sand
at
April 22, 2007 - 14:18
I'm having problems with the green border (or an part of the main content area "Welcome to Plone" overlapping the portal-site actions
the searchbox overlaps the calendar (it's right on top of the calendar) and it also overlaps the main content area ("Welcome to Plone").
In the example the content area seems to start 10-20px below the bottom of the search box, but on my setup it starts about 10-20px below the header logo.
Any suggestions?
---
A few other comments (issues I've solved)
* Firefox 2 on Ubuntu 6.10 doesn't seem to like the margin settings for lists that have been put onto one line - as I resize the browser window, it keeps jumping between one and two lines, eg:
username Preferences Undo Logout
and
username Preferences Undo
Logout
It flicks between them every 2-3 pixels of resizing the window.
It works ok just using padding-left, like #portal-siteactions. (I actually ended up setting all the formatting for #portal-personaltools to be the same as #portal-siteactions, except no border-left and I set padding-left to 1em.
* To line up the Navigation with the image, I had to get rid of the .portletItem padding:
.portletItem {
/* padding: 0.5em;*/
}
---
A few things that were missed in the tutorial (perhaps because I'm using Plone 2.5.2 and things have changed?):
* get rid of the stuff that's meant to be hidden:
.hiddenStructure {
display: none;
}
---
* to kill the the underlines in the footer, you need more than just
#portal-footer a, a:visited
because the underline is set in:
p a:link
as there are p tags inside the footer which make the formatting inconsistent. Editing the footer to remove p tags may be a better way to go.
-------
I am using Plone 2.5.2, Zope 2.9.6, Python 2.4.4.
the searchbox overlaps the calendar (it's right on top of the calendar) and it also overlaps the main content area ("Welcome to Plone").
In the example the content area seems to start 10-20px below the bottom of the search box, but on my setup it starts about 10-20px below the header logo.
Any suggestions?
---
A few other comments (issues I've solved)
* Firefox 2 on Ubuntu 6.10 doesn't seem to like the margin settings for lists that have been put onto one line - as I resize the browser window, it keeps jumping between one and two lines, eg:
username Preferences Undo Logout
and
username Preferences Undo
Logout
It flicks between them every 2-3 pixels of resizing the window.
It works ok just using padding-left, like #portal-siteactions. (I actually ended up setting all the formatting for #portal-personaltools to be the same as #portal-siteactions, except no border-left and I set padding-left to 1em.
* To line up the Navigation with the image, I had to get rid of the .portletItem padding:
.portletItem {
/* padding: 0.5em;*/
}
---
A few things that were missed in the tutorial (perhaps because I'm using Plone 2.5.2 and things have changed?):
* get rid of the stuff that's meant to be hidden:
.hiddenStructure {
display: none;
}
---
* to kill the the underlines in the footer, you need more than just
#portal-footer a, a:visited
because the underline is set in:
p a:link
as there are p tags inside the footer which make the formatting inconsistent. Editing the footer to remove p tags may be a better way to go.
-------
I am using Plone 2.5.2, Zope 2.9.6, Python 2.4.4.
Showing / Hiding breadcrumbs?
Posted by
Aaron Paxson
at
April 23, 2007 - 04:00
Limi, I'm no expert, but, in step 12, why would you show the breadcrumbs, just to hide them again?
/* Navigation */
#portal-breadcrumbs {
margin: 1em 1em 1em 19em;
}
#portal-breadcrumbs {
display: none;
}
--Aaron
/* Navigation */
#portal-breadcrumbs {
margin: 1em 1em 1em 19em;
}
#portal-breadcrumbs {
display: none;
}
--Aaron
Nice Tutorial
Posted by
Beren Erchamion
at
April 29, 2007 - 13:24
Hi Alex,
This is a great newby tutorial. I had a couple of suggestions for improvements:
- It would be good to add a note showing people how to turn on debugging for CSS in the CSS Registries tool. IE and FF both are a little flaky with caching CSS changes. I have found it very helpfu lwhen working with skin to have the CSS debug turned on.
- It is not always immediately apparent to the novice how exactly to create a new template. So I suggest adding something about how to do this when you start talking about main_template. Either thru the ZMI or on the file system.
beren
This is a great newby tutorial. I had a couple of suggestions for improvements:
- It would be good to add a note showing people how to turn on debugging for CSS in the CSS Registries tool. IE and FF both are a little flaky with caching CSS changes. I have found it very helpfu lwhen working with skin to have the CSS debug turned on.
- It is not always immediately apparent to the novice how exactly to create a new template. So I suggest adding something about how to do this when you start talking about main_template. Either thru the ZMI or on the file system.
beren
skins and logos
Posted by
Espen Moe-Nilssen
at
September 19, 2007 - 18:26
When developing my product subskins, which is partly DIY, I found out that its often needed to place an !important after the logo height. Also, if you have problems with the heights in IE6 / IE7 try something like this: #portal-top { height: 100px; _height: 98px;}. Where IE7 will use 100px and IE6 98 px.
Ah, an IE6 hack
Posted by
Kit BLAKE
at
December 22, 2007 - 16:50
Thanks, you saved me some googling.
Spanish version - Traducción al español
Posted by
Roberto Allende
at
September 28, 2007 - 23:46
This document is available in spanish - Este documento esta disponible en español: http://plone.org/countries/conosur/documentacion/creando-un-nuevo-tema-para-plone-un-ejemplo-del-mundo-real/
Suggested Wording
Posted by
DJ Ortley
at
October 5, 2007 - 18:38
I have a suggestion for some wording in section 4 of the tutorial. The sentence immediately following where you instruct the user how to use DIYPloneStyle's generator.py script to generate a new theme is confusing at a first reading. This sentence:
"This will generate an empty skeleton product called MyTheme where all our files can be placed in our Products directory."
might better read as something like:
"This will generate and place in the Products directory a new skeleton product called MyTheme where all our files can be placed."
At least to me, the first sentence doesn't seem to flow enough to allow the user to easily connect that running the generator.py script generates a new directory somewhere. It confused me at first (though I'm simple minded.) :)
"This will generate an empty skeleton product called MyTheme where all our files can be placed in our Products directory."
might better read as something like:
"This will generate and place in the Products directory a new skeleton product called MyTheme where all our files can be placed."
At least to me, the first sentence doesn't seem to flow enough to allow the user to easily connect that running the generator.py script generates a new directory somewhere. It confused me at first (though I'm simple minded.) :)
comment from a nubie
Posted by
Ian
at
December 19, 2007 - 11:31
i've just discovered plone and it seems an excellent product. i was just wondering when this guide will be updated to version 3.04 as it is quite different. i'm just learning plone step by step. thank you all.
German translation of the tutorial
Posted by
Andreas Mantke
at
December 30, 2007 - 12:57
A german version of the tutorial is available here: http://amantke.de/index.php?/content/view/54/34/
Issue with DIYPloneStyle-3.0 and this tutorial
Posted by
Daniel Bontempo
at
January 5, 2008 - 01:58
In the DIYPloneStyle-3.0 archive, the example theme has been renamed and moved into an example folder, and this has several implications. (I worked through them, but this comment might help other newbies.) FIrst, you cannot install the product to see the final version as it says in the tutorial. You need to go into the examples folder and get the renamed example folder and put it up in the products directory, and then you could install that to have a look. Second, when the tutorial says to copy template files from the example folder, all those paths are no longer correct. The various files are there but not where you are told to copy from.
Very nice guide
Between step 6 and 7 the calendar is removed, but I had some trouble finding out how to do it myself, an explanaiton on how to do that the best way would be great.