WordPress.org

1. CKS
   Member
   Posted 1 year 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

2. moshu
   Member
   Posted 1 year ago #

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

3. ChristineB
   Member
   Posted 1 year 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.

4. taeran
   Member
   Posted 1 year 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

5. michaeljphall
   Member
   Posted 1 year 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

6. marklaflamme
   Member
   Posted 11 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.

7. Fberheim
   Member
   Posted 7 months 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

8. Gene53
   Member
   Posted 4 months ago #

   Hey, thanks, exactly what I was looking for.

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

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

9. elitesalesgroup
   Member
   Posted 4 months ago #

   Thank you for sharing this extremely useful bit of information.

Topic Closed

This topic has been closed to new replies.