Document Actions

Using Text in Place of the Portal Logo

This How-to applies to: Plone 2.5.x, Plone 2.1.x
This How-to is intended for: Integrators, Customizers

This how-to gives two examples of replacing the portal logo image with text.

Introduction

Using text instead of an image for the portal logo requires two steps: customizing the global_logo.pt and adding a bit of CSS. Furthermore, the global_logo.pt can customized to use specific (static) text or to use the text from the portal properties dynamically (e.g. the Title or Description).

Using Static Text

From portal_skins/plone_templates, click on global_logo.pt
Click on the Customize button

Update the page template with the following code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">

<body>

<!-- THE PORTAL LOGO DEFINITION -->

<div id="portal-logo" metal:define-macro="portal_logo">

<a href="/">
   <span
      tal:attributes="href navigation_root_url" accesskey="1">
      PLONESITE.NET
   </span><br />

   <span id="subtitle">
         Just Ploning Right Along
   </span><br />
</a>

</div>

</body>
</html>

Add the following to the appropriate CSS file (for a fresh Plone instance for example, this would be the ploneCustom.css which can be customized from portal_skins/plone_styles):

#portal-logo {
    background: none; /* turns off default plone logo */
}

#portal-logo a {
    padding: 0px;
    height: 75px !important;
    font-size: 28px;
}

#subtitle {
    font-size: 20px;
}

The result should be something like this:

Using dynamic text:

Use the following for the portal_global.pt template instead to display the portal Title and Description in the portal logo area:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">

<body>

<!-- THE PORTAL LOGO DEFINITION -->

<div id="portal-logo" metal:define-macro="portal_logo">

<a href="/">
   <span>  
      tal:attributes="href navigation_root_url"
      tal:define="portal_title portal_properties/title;"
      tal:content="string:$portal_title"
      accesskey="1"> Plone   
   </span> <br />

   <span id="subtitle"> 
      tal:define="portal_subtitle portal_properties/description;"
      tal:content="string:$portal_subtitle">
   </span>
</a>

</div>

</body>
</html>

Make sure that the CSS from the previous section is in place as well.
Where the portal Title has been set to "MyPortal" and the Description to "just another portal", the results are:

Some notes regarding the CSS

In global_portal.pt, "h1" was replaced with "div"; this allowed me to preserve the #portal-logo class without having to override Plone's default styling for h1 (which doesn't matter when the logo is an image but comes directly into play when it's text instead).
You will want to tweak the height (and possibly add width) for "#portal-logo a" to adjust for using larger font sizes or if you have longer strings for the text.

Acknowledgments

Most of this is based on some code that Alex Clark (aclark) shared and what I gleamed from the Pumpkin Skin.

by Darci Hanning — last modified July 31, 2007 - 22:40 All content is copyright Plone Foundation and the individual contributors.

Plone CMS: Open Source Content Management

Sections

Personal tools

Find Documentation by Topic

Document Actions

Using Text in Place of the Portal Logo

Introduction

Using Static Text

Using dynamic text:

Some notes regarding the CSS

Acknowledgments

Plone3?

Plone3?

Plone3?