You probably have greater ambitions than this for the look and feel of your site, but editing the CSS and replacing the logo is a good way of making a start in learning theming techniques.

Prerequisites

We're assuming that you are familiar with HTML and CSS - although the very basic customizations outlined here, don't require much knowledge of that. It will help if, as a manager, you've had a chance to investigate the Site Setup section of Plone.

Outline

First Sharpen Your Pencils

There are a number of tools out there that will make the process of theming Plone a great deal easier, so we run through them here. To see your customizations, you'll also need to be sure that you are running your site in debug/development mode. 

Next Try Some CSS Customizations

We'll walk you through the process of overriding the page title style, by customizing and editing the ploneCustom.css style sheet. All of this is done through-the-web via the Zope Management Interface.

Finally Replace the Logo

We'll revisit the techniques of customization and CSS editing and expand on them to replace the Plone logo image with your own logo.

You'll be introduced to some very simple techniques here for through-the-web customizations of Plone's CSS.

• How to locate the styles you want to change
• How to override these styles using the ploneCustom.css style sheet

In this case we'll change the colour of page titles from black to turquoise.

Before you start

For convenience, Plone themes often comprise a number of separate style sheets, but for speed and efficiency, in production mode, Plone has a mechanism (portal_css) for packaging these up into just one or two files.

You'll need to disable this when making changes to your site or customizing CSS. So make sure you've followed the instructions on how to put your site into development/debug mode.

Locating the styles you want to change

• If you don't already have a page in your Plone site, add one, save it and inspect it in view mode.
• Use Firebug, or a similar tool, to locate the class name of the page title - in this case its h1.documentFirstHeading.

Locating the ploneCustom.css style sheet

As a matter of course, the last style sheet to load on every Plone page is ploneCustom.css. You'll see this if you inspect the HTML head tag of your page using Firebug. If you dig further, you'll probably find that this style sheet is completely empty. By the rules of precedence in the CSS Cascade, any styles in this sheet will override styles specified in the preceding sheets. So you have a "blank sheet" here for your own customizations.

The trick now is to locate this file, so that you can make it available for editing.

• To make life easier for yourself, you might like to open a second tab or browser window at this point - you can then quickly switch back to the first tab to see your changes.
• Go to Site Setup > Zope Management Interface and click portal_skins
• Use the Find option in the tabs across the top to locate ploneCustom.css:
• Type ploneCustom.css in the "with ids:" box and click Find
• You may get more than one result, it doesn't matter which you choose to click on, however best practice is to choose the one flagged with the red asterisk.

Customizing and Editing ploneCustom.css

When you click on ploneCustom.css you'll find that you can't edit it. The next stage is to put the ploneCustom.css in a place where it can be edited. You'll see a Customize option just above the grey text area, click the Customize button and you'll find that the style sheet has been automatically copied to portal_skins/custom.

You're now free to edit the file as you like. To change the colour of our page titles, add:

h1.documentFirstHeading {
    color: #0AAE95;
}

and save.

If you've installed Plone 4 with the Sunburst theme, the ploneCustom.css comes with a number of commented out pre-packaged styles that you might like to experiment with. You can override the layout styles to a fixed width and alter the colours of the links.

Rolling back your changes

You've got a couple of options for reverting back to the original CSS:

• comment out your styles in the ploneCustom.css - the usual CSS commenting syntax applies
• delete (or, if you want to keep a note of what you did, rename) your version of ploneCustom.css, you'll find it here:
• Site Setup > Zope Management Interface > portal_skins > custom
• you can choose the delete or rename options - try renaming to ploneCustom.css.old
• you can then go back to the beginning of the process of locating and customizing ploneCustom.css

Further Information

You've actually encountered two types of customization here.

1. The first is a standard method of using order of precedence - the Cascade - to overwrite CSS styles as they reach the browser.
2. The second is a Plone/Zope specific method of overriding the style sheets themselves by dropping them into the custom folder of portal_skins. This method can also be used for templates and other resources and is explained in more depth in the section on Skin Layers in this manual.

More advanced techniques, including incorporating your own style sheets into a theme product, are covered later in this manual.

You can find out more about how the CSS Registry (portal_css) packages up the style sheets to deliver them to the page in the Templates and Components to Page section of this manual.

The Basics

In Plone 3 and 4, the logo is simply an image with a link to the home page of your site wrapped around it (there's just one small difference between versions, the name is logo.jpg in Plone 3, logo.png in Plone 4).

<a id="portal-logo" href="http://[your site]" accesskey="1">
    <img width="252" height="57" title="Plone" alt="" src="http://[your site]/logo.jpg"/>
</a>

If you would rather deliver your logo in a different fashion and need to rewrite the HTML, then you can do this by customizing the logo template, follow the instructions in Section 3: Changing the HTML.

1. Changing the Image and its Title

The logo image - logo.jpg (Plone 3) logo.png (Plone 4) - can be found in the plone_images folder in portal_skins. The quickest way to replace this is simply to upload your own image and give it the same name:

• Go to the Zope Management Interface (Site Setup > Zope Management Interface)
• Go to portal_skins > plone_images
• Click logo.jpg (Plone 3) or logo.png (Plone 4) and then click the customize button
• Now replace the image by clicking the browse button and choosing your own image from your file system
• Edit the Title field (this will ensure that the title attribute changes in the HTML)
• Save your changes and refresh your browser to see the changes on your site

Alternative Approach (Plone 3 only)

The name (ID) of the logo image is specified in base_properties - a list of useful values that, in Plone 3, are picked up and used across the Plone Default theme style sheets. This gives you the ability to upload your own logo image, give it any name you like, and then customize the base_properties with that name.

• Go to the Zope Management Interface (Site Setup > Zope Management Interface)
• Make sure that you've switched your css registry to debug mode (portal_css)
• Go to portal_skins > custom and choose Image from the drop down list on the right
• Upload your own image giving it an ID and a Title e.g.:
  

  ID = MyLogo.jpg
  Title = My Logo

• Go to portal_skins > plone_styles, click base_properties and then click the customize button
  
• You'll now have a customized version of base_properties in the custom folder of portal_skins which you can change as you like. Find the logoName field and replace the value logo.jpg with the ID you gave your image (if you gave your ID a .jpg or .gif suffix, make sure you include that, and remember that it is case-sensitive) e.g.:
  

  logoName = MyLogo.jpg

• Save your changes and refresh your browser

In Plone 4 base_properties still exists but has only a very limited use.

Note that when you go back to your customized base_properties in portal_skins > custom, it will look like an empty folder. Click the properties tab to get back to the list of properties.

2. Changing the portal_logo style

There are no styles set for #portal-logo, but there are some for #portal-logo img in basic.css. Use the Firebug extension for Firefox to investigate these. The simplest approach is to override these with your own styles in ploneCustom.css.

• Go to the Zope Management Interface (Site Setup > Zope Management Interface)
• Make sure you have debug mode / development mode turned on in the CSS Registry (portal_css)
• Click portal_skins > plone_styles > ploneCustom.css and then click the Customize button
• You will now have an editable version of ploneCustom.css in the custom folder of portal_skins
• Add your own styles here, click Save, and refresh your browser to see the changes
  

3. Changing the HTML

The HTML for the logo is generated by logo.pt - a page template which is part of a viewlet called plone.logo. To customize this through the web, you'll need to use portal_view_customizations.

• Go to the portal_view_customizations in the Zope Management Interface (Site Setup > Zope Management Interface)

• Click plone.logo and then click the Customize button
  
• You'll now have a template you can rewrite - we've highlighted the significant bits in the theory section below and given you a couple of examples to get you started.
• Save your changes and refresh your browser to see them

Note: if you want to go back and make further changes later, you'll see that plone.logo is highlighted in the portal_view_customizations list, click on it to edit it. If you want to remove your customizations completely, use the contents tab of portal_view_customizations, tick the box next to your template and click Delete.

The Theory

Here's the logo.pt template. It is written in the templating language used by Plone - TAL (or ZPT). It helps to know this (and it doesn't take long to learn), but we'll talk you through this example:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="logo.jpg" alt=""
         tal:replace="structure view/logo_tag" />
</a>

First we have the link tag:

You can disregard metal:define-macro="portal_logo" this is just wrapping the code into something that can be re-used again if necessary.

The important bit is tal:attributes="href view/navigation_root_url", this is the code that supplies your site URL to the href attribute.

There is a magic variable here, view/navigation_root_url, that seems to have appeared from nowhere. In fact, view is a collection of properties computed by the plone.logo viewlet and seamlessly passed to the logo.pt template. Here are the available properties:

navigation_root_url

supplies the URL of your site (it could potentially be something different if you've set up a different navigation root)

logo_tag

looks up the name of the logo image from base_properties, finds the image, collects its dimensions and title and turns all of this into an HTML image tag with the appropriate attributes Check back to the alternative approach in Section 1 of this How To for more information about base_properties.

portal_title

looks up and supplies the title of your site

Now look at the image tag in the template.

The key here is tal:replace="structure view/logo_tag". This means that the template won't deliver the image tag actually written out here, instead, it will replace the whole thing with the tag generated by the plone.logo viewlet. If you don't want this to happen, then you should delete this line.

Note: structure means treat the value as HTML rather than a text string.

Example 1: A plain text title

Here's a customized version of the template, using view/portal_title rather than view/logo_tag, to give you a text header instead (if you've used Plone 2, then you might recognize this):

<h1 metal:define-macro="portal_logo"
   id="portal-logo">
   <a accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone" tal:content="view/portal_title">
    </a>
</h1>

Of course you'll want to supply your own styles, look back at Section 2 of this How To for information on defining these in ploneCustom.css. You could adjust this example to use an accessible image replacement technique in your CSS.

Example 2: Supplying your own image tag

You don't have to use logo_tag if you don't want to:

<a metal:define-macro="portal_logo"
   id="portal-logo"
   accesskey="1"
   tal:attributes="href view/navigation_root_url"
   i18n:domain="plone">
    <img src="[My logo ID]" alt="[My Logo]"
         width="[My Width]" height="[My Height]" 
         tal:attributes="title view/portal_title" />
</a>

You will, of course, need to upload your own logo to the custom folder in portal_skins, see the instructions in Section 1 of this How To.

Further Information

• There are further How Tos in the Logo section of the Plone documentation dealing with more advanced customization methods.
• More guidance on TAL and ZPT can be found in the ZPT tutorial.
  
• If you want to transfer your changes to the file system in your own theme product, then the further sections in this reference manual will give you an outline of the files and templates you'll need (Logo viewlet section).