WordPress.org

1. ronchicago
   Member
   Posted 3 years ago #

   1) i have done the research and tried many things...please don't send me to " designing headers " = http://codex.wordpress.org/Designing_Headers#Making_the_Whole_Header_Clickable ;-)

   2) a very nice logo.png is on top of my blog and the default h1 is somewhere but not visible. i can see the descriptor below my logo.png and that is the desired position.

   3) i can't make the logo.png clickable ( wanting it to go " home " )

   4) here is the code, all valid. anybody see anything i am missing????

   in HEADER.PHP
   was...
   

   <div id="masthead">
           <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div class="description">
   	<?php bloginfo('description'); ?>
   	</div>
   </div>
   
   <div class="description">
   	<?php bloginfo('description'); ?>
   	</div>

   changed to...

   `<div id="masthead">
   <h1><img src="/images/image.png" alt="domain" onclick="location.href='http://domain.com/';" style="cursor: pointer;" /></h1>

   </div>`

   in STYLE.CSS
   was...
   

   h1 {
   font-size: 3em;
   line-height: 1;
   margin-bottom: 0.5em;
   }

   changed to...
   

   h1 {
   font-size: 3em;
   line-height: 1;
   margin-bottom: 0;   /* was 0.5em  9/19/08  */
   }

   was...
   

   #masthead {
   margin: 0;
   text-align: left;
   height: 55px;
   width: 700px;
   float: left;
   }

   changed to...
   

   #masthead {
   margin: 0;
   text-align: left;
   height: 55px;
   width: 700px;
   float: left;
   background:url(images/domain.png) no-repeat;  /* new line 9/19/08  it worked but not clickable */
   }

2. ronchicago
   Member
   Posted 3 years ago #

   yes! it works. here is new code...

   in HEADER.PHP
   

   <div id="masthead"><a href="http://www.domain.com" id="headerlink"></a>
   </div>

   in STYLE.CSS
   

   #headerlink{  /*  clickable works!  11/21/08  */
   display: block;
   border-style: none;  /* black border in ff */
   height: 55px;
   width: 700px;
   margin: 0;
   }

   only small detail in FF is when i click on image i get a small border ( black dotted ) that i don't get on other clickables.

3. ronchicago
   Member
   Posted 3 years ago #

   someone told me to do the following...

   "I'd never really noticed it until you said something. After doing a little research it seems to be an accessibility feature built-in Firefox for the handicapped that can't use a mouse, it allows them to see which link is highlighted. But if you want to just disable it on your top header link then you add this to your .headerlink class in your stylesheet outline-style: none;
   I would really recommend only disabling it on your header to leave your site as accessible as possible."

   it works as stated above.

4. Sarasayshi
   Member
   Posted 3 years ago #

   This is easier. http://www.smemon.com/how-to-make-a-header-image-clickable-in-wordpress.

Topic Closed

This topic has been closed to new replies.