WordPress.com

1. rhymeswithmagic
   Member
   Jun 29, 2009, 4:54 PM

   Hello,

   I’ve followed the various threads here to make my header image clickable. The info in this thread seems to work somewhat:

   http://en.forums.wordpress.com/topic/remove-title-and-clickable-banner?replies=2

   It’s made only part of my header clickable and you can actually see the clickable area when you click on it. A short rectangular bar becomes visible as you click on it. I’ve included the height of my header in the CSS code. Here is the code I added to make the header clickable:

   #header {
   background:url('http://i180.photobucket.com/albums/x176/RF10/jeffrey_dean_morgan_unlimited_he-3.gif');
   background-position:center;
   background-repeat:no-repeat;
   border-bottom:0 solid #c4cC91;
   height:294px;
   padding-left:-2px;
   width:100%;
   margin:0;
   }

   Is there any way to expand this so the whole header is clickable, and also, to hide the box when you click on the header?

   Here is my blog: http://jeffreydeanmorganunlimited.com

   Thanks for any help you can offer.

2. panaghiotisadam
   Member
   Jun 30, 2009, 6:15 AM

   I don't know what you can do in the CSS, but I can give an html solution. Try putting this in a text widget:
   

   <div align="center" style="width:100%;top:0;left:0;position:absolute;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);">
   <a href="BLOG_URL_HERE"><img border="0" src="HEADER_IMAGE_URL_HERE"></a>
   </div>

   This should produce a transparent (i.e. invisible but working) linking copy of your header image superimposed on the actual one.

3. rhymeswithmagic
   Member
   Jun 30, 2009, 6:14 PM

   Thanks for your help!

   This seems to work, but it only makes a very small part of the header image clickable. Is there any way to set the size or do something else so that all of the header is clickable?

4. panaghiotisadam
   Member
   Jun 30, 2009, 8:20 PM

   Ok then try this:
   

   <div align="center" style="width:100%;top:0;left:0;position:absolute;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);">
   <a href="BLOG_URL_HERE"><img border="0" src="IMAGE_URL_HERE" width="WWWpx" height="HHHpx"></a>
   </div>

   Now it can be the URL of any image. Where I've put WWW and HHH, write the actual dimensions of your header (can't give the numbers myself since you've modified the theme).

5. rhymeswithmagic
   Member
   Jul 1, 2009, 12:13 AM

   This worked like a charm!

   Thanks so much for helping me with this.

6. latherrinseandrepeat
   Member
   Aug 5, 2009, 2:14 AM

   panaghiotisadam:

   I just found your advice through search, and had to say "THANKS" for solving my problem as well!

   Lisa LR&R

7. chasdizz
   Member
   Aug 8, 2009, 12:02 PM

   this helped me as well....thanks!

8. panaghiotisadam
   Member
   Aug 8, 2009, 12:23 PM

   @rhymeswithmagic, Lisa, chasdizz: You're welcome!

9. chasdizz
   Member
   Aug 8, 2009, 7:06 PM

   this worked, but it seems as though this invisible button is offcenter. ie i can click to the left of my banner. would you happen to know how to fix this?

   http://cookinwitgrease.com

10. panaghiotisadam
    Member
    Aug 8, 2009, 7:43 PM

    @chasdizz: That's because the code I worked out and posted above was tailored to the OP's theme - won't work the same in any theme. But yours is not a wp.COM blog, so I cannot try the theme you' re using (and you shouldn't be in this forum!). You can temporarily remove the "opacity" parts of the code, so that the superimposed image becomes visible, and try changing the "top" and "left" numbers till it falls in place. Sorry I can't help more.

11. chasdizz
    Member
    Aug 9, 2009, 6:42 AM

    yeah, i find that this site tends to have more help than the org...so sometimes i look here as well for solutions (sorry)....but i figured it out.

    in the theme i was using, there was some code that was wrapping my text, so when i figured out how to change that, it changed all of the "text" on my site, putting everything in it's rightful position.

Topic Closed

This topic has been closed to new replies.