Displaying the 3 As for text sizing
February 9th, 2005
The default Plone skin used to have 3 letter As at the top right corner for text sizing. These have been replaced by the words: "small text", "normal text", "large text" - as you can see at plone.org.
However, I prefer the 3 As and I wanted to use them instead. Simple you might think. I thought so too, but not so. One of the painful things about developing a web site using pages that are dynamically generated by something like Zope/Plone is that you can't look at other people's source and work out what they're doing.
I eventually *did* work out how it was done, but only after hours of trial and error and anguish, that required me piecing back together how the global_siteactions code (in /portal_skins in the ZMI) *used* to look. I did this using the Plone CVS logs on SourceForge. Not nice! I also made use of the Web Developer add-on for Firefox, which makes it easier to see what CSS styles a page is using.
In brief, the secret is to write a custom global_siteactions like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
i18n:domain="plone">
<body>
<div metal:define-macro="site_actions"
id="portal-siteactions"
tal:define="site_actions actions/site_actions|nothing;
getIconFor nocall:putils/getIconFor"
tal:condition="site_actions">
<tal:actions repeat="saction site_actions"><a
href=""
i18n:attributes="title"
tal:attributes="href saction/url;
style string:background: url($portal_url/$icon);
title title;"
tal:define="title saction/name;
icon python:getIconFor('site_actions', saction['id'], None)"
tal:condition="icon"
></a></tal:actions>
</div>
</body>
</html>
You then need to make/edit a custom plone.css stylesheet, removing all the existing styles for portal-siteactions ID styles, and replacing them with this:
#portal-siteactions {
position: absolute;
top: 11px;
right: 16px;
width: 54px;
margin: 0;
padding: 0;
z-index: 2;
}
#portal-siteactions a {
display: block;
float: left;
padding: 18px 0 0 0;
width: 18px;
height: 0px !important;
height /**/: 18px;
overflow: hidden;
}
There was lots of other stuff I changed along the way, but I think these were the important changes. I can't guarantee it though because this has taken me hours and hours of late evening work, and I'm too exhausted right now to try and retrace my steps. All to get 3 little As to appear. Would you believe it?
Potentially similar posts
- It’s got to be fun – May 2011
- The guilt and paranoia of the remote worker – November 2010
- Deleting those pesky lines in Microsoft Word – August 2010
- Preventing BBC iPlayer running all the time – November 2008
- Podcast archive – October 2008
