Change the Logo

How to substitute the standard Plone logo with your own logo - a through-the-web approach.

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're happy with this approach, then you won't need to touch the HTML as all the attributes in this snippet are generated automatically. Follow the instructions in Section 1: Changing the Image and its Title.

If you just want to tweak the styles a little bit, then go to Section 2: Changing the portal_logo style.

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

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 proceed to the viewlets overview section.