Clickable Plone Header

This is one of those little nags. When I migrated to the latest plone, I decided I was going to do as little customization to the templates as possible, relying instead on using PloneCustom.css to make the changes I want. But that meant NOT making the top “logo” of my site clickable with an anchor link, or so I thought. I wanted to do that because it’s a common feature of a site – click the logo at the top, return to the site home page. But some other work I’ve been doing recently led me to an interesting solution – using javascript to make the top <span> tag clickable.

This is a no-brainer to developers who have a lot of CSS and javascript experience.  In the Header file, the portal top is identified by id=portal-top and so in the CSS file, it’s noted at #portal-top.  I wanted the top of the page to look like it was clickable, so I added a line to the style for #portal-top that said

cursor: pointer;

so that when someone mouses over the top logo, they get a pointer, just like over an anchor link.  Then I edited the Header file (which of course what I was trying not to do with an anchor link) where the <span id=portal-tab…> was and added a javascript reference

onClick=”document.location.href=’http://www.ofaolain.com’; return false”

which can turn a <div> or <span> tag into a clickable element.  I can see some benefits to doing this but mostly I just think it’s an interesting way to make something happen.

I think in the end, it’s encouraged me that the best way to do this is to just add the blasted anchor link and then I get the effect without worrying about visitors having javascript turned on or not!

Leave a Reply

Your email address will not be published. Required fields are marked *