Making the header image clickable
-
Hello,
I’ve followed the various threads here to make my header image clickable. The info in this thread seems to work somewhat:
https://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.
The blog I need help with is: (visible only to logged in users)
-
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.
-
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?
-
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).
-
-
panaghiotisadam:
I just found your advice through search, and had to say “THANKS” for solving my problem as well!
Lisa LR&R
-
-
-
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?
-
@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.
-
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.
- The topic ‘Making the header image clickable’ is closed to new replies.
WordPress.com Forums 