Split the Portal Logo

Default implementation

When it comes to customizing the appearance of your Plone Site, changing the Portal Logo is one task. Many web design techniques use two color background logos to give some kind of visual pleasure to the user.

The default Portal Logo implementation uses a single image, with a unique background color value for the surrounding portal header. Thus, the portal header fits nicely on any displays screen resolution.

Where to go

This How-To shows the steps necessary to create two separate background sections for the portal logo with two separate background colors. This gives a way to display two color background logos over the whole portal header width with any screen resolution.

The DOM

This section of the How-To gives hints in how to analyze the structure of a rendered Plone page, with Firefox DOM-Inspector. DOM is the abbreviation for "Document Object Model", a standard for representing the structure of documents. Using Firefox' DOM inspector you get a hierachical view of the HTML document and its nested tags. This is very useful during the ride finding out how the visual components of a Plone page are glued together. In fact, it gave the author the ability to find out how to achive this How-To's goal at all. You can download DOM Inspector at http://www.mozilla.org/projects/inspector/.

Start up Firefox, navigate to your Plone Portal's main page, and activate the DOM-Inspector, by either hitting Ctrl+Shift+I, or choosing it from the Tools menu. The Page is read in again, and the DOM-Inspectors main window displays. On the left hand you get the hierachical view of the whole document. Click on the items to get the tree expanded to the place where you are interested in. In this case, we are interested in the portal-header/logo section:

As we can see, the portal header of a default Plone Site consists of a div tag, with the id=portal-header assigned to it. Now hit the inspect button on the upper right of the DOM inspectors window, expand the tree again and select the div tag:

DOM inspector highlights the appropriate section in the rendered page display. This is very useful in getting an understanding on how a Plone site is rendered. Play around with it. On the right hand is the section of the DOM inspector where several different information can be displayed:

Between all entries two are my favorites:

• CSS Style Rules - This gives the applied CSS Style Sheets of the selcted tag
• Computed Style - gives a list of attribute-value pairs of the selected tag

Again, use it and navigate around. As we have identified the tags responsible for the portal-header and portal-logo section of a site, we are now ready to change code. Go to the ZMI of your site, and navigate to the portal_skins section. You get the filesystem directory view of every hard-coded element a Plone site consists of. Our alterations go into the custom folder, by choosing an element in the FS directory view, and hitting the "customize" button. We get a copy of the choosen element with priority over the hard-coded one. Thats real nice. We can play around without destroying anything. Just delete the element in the custom folder, and its reset to factory default. Thats the way Plone goes, and its real nice.

The Plone Page rendering process is template driven, so lets customize the template which defines the portal-logo. Navigate to the plone_templates folder (in the portal_skins directory view), and click the global_logo template. Click customize.

You end up with a *copy* of the template ready to edit in the custom folder. To achieve our goal, dividing the background where the logo is to be displayed into two separate pieces, we duplicate and wrap the default logo definition with surrounding div tags:

...

<!-- THE PORTAL LOGO DEFINITION -->
<div id="portal-logo-custom" metal:define-macro="portal_logo">
  <div class="logowrappertop">
    <h1 id="portal-logo-top" >
      <a href="/"
       tal:attributes="href navigation_root_url"
       tal:define="portal_title portal_properties/title;"
       tal:content="string:$portal_title"       
       accesskey="1">
        Plone
      </a>
    </h1>
  </div>
  <div class="logowrapperbottom">
    <div id="portal-logo-bottom">
      <a href="/"
       tal:attributes="href navigation_root_url"
       tal:define="portal_title portal_properties/title;"
       tal:content="string:$portal_title"  >     
        Plone
      </a>
    </div>
  </div>
</div>

...

Its just as easy as duplicating the default logo macro definition, and changing its names accordingly. We also change the H1-tag for the lower part of the logo into a DIV-tag, as we want to preserve Plones screanreader/accesskey behaviour. We now have two logos in our portal logo definition, each placed into its separate div tag to have two separate background colors. Notice that we changed the css-id of the all surrounding logo div at the top of the macro to switch its css-attributes to default (or undefined). This disables the predefined margins and renders our divs as backdrop ones, filling the background to the extend of the screen width. The rest of the changes needed to make it work are css related. We need css code for the two new background divs. This code is responsible for loading and displaying the logo images. Navigate to the plone_styles folder in the plone_skins directory, and make a working copy of the ploneCustom.css file, as you did with the template. Fill in the following code:

...

div.logowrappertop {
 background-color: #ccdbef;
 border-bottom-width: 1px;
 border-bottom-color: black;
 border-bottom-style: solid;
 height: 154px;
}

div.logowrapperbottom {
 background-color: #ffffff;
 height: 71px;
}
/* Logo properties */

#portal-logo-top {
background: url(&dtml-portal_url;/&dtml-logoNameTop;) no-repeat;
border: 0;
margin: 0em 0em 0.75em 0em;
padding: 0;
}

#portal-logo-top a {
display: block;
text-decoration: none;
overflow: hidden;
border: 0;
margin: 0;
padding: 0;
padding-top: <dtml-var "_[logoNameTop].height">px;
height: 0px !important;
width: <dtml-var "_[logoNameTop].width">px;
cursor: pointer;
}

#portal-logo-bottom {
background: url(&dtml-portal_url;/&dtml-logoNameBottom;) no-repeat;
border: 0;
margin: 0em 0em 0.75em 0em;
padding: 0;
}

#portal-logo-bottom a {
display: block;
text-decoration: none;
overflow: hidden;
border: 0;
margin: 0;
padding: 0;
padding-top: <dtml-var "_[logoNameBottom].height">px;
height: 0px !important;
width: <dtml-var "_[logoNameBottom].width">px;
cursor: pointer;
}

...

Most of this code is copied from the public.css file where the default logo style sheet definitions are defined, and duplicated to have a separate section for every one of our two logo images and background divs.

I altered the names Plone uses to look up the images, and adjusted the margins and the border of the top logo. My logo has a black line going through, so i let the background div extend it to the extend of the display.

The image to load for the Plone Logo is defined as a property in the base_properties sheet in the plone_styles folder. We make a copy of it and add our two entries:

• logoNameTop - name of the plone content object for the upper part of the logo
• logoNameBottom - for the bottom part

sheet.