[This post was written before I moved to WordPress]
Prior to Plone 4, anyone visiting my site would have recognized the classic Plone theme. Squared tabs, left justified, and so on. I like the new Sunburst theme as a much improved default, although I have been thinking more about theming on Plone 4 than ever before.
If you are familiar with the default Sunburst theme, you’ll recognize it’s what I’m using. Here is what I’ve done to customize the theme so far.
First, I prefer to use the All Content view in all of my main pages, so that I can get a collection to appear in a blog-like format. That means I’ve made a number of customizations to that view, which I’ve documented elsewhere on the site. They include:
- using some custom code to make the categories / topics / tags appear at the top of each post;
- adding the Tweetmeme.com “drive by” tweet button, to enable quick sharing of the content;
- tweaking the heading to include the date and time in a more graphical way.
I have also been fooling around the main_template file. Although Sunburst changes the overall look and feel to a more modern tab bar, the typical Plone site still has a left column, content in the center, and a right column. One thing I have seen on some blog sites is a shift of the content columns to the right, with the content streaming down the left. I know that is in opposition to the F-shape reading advice that people like Jakob Nielsen recommend, but I’m giving it a try.
This column-shifting was a lot harder to crack though. First, I had to learn about grid-based design since that is what Plone 4 and Sunburst are based on. Then I had to understand the weird styling used to create the columns. The column spacing is all set out in the column.css file. Then you have to translate some of the shorthand, such as width-1:4 means that your column will take up 25% of your screen. The column styles in your main_template are pre-set to be .25, .5, and .25. My first attempt at moving the columns ended up with my center and left columns overlapped and my right column in the correct place. I finally ended up narrowing my columns further and pushing them further to the right. Portal column one is:
class=”cell width-3 position-13″
tal:attributes=”class python:isRTL and ‘cell width-1:4 position-3:4’ or ‘cell width-3 position-13′”>
and portal column two is
class=”cell width-3 position-10″
tal:attributes=”class python:isRTL and ‘cell width-1:4 position-0’ or ‘cell width-3 position-10′”>
It’s the last bit of the last line, matching the class=”cell …” line that matters. Originally, I had portal-column-one on the left, two on the right. What I found, though, was that there were times when I wanted to show just my left column and it looked odd with a white space to its right. So I ended up swapping their positions. By counting down from 16, you can inch your content from right to left.
Those changes needed to be made within the main_template file. All the other tweaks I’ve managed using the CSS file or by using the @@manage-templates function to move things around (like hiding one set of portal breadcrumbs, and throwing the global nav bar all the way to the top of the site).
I’m keeping my eye on what’s going on with Diazo/XDV to see if that’s something I’ll be able to leverage to do more advanced non-Sunburst theming. What I’ve picked up from reports back after the Plone conference in Bristol is that it will be part of Plone 5. Great news.