Support » Themes and Templates » Header – Add Hyperlink to Logo

  • Resolved rob26r

    (@rob26r)


    In the banner of my Canyon theme I would like to make my “Brew City Auction & Pawn” a hyperlink back to my home page. My web site is http://www.brewcityauctionpawn.com. So I was watching a tutorial from the youtube video (http://www.youtube.com/watch?v=HV0gaIMaX9A) but I am lost because my Canyon theme Header.php file does not have the code he is referring to in his video. The relevant part of the video that contains the code starts at 5 minutes and 45 seconds.

    I can get the code (either HMTL or CSS) from the image-map web site but I don’t know where to paste it. Any thoughts?

    Thanks.

    Rob

Viewing 15 replies - 1 through 15 (of 20 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    It sounds as though you’ll need to make a Child Theme if you haven’t already. Have you?

    I am using a child theme.

    The CSS code from image-map is:

    <style type=”text/css”>
    dl.image_map {display:block; width:946px; height:201px; background:url(http://www.image-maps.com/uploaded_files/3201212311202544_BCAP%2012%2030.jpg); position:relative; margin:2px auto 2px auto;}
    a.LINK0 {left:10px; top:10px; background:transparent;}
    a.LINK0 {display:block; width:600px; height:0; padding-top:154px; overflow:hidden; position:absolute;}
    a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
    a.BLINK {left:942px; top:197px; background:transparent;}
    a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
    a.BLINK:hover {background:black; border:1px dashed white; color:white; font-size:9px;}
    </style>

    <dl class=”image_map”>
    <dd></dd>
    <dd>Mapped @ Image Mapper</dd>
    </dl>

    <!– Image map text links – Start – If you do not wish to have text links under your image map, you can move or delete this DIV –>
    <div style=”text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:946px;”>
    Untitled
    | Image Map
    </div>
    <!– Image map text links – End – –>

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Does it need to be an image map, i.e will there be more than one link?

    I am using image map because I thought it was the easiest way. Yes I will have more than one link at some point.

    I am open to trying other methods…

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    It looks like you ought to put your image map code below this;

    <div id="head-wrap" class="head-wrap-bg">

    but above this

    <div id="head-text">

    If you haven’t got your header.php file within your Child Theme already,
    – Make a copy of header.php from your theme
    – Move it to your Child Theme directory
    – Edit the header.php file from within the Child Theme

    Odd – I don’t see the code you have referenced in my header.php file that I copied over to my child theme.

    I see:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div class="container_main">
      <div class="container_12">
        <?php get_template_part( 'custom', 'header' ); ?>
        <?php get_template_part( 'primary', 'menu' ); ?>

    [please mark any posted code – http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    I found something similar in my custom-header.php.

    Maybe it goes somewhere here?

    <?php
    $header_textcolor = get_header_textcolor();
    if( ( !empty( $header_textcolor ) && $header_textcolor != 'blank' ) ):
    $head_wrap_bg_class = ( get_header_image() )? 'head-wrap-bg' : '';
    ?>    
    
    <div class="grid_12">
      <div id="head-wrap" class="<?php echo $head_wrap_bg_class; ?>">
    	<div id="head-text">
    	  <span class="site-name"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
    	  <span class="site-description"><?php bloginfo( 'description' ); ?></span>
    	</div> <!-- end of #head-text -->
      </div> <!-- end of #head-wrap -->
    </div>
    <div class="clear"></div>
    
    <?php
    elseif( get_header_image() ):
    
    if ( function_exists( 'get_custom_header' ) ) {
    
    	$header_image_width  = get_custom_header()->width;
    	$header_image_height = get_custom_header()->height;
    
    } else {
    
    	$header_image_width  = HEADER_IMAGE_WIDTH;
    	$header_image_height = HEADER_IMAGE_HEIGHT;
    
    }
    ?>
    
    <div class="grid_12">
      <div id="head-wrap">
    	<div id="head-image">
    	  <a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
    	</div> <!-- end of #logo -->
      </div> <!-- end of #head-wrap -->
    </div>
    <div class="clear"></div>
    
    <?php endif; ?>

    [please remember to mark any posted code – the above code is corrupted – http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Yes, near the top of the code you should find the code I referenced prior to this post.

    Andrew – Thanks for you help so far. Almost there I think.

    The good news is that the hyperlink is working but I have 2 headers. Any thoughts on how to adjust this?

    Below is the code:

    <?php
    $header_textcolor = get_header_textcolor();
    if( ( !empty( $header_textcolor ) && $header_textcolor != ‘blank’ ) ):
    $head_wrap_bg_class = ( get_header_image() )? ‘head-wrap-bg’ : ”;
    ?>

    <style type=”text/css”>
    dl.image_map {display:block; width:946px; height:201px; background:url(http://www.image-maps.com/uploaded_files/3201212311202544_BCAP%2012%2030.jpg); position:relative; margin:2px auto 2px auto;}
    a.LINK0 {left:10px; top:10px; background:transparent;}
    a.LINK0 {display:block; width:600px; height:0; padding-top:154px; overflow:hidden; position:absolute;}
    a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
    a.BLINK {left:942px; top:197px; background:transparent;}
    a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
    a.BLINK:hover {background:black; border:1px dashed white; color:white; font-size:9px;}
    </style>

    <dl class=”image_map”>
    <dd></dd>
    <dd>Mapped @ Image Mapper</dd>
    </dl>

    <!– Image map text links – Start – If you do not wish to have text links under your image map, you can move or delete this DIV –>
    <div style=”text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:946px;”>
    Untitled
    | Image Map
    </div>
    <!– Image map text links – End – –>

    <div class=”grid_12″>
    <div id=”head-wrap” class=”<?php echo $head_wrap_bg_class; ?>”>
    <div id=”head-text”>
    <span class=”site-name”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></span>
    <span class=”site-description”><?php bloginfo( ‘description’ ); ?></span>
    </div> <!– end of #head-text –>
    </div> <!– end of #head-wrap –>
    </div>
    <div class=”clear”></div>

    <?php
    elseif( get_header_image() ):

    if ( function_exists( ‘get_custom_header’ ) ) {

    $header_image_width = get_custom_header()->width;
    $header_image_height = get_custom_header()->height;

    } else {

    $header_image_width = HEADER_IMAGE_WIDTH;
    $header_image_height = HEADER_IMAGE_HEIGHT;

    }
    ?>

    <div class=”grid_12″>
    <div id=”head-wrap”>
    <div id=”head-image”>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”<?php header_image(); ?>” width=”<?php echo $header_image_width; ?>” height=”<?php echo $header_image_height; ?>” alt=”<?php bloginfo( ‘name’ ); ?>” />
    </div> <!– end of #logo –>
    </div> <!– end of #head-wrap –>
    </div>
    <div class=”clear”></div>

    <?php endif; ?>

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Sorry, I’m not sure what you mean by “2 headers”.

    My default header is set to nothing. Figuring the code would set the header. If you see my site I have the blank header and the header from the code. http://Www.brewcityauctionpawn.com

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I think I follow you. You may resolve this by adding;

    #head-wrap {
     display: none;
    }

    I am guessing I would enter this on the style.CSS or at the bottom of the custom header?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Yes, your guess is correct for the style.css file. Make sure you edit the style.css file within your Child Theme directory and not the original theme directory.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Header – Add Hyperlink to Logo’ is closed to new replies.