[triangle-zpug] Can I make my site logo an image map?

Rick DeNatale rick.denatale at gmail.com
Sat Mar 18 20:19:14 CET 2006


On 3/17/06, Chris Calloway <cbc at unc.edu> wrote:
> Rick DeNatale <rick.denatale at ...> writes:
> > I'm using plone to set up a web site for the "Carolinas+" region of
> > the International Plastic Modelers Society.  I haven't gone public
> > with it yet, but the url is
> > http://ipmsr12.denhaven2.com
> >
> > My logo is a map of the Carolinas with stars representing the location
> > of the chapters in the region.  I've had my chapter contacts have a
> > look, and it's been suggested that it would be nice if those stars
> > could be used for navigation.
> >
> > I'd like to have a label pop up with the name of the chapter when the
> > mouse rolled over one of the stars, and have clicking on a star
> > navigate to the folder for that chapter.
> >
> > Is this easy/hard to do, any suggestions?
>
> Not too hard.
>

> Realize that the portal logo is normally set as a background image in CSS. That
> makes it kind of magic (image replacement in CSS). But, of course, background
> images in CSS are not imagemaps. So first, we have to turn off the CSS which
> renders the portal logo as a background image of some tag in our main_template.
>
> The CSS id we are looking for is #portal-logo. You can find that by using
> FireFox Developer Tools while looking at your site. Then you can find where that
> CSS id is by searching the portal_skins folder in the ZMI. It's in
> portal_skins/portal_styles/public.css:
>
> #portal-logo {
> background: url(&dtml-portal_url;/&dtml-logoName;) no-repeat;
> border: 0;
> margin: 0.75em 0em 0.75em 1.5em;
> padding: 0;
> }
>
> So there's some DTML which fetches the value of logoName from baseProperties,
> which you've presumably set to your logo image already since it is displaying.
> The the CSS is *dynamically* rendered with that value for a background image of
> the portal logo.
>
> Wow, Plone is cool. Dynamic CSS. Who knew?
>
> So we need to turn that portal logo off since we want to use an imagemap instead
> of a background image:
>
> #portal-logo {
> border: 0;
> margin: 0.75em 0em 0.75em 1.5em;
> padding: 0;
> }
>
> Of course, we don't want to do that by customizing public.css in the ZMI. That
> wouldn't be manageable site code. We couldn't tar it up and distribute to a
> customer. We couldn't put it under version control. What we'd want to do is
> create a site skin product which registers a CSS which overrides #portal-logo
> with the css above.
>
> If you want to write a site skin product, there's plenty of tutorial on how to
> do this on plone.org. Or you can go to a Plone Boot Camp. :)

So this is where I'm stuck.  I tried to follow the example on plone.org
http://plone.org/documentation/how-to/creating-custom-skins
which came up when I searched for site skin product.

I downloaded and edited the MySkin product according to this page,
then installed it and everything seems okay until I try to make a
customization.  I tried to copy
/portal_skins/plone_styles/ploneCustom.css and paste it into the skin
folder that MySkin installed, but when I try the paste it fails with a
copy error saying  The object ploneCustom.css does not support this
operation.

I notice that this particular how-to says that it is outdated.  Can
you point me at a recommended one.

--
Rick DeNatale

Visit the Project Mercury Wiki Site
http://www.mercuryspacecraft.com/



More information about the triangle-zpug mailing list