Banners

I need the same thing.

Nobody willing to help us newbies??

At leat point us in the right direction.

Which banner image are you referring to? A screenshot with an outline indicating where or what you want to become a link would be helpful.

Sorry I see what you are referring to now. Give this bit of CSS a try by adding it to your local.css file.

#header-first {
  position: relative;
}

#header-first h1 a:link,
#header-first h1 a:visited {
  display: block;
  height: 400px;
  left: -130px;
  margin: 0;
  position: absolute;
  top: 0;
  text-align: center;
  width: 960px;
}

What that is doing is making the site name title link a block and setting a fixed width/height for it so the entire area acts like a link. It may need to be tweaked to fit your site but I think it will get you mostly the way there.

This worked for us, but we use a custom header image with site name in it, thus enabling site name plasters over our image.

so I added this code:

#header-first h1 a {
color:transparent;
}

this worked, but it puts a small vertical separator line in the middle of our logo. adding a font-size: 150% moved it to a decent spot, FYI.

Thanks for the tip!

UPDATE:

This worked great on firefox, but i guess IE and chrome don't like the color transparent bit, so you still see it plastered across our header...back to square one.

If you are trying to remove the text yet still have it print in your HTML you are going to have to use a method like this in the CSS:

#site-name {
  text-indent: -9000px;
}

That will move your site name off of the screen and still have it display in your HTML output. Might need to add a "display: block" to it for IE to pick it up though.

Thanks for the tip, this worked.

We also had success setting the font size to 0%, works in all browsers tested.

Hello. I would also like this functionality but I am not able to make it work given the instructions above. Specifically, I added the following to my local.css file:

#header-first {
    position: relative;
}

#header-first h1 a:link,
#header-first h1 a:visited {
    display: block;
    height: 400px;
    left: -130px;
    margin: 0;
    position: absolute;
    top: 0;
    text-align: center;
    width: 960px;
}   
    
#header-first h1 a {
    color:transparent;
}

#site-name {
  text-indent: -9000px;
}

but the banner image does not link to anything. The website is located at http://ecoop11.comp.lancs.ac.uk/. Thanks!

A very simple way to accomplish this is to wrap the entire header

<div> in an <a href> tag.
<a href="http://example.com"><div>header stuff</div></a>

Banns has the same origin meaning an official proclamation, and abandon means to change loyalty or disobey orders, semantically "to leave the cloth or flag".
Banners