Clickable Header

Resolved CKS
(@cks)

17 years, 8 months ago

So I’ve read some info on the forums about making header background images clickable (links to outside of WordPress). The trouble is that I don’t even know enough CSS/HTML to do it on my own. I’m learning quickly though.

my site is http://www.cksblog.com
I’m using the Modmat template…Here’s the header CSS:

/* page header */
div#header{text-align:left;height: 104px; background: url(‘headers/defaultheader.gif’) no-repeat right top; background-color: #000; border-left: 2px solid black; border-right: 2px solid black; border-top: 2px solid black;}
div#blog-description{color: #FFF; margin: 0 0 0 15px;}

Here’s the header.PHP file:

<div id=”wrapper” class=”hfeed”>

<div id=”header”<?php modmatHeaderImage(); ?>>

<h1 class=”blog-title”>/” title=”<?php bloginfo(‘name’) ?>” rel=”home”><?php bloginfo(‘name’) ?></h1>
<div id=”blog-description”><?php bloginfo(‘description’) ?></div>
</div><!– #header –>

What’s the easiest way to go about making the header clickable?

I know that this has been posted before, I am just confused and am not sure where to go to find more help…

thanks in advance to whoever helps dig me out of this hole,
Bobby

Viewing 8 replies - 1 through 8 (of 8 total)

moshu
(@moshu)

17 years, 8 months ago

It has been posted a million times. Search for exactly that: “clickable headers”

ChristineB
(@christineb)

17 years, 7 months ago

I tried that and wasted a LOT of time reading again and again that I should search, with one post stating that I should read the 99 search results. How helpful – NOT!

A better start is here:

http://codex.wordpress.org/Designing_Headers

This seems to work to make the entire header clickable:

<div id=”header”<?php modmatHeaderImage(); ?> onclick=”location.href=’http://siteaddress/’;” style=”cursor: pointer;”>>

Is there a site where I can get WP support without being insulted at a membership forum? I’ll be glad to pay a few bucks.

taeran
(@taeran)

17 years, 7 months ago

Christine – I agree with your comments…

I also use modmat, and found a solution (I think) by bypassing the modmatheaderimage call in header.php

Here are snips from my header.php and style.css that made things work quite well…

(Header.php)
<div id=”header” onclick=”location.href=’http://www.willitchangeyou.com/’;” style=”cursor: pointer;”>

(style.css)
/* page header */
div#header{text-align:left;height: 104px; background: url(‘http://www.webpagegoeshere.com/header.jpg’) no-repeat left top; background-color: #000; border-left: 15px solid black; border-right: 2px solid black; border-top: 2px solid black; border-bottom: 15px solid black;}

– Ross
http://www.willitchangeyou.com

michaeljphall
(@michaeljphall)

17 years, 6 months ago

My problem stems from this onclick event rendering my search bar inoperable. The onclick event works perfectly, but because the search bar is included in the “header” attempting to input text in the search will simply return the user to “home.”

I think I may need to define an area for this onclick event, but… i don’t know how.

http://www.michaeljphall.com

marklaflamme
(@marklaflamme)

17 years, 4 months ago

The always helpful moshu. If you were on fire and asked him for help, he’d direct you to a fire safety website.

fberheim
(@fberheim)

17 years ago

FINALLY ! ! ! !

Clickable header!

I have been searching for days, and tried tons of different codes i my design!

Finally a genius came up with a simple way, and code:

Place this code in your Header.php
I placed it right below the </head>:

<div id=”header” onclick=”location.href=’http://www.YourSite.com/’;” style=”cursor: pointer;”>

THANK YOU!

http://www.webfavorites.no

Gene53
(@gene53)

16 years, 9 months ago

Hey, thanks, exactly what I was looking for.

You may also change:
http://www.YourSite.com/

To:
<?php echo get_option('home'); ?>/

elitesalesgroup
(@elitesalesgroup)

16 years, 8 months ago

Thank you for sharing this extremely useful bit of information.