At my Drupal 7.4 website with the default Bartik theme and no contributed modules, I have a big logo (715 x 280 px) and no slogan. These are my settings:


I'm trying to figure out the best way to add a sponsored link to the rectangle orange area (with the white example text "Plastikovie okna !!") at the screenshot below:

big logo

If a tilted rectangle isn't possible, I can live with a straight rectangle too.

If there is a CSS/JS solution, it is welcome too, but please tell me which CSS and JavaScript files to edit, so that the solution works at every page of my site.


Try this: use the logo as a background image and not use the default logo at all. DO show the site name by checking the "site name" box. Use CSS to position the site name over the clickable area and hide the text, and use padding-top to make a clickable area. example:

#header .inside{ 
    background: url(images/my-header-image.png) center center no-repeat #48A9E4; 
    height: 450px;
#site-name, #site-name a {
    display: block;
    height: 0!important;
    line-height: 1!important;
    overflow: hidden!important;
    position: absolute;
    top: 150px;
    left: 425px;
    padding-top: 175px;

Of course you will need to alter the values to fit your theme, but I have used this method many a time. Hope this helps!!

  • Here is an example where I used this method: futurefriends.ca except the site-name is absolute positioned instead of the 'a' which probably works better anyway. The front page is not linked, of course, so navigate inside and inspect the css. And the css file to edit would be your screen.css.
    – Danielle
    Jul 9 '11 at 18:47
  • Sorry, I just noticed that you dont want to link back to your home page... in this case use a block with a link or add the link to your page.tpl.php.
    – Danielle
    Jul 9 '11 at 18:50

When you add a logo this way, the entire image is a link back to the homepage. The only answer I can think of is to place a link over the image. using css the link will be

  • Float over the image using margin, position, etc
  • Text indent -9999px;
  • z-index higher than the logo img
  • pad the link to be the size of the image

I would probably custom code this in page.tpl.php, however it looks like you are looking for a non-custom code solution. To do this create a new custom block, with the link being its content (remember to have a input filter that will take HTML tags). Move this block into header region.

  • Maybe I could remove that default link to the homepage (since the 1st tab of the main menu links there anyway) and add an image map (don't know where)? Jul 9 '11 at 13:37
  • you could add an image map, though I dont know if they are common practice to use. I know I never use them anymore
    – iStryker
    Jul 9 '11 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.