Identify elements

The first question you should ask yourself when looking at the original design is: What elements map to which Plone structures?

In our case, most of the elements can stay in place, but the bar with the personalized actions and the logo should be moved. The row of global sections/tabs is also redundant.

It's OK to touch main_template!

In Plone, main_template is the mother of all templates, the one that keeps all the structure in one place. It looks like a very complex template when you open it up ("what is all this metal: stuff?"), but the secret is to scroll down to the first body tag (somewhere around line 40 in my version), and read it from there.

It will then have lots of statements looking like this:

    <div metal:use-macro="here/global_searchbox/macros/quick_search">
     The quicksearch box, normally placed at the top right
    </div>

Skipping the details (but please learn ZPT if you are going to work with Plone on a more than casual level, a tutorial on ZPT can be found here), this instruction essentially tells Plone to go get the file global_searchbox and pull out the macro quick_search from it, and apply it to the page.

You can move these elements wherever you want on the page as long as you keep their contents/attributes intact.

Most books recommend that you don't touch main_template for maintenance reasons. It's generally good advice, apart from that fact that you really can't realistically do cross-browser positioning that will match any design your client might give you, so I'll go on the record right here and say it:

My name is Alexander Limi, and I customize the main_template in my themes.

There, not so intimidating anymore, is it? ;-)

The important point if you customize main_template to re-order elements is to be careful when you upgrade. The release notes in every Plone release will state whether changes were made to main_template, but you should always use a diff program (FileMerge for Mac, WinMerge for Windows) to see what changed between the original main_templates in two different versions of Plone, and re-apply these changes to your version of main_template when you upgrade.

In our case, we are going to:

• Remove the global nav bar (we have the navigation tree, no need to have duplicate navigation structures)
• Move logo to top (there are ways to do this without re-ordering main_template, but this is so much easier)

This is done by putting using the tal:replace instruction around the content, and replacing it with the special instruction nothing, example:

    <tal:tutorial tal:replace="nothing"> Tutorial: Removing the global nav
      <div metal:use-macro="here/global_sections/macros/portal_tabs">
       The global sections tabs. (Welcome, News etc)
      </div>
    </tal:tutorial>

The way to get your own main_template is to copy the one that exists in your CMFPlone/skins/plone_templates directory to the template directory in the theme product you generated with DIYPloneStyle.

Extract base colors that are going to be used

The next step is to pull out the color values from the mock-up. These could be used for base_properties, but I'm not going to make use of that in this particular tutorial — it makes sense if you want some of the Plone default CSS remaining, though. Here are the color values we need for our theme:

    border: #c9c4c0
    navigation elements: #d3cebc
    red highlight color: #ec001a

    link color: #463229
    text color: #7e7c7c

Which style sheets are disabled?

In our example (and by default in DIYPloneStyle), we have disabled the public-facing style sheets, which is what makes Plone look like Plone.

The following style sheets are disabled:

• base.css (basic tag styling - p, a etc)
• public.css (all the "fluff", what the public site looks like)
• portlets.css (contains portlet markup, the boxes in your Plone site)
• generated.css (creates content type icons — I usually turn on generated.css for logged in users only — look in member.css for an example condition)

Sometimes, I prefer keeping base.css and override the few things that are not the way we want them (like headlines), and adjust fonts etc in base_properties - but in our example we'll start from zero. This also makes it more future-proof.

Export graphical elements

Next up, you should export the graphical elements needed from the mock-up. If you have a Photoshop mock-up, make use of the layers functionality, and extract any backgrounds, logos and other graphics. Save these to the mytheme_images directory.

Now, let's get to the fun part: Adding the CSS and making Plone look like our mock-up.