Hi all,

The main (=blue) part of my zen sub-theme header...

http://tinyurl.com/3cjktpp

...links to home but I need the header to have a second image linking to a second (external) url. I have added the house image in the css =

#header {
background: url("../images/house.jpg");
background-position: center;
}

Can I make the house image a clickable link or is there a better way to do this eg with blocks?

Thank you

CommentFileSizeAuthor
#5 header screenshot2.jpg25.39 KBjuc1
#1 Zen regions.jpg38.54 KBjuc1

Comments

juc1’s picture

StatusFileSize
new38.54 KB

Hi all,

I am just wondering is the logo page element (sites/default/files/zen_logo.jpg) part of the 'header' region or does the 'header' region start only after / below the logo, like the attached image (admin/build/block) seems to show?

thank you

shruti.sheth’s picture

Hello,
One of the ways for making two image clickable links in the header region can be as follows,

Steps :
1. Add your images in themes/custom/your_theme/images/
2. Create a block new block
3. In the body of the block add the following code and select the 'php code' as your input format
Please Note:- in the following code replace "image1.jpeg" and "image2.jpeg" with your image name and "path for image 1" and "path for image 2" with the link path for each image respectively.

<?php
$img_path= base_path() . path_to_theme();
?>

<a href="path for image 1"/> 
<img src="<?php print $img_path ?>/images/image1.jpeg"  title="" alt="" />
</a>

<a href="path for image 2"/> 
<img src="<?php print $img_path ?>/images/image2.jpeg"  title="" alt="" />
</a>

4. Enable this block in the header region

Hope this helps!

Regards,
Shruti Sheth

shruti.sheth’s picture

Hello,
@Juc1#1, The logo page element is a part of 'header' region.

Regards,
Shruti Sheth

juc1’s picture

@ shruti.sheth, thanks for your reply.

I wonder if I can do this with CSS and without the need for PHP.

http://tinyurl.com/3cjktpp

The blue logo is floated left and leaves room for a second block on the right hand side of the header region. The facebook icon is a block placed in the header region but it is appearing below the blue logo instead of on the same level. Can I use CSS to move the facebook block to the empty space on the right of the blue logo?

thank you

juc1’s picture

StatusFileSize
new25.39 KB

In case it's not clear, I want to move the facebook block to the top right of the header like the attached screenshot.

Thanks

iantresman’s picture

If you haven't done so already, I recommend that you use Firefox with the Firebug plug-in. Once enabled, click HTML and the Inspection button, so that Firebug will let you inspect the CSS around the image element. I suspect a combination of float:right<code> and <code>margin-top: -100px will do what you want. I then use the CSS Injector module to add the extra CSS.

iantresman’s picture

Taking a look at your Web page, the following seems to do the trick:

#block-block-21 {
    border: 3px solid maroon;
    float: right;
    margin-top: -100px;
}
juc1’s picture

@ iantresman, awesome thanks, it was the negative margin that I was missing.

Thank you

johnalbin’s picture

Component: CSS/HTML markup » layout.css
Status: Active » Closed (fixed)