Clickable Header

  • Resolved CKS

    (@cks)


    16 years, 3 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 https://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)

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

    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:

    https://codex.www.ads-software.com/Designing_Headers

    This seems to work to make the entire header clickable:

    <div id=”header”<?php modmatHeaderImage(); ?> onclick=”location.href=’https://siteaddress/&#8217;;” 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.

    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=’https://www.willitchangeyou.com/&#8217;;” style=”cursor: pointer;”>

    (style.css)
    /* page header */
    div#header{text-align:left;height: 104px; background: url(‘https://www.webpagegoeshere.com/header.jpg&#8217;) 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
    https://www.willitchangeyou.com

    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.

    https://www.michaeljphall.com

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

    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=’https://www.YourSite.com/&#8217;;” style=”cursor: pointer;”>

    THANK YOU!

    https://www.webfavorites.no

    Hey, thanks, exactly what I was looking for.

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

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

    Thank you for sharing this extremely useful bit of information.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Clickable Header’ is closed to new replies.