Customize plone's personal tool bar style

Changing the look of the personal bar items requires a bit of CSS code - and a small change to the template for the personal bar viewlet. But everything can be done TTW via ZMI.

First, lets take a look at the current structure of the personal tool bar in Plone:

<div id="portal-personaltools-wrapper">
    <h5 class="hiddenStructure">Benutzerspezifische Werkzeuge</h5>
    <ul class="visualInline" id="portal-personaltools">
        <li>
            <a href="http://www.it-spir.it/dashboard" id="user-name">
                <img width="16" height="16" title="User" alt="" src="http://www.it-spir.it/user.gif"/>
                <span class="visualCaseSensitive">Administrator</span>
            </a>
        </li>
        <li>
            <a href="http://www.it-spir.it/logout">Abmelden</a>
        </li>
    </ul>
</div>

It's already well structured, but there's one thing missing: a CSS selector for the list elements others than the user name. What we might want is a class selector or - even better - an ID for every item.

So lets take a look at the template. You can find it in portal_view_customizations. It is called plone.personal_bar:

...
<ul id="portal-personaltools"
    tal:condition="python:view.user_actions or not view.anonymous"
    class="visualInline">
   <tal:block condition="not: view/anonymous">
       <li><a 
           id="user-name"
           tal:attributes="href view/homelink_url"
          ><img src="" tal:replace="structure here/user.gif" />
            <span class="visualCaseSensitive"
                 tal:content="view/user_name">
                John
           </span
       ></a></li>
   </tal:block>

    <tal:actions tal:repeat="action view/user_actions">
        <li tal:define="icon action/icon | nothing;
                        icon python:icon is not None and icon or view.getIconFor(action['category'], action['id'], None);
                        class_name string:visualIcon actionicon-${action/category}-${action/id};
                        class_name python:icon is not None and class_name or nothing;"
            tal:attributes="class class_name">
            <a href=""
               tal:attributes="href action/url;
                               class python:icon is not None and 'visualIconPadding' or nothing;"
            ><tal:actionname i18n:translate="" 
                             tal:content="action/title">dummy</tal:actionname
            ></a>
        </li>
    </tal:actions>
</ul>
...

The first part defines the user name with the image. The second part iterates over the list of available actions and adds some attributes to it. All we need to do is to define the id for the anchor element:

tal:define="id string:user-${action/id};"

Just click the customize button and edit the code. The template now looks like this:

...
    <tal:actions tal:repeat="action view/user_actions">
        <li tal:define="icon action/icon | nothing;
                        icon python:icon is not None and icon or view.getIconFor(action['category'], action['id'], None);
                        class_name string:visualIcon actionicon-${action/category}-${action/id};
                        class_name python:icon is not None and class_name or nothing;"
            tal:attributes="class class_name">
            <a href=""
               tal:attributes="href action/url;
                               class python:icon is not None and 'visualIconPadding' or nothing;
                               id string:user-${action/id};"
            ><tal:actionname i18n:translate="" 
                             tal:content="action/title">dummy</tal:actionname
            ></a>
        </li>
    </tal:actions>
</ul>
...

 Ok, lets write some CSS (you can customize ploneCustom.css for this):

#portal-personaltools-wrapper {
    background: #DEE7EC;               /* default personal bar background color */
    height: 58px;                      /* 48px images + 5 px margin (bottom + top) from li elements */
    border-bottom: 1px solid #8CACBB;
    border-top: 1px solid #8CACBB;
}

#portal-personaltools {
    float: right;
    border: none;
}

#portal-personaltools li {
    float: left;
    margin: 5px 0;
    padding-left: 1em;
}

#portal-personaltools li a {
    /* here we use 48px by 48px pngs, but you can use whatever images you want */
    padding-left: 48px;
    height: 48px;
    display: block;
    line-height: 48px; /* remove this line if you don't want the text vertical aligned */
}

#user-logout {
    background: transparent url(user-logout.png) no-repeat;
}

#user-name {
    background: transparent url(profile.png) no-repeat;
}

#user-name img {
    display: none;
}

Repeat this for all actions you want to customize. Use Firebug to get all the neccessary ids. Place the images defined in the CSS code above in the custom folder (just if you don't want to write a theme product for this - if you're doing more changes then you probably should).

If you want to hide the text for the elements, just add this line to your CSS code (in the #portal-personaltools li a definition):

    text-indent: -9999px;
    text-align: left;