littled.net

This the third part of my Plone 3 adventure. So far I’ve:

• Set up my Plone 3 development environment using ZopeSkel, paster and zc.buildout
• Created a test theme product — littled.theme

There’s still more work to be done before I can even start playing around with the CSS. I’ve sat down with pen and paper (yes, really) and compared the theme I’ll be developing with the standard “Plone Default” theme mapping across the different functional elements to the design I’m working with.

I created a rough mish-mash of the two designs in Photoshop so I could see where best to place things like the portlets and personal actions. This has been a useful way of getting an idea of how the final product will work:

Not perfect, but it gives me an idea of where I’m going.

I’ve inserted the Plone logo, site actions (site map, accessibility etc.) and breadcrumb trail as extra elements not in the original design. I think this is fair enough: a breadcrumb trail will definitely be necessary in a potentially complex site but isn’t really needed for a blog site which is the inspiration for this design.

Inserting the global section tabs is a little bit too much of a liberty I decide, but I’m going to put these at the bottom of the design where there are some general links.

In the old days this would certainly mean a change to main_template, but I can get round this by reorganising the viewlets. I want to do this before I start styling as I want to have the underlying Plone HTML all done and dusted.

Reorganising the viewlets is not complex in itself but is a little confusing for a Plone 3 newbie like me. Here’s what I did (and I’m following chapter 8 of Martin Aspeli’s book very closely now).

• Work out with Viewlet Manager needs to take over control of the tab generating viewlet (global_sections). This will be plone.portalfooter
• I reassign global_sections to plone.portalfooter by editing the configure.zcml file in /littled/src/littled.theme/littled/theme/browser/ directory thus:

  <browser:viewlet name="littled.global_sections"
    manager="plone.app.layout.viewlets.interfaces.IPortalFooter"
    layer=".interfaces.IThemeSpecific"
    class="plone.app.layout.viewlets.common.GlobalSectionsViewlet"
    permission="zope2.View" />

• Now I’ve done that I’ll need to hide it from plone.portalheader. I do this by editing the viewlets.xml file in littled/src/littled.theme/littled/theme/profiles/default:

  <object>
   <hidden manager="plone.portalheader" skinname="Littled theme">
    <viewlet name="plone.global_sections" /> </hidden>
  </object>

• I then restart Zope and reinstall my theme in my Plone site. I’m not 100% sure if you need to restart at this point, but it probably doesn’t hurt.

This has worked. You can see that the tabs have been moved to the bottom of the template in this screenshot (the list starting “Home, Users etc.”):