click able header

bk4242 · Member · Sep 17, 2009 at 1:37 am
Copy link

Add topic to favorites
I want to make my banner header click able so it could go to another site.

http://areyouinthatmoodyet.com/

The blog I need help with is: (visible only to logged in users)
palmbeachphotography · Member · Sep 17, 2009 at 2:36 pm
Copy link
I have the same theme and would also appreciate know how to get
this done. Please let me know if you find out. Thanks.
[email removed – please don’t feed the spambots]
husdal · Member · Sep 17, 2009 at 4:00 pm
Copy link
It is not possible to make the header clickable.
panaghiotisadam · Member · Sep 17, 2009 at 4:14 pm
Copy link
I don’t see what use this is; anyway, do you want the other site to show up in place of your blog or open in a new window?

@palmbeachphotography: 1) Please link to your blog when asking questions here. 2) Giving your mail here is a gift to spammers (I’ll notify mods so they remove it).
panaghiotisadam · Member · Sep 17, 2009 at 4:15 pm
Copy link
Ah sorry, didn’t see husdal’s reply before posting mine: it is possible.
husdal · Member · Sep 17, 2009 at 4:24 pm
Copy link
panaghiotisadam…how? CSS?
panaghiotisadam · Member · Sep 17, 2009 at 4:32 pm
Copy link
No CSS: transparent linking image superimposed on the header.
husdal · Member · Sep 17, 2009 at 4:40 pm
Copy link
Oh…IC. Is that mentioned somewhere on wpbtips?
panaghiotisadam · Member · Sep 17, 2009 at 4:49 pm
Copy link
No. I had that idea and worked it out in response to a similar question in the forum. It was for another theme, that’s why I don’t link to that reply. (And I’ll probably post such things on wpbtips too sooner or later.)
bk4242 · Member · Sep 17, 2009 at 5:05 pm
Copy link
@panaghiotisadam if can be done how would i go about doing it what code do i need to put in
devblog · Member · Sep 17, 2009 at 5:07 pm
Copy link
to be more specific, you don’t require the CSS upgrade, but you do need the use of inline CSS which, without it, wouldn’t be possible to accomplish (provide it that the theme allows it).
panaghiotisadam · Member · Sep 17, 2009 at 6:22 pm
Copy link
@bk4242: You didn’t answer my question – new window or not?

If you want the link to open in a new window, you can put this in a text widget:
```
<div align="center" style="width:100%;top:-182px;left:0;position:absolute;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);z-index:11;">
<a href="URL_OF_OTHER_SITE_HERE" target="_blank"><img border="0" src="URL_OF_ANY_IMAGE_HERE" width="759" height="149"></a>
</div>
```
If not, remove the target-blank part of the code.

@devblog: Yes of course, that’s what I meant by “no CSS”. (And I guess you can improve on the above solution.)
devblog · Member · Sep 17, 2009 at 6:34 pm
Copy link
I haven’t tested it, but I would constrain the div dimensions to the image’s, like this:
```
<div  style="width:759px; height: 149px; top:-182px;left:0;position:absolute;-moz-opacity:0;opacity:0;z-index:11;">
<a href="URL_OF_OTHER_SITE_HERE" target="_blank"><img border="0" src="URL_OF_ANY_IMAGE_HERE" width="759" height="149"></a>
</div>
```
and I’d play with the “top” and “left” values to position it where it’s supposed to go.

Also, it is possible that “filter:alpha(opacity=0)” will get stripped out since it’s not a standard property… it’s Microsoft’s. The same might happen with the “-moz-opacity:0” property.

Also, “filter:alpha” is used to “force” IE6 to display .png files with 24-bit alpha properly.
bk4242 · Member · Sep 17, 2009 at 7:09 pm
Copy link
thank you… also can the same code be used if i wanted to make the background click able to…
panaghiotisadam · Member · Sep 17, 2009 at 7:10 pm
Copy link
Ah thanks.

– So filter-alpha is practically unnecessary.

– I tried the code before posting (had to, in order to find the proper top, left etc. values): nothing gets stripped out.

– Your version of the div dimensions works the same – no further tweaking of the numbers needed. (I had adopted the 100% version as a general solution: otherwise I think in some themes the object won’t stay in place if you drag the browser window to make it wider or narrower.)
devblog · Member · Sep 17, 2009 at 7:45 pm
Copy link
I had adopted the 100% version as a general solution: otherwise I think in some themes the object won’t stay in place if you drag the browser window to make it wider or narrower.

Very nice! I think that’s a good solution when you don’t have the CSS upgrade and therefore can’t add a “position: relative;” to the parent element, which in most cases is “#wrapper”. When I can, I’ll test that further.

bk4242,

To make the background clickable you’d have to do something like this:
```
<div align="center" style="width:100%;top:-182px;left:0;position:absolute;z-index:11;">
<a href="URL_OF_OTHER_SITE_HERE"  style="display: block; width:759px; height: 149px"></a>
</div>
```
try that.
bk4242 · Member · Sep 17, 2009 at 8:56 pm
Copy link
@devblog no its not working the code only works on the header. i want to make the back ground click able..
devblog · Member · Sep 17, 2009 at 9:07 pm
Copy link
are you talking about making the page background clickable?
bk4242 · Member · Sep 17, 2009 at 9:17 pm
Copy link
@devblog yes
devblog · Member · Sep 17, 2009 at 9:29 pm
Copy link
It’s your blog, but why would you want to do that? The functionality you want to implement is odd, besides some, if not most, of your readers may find it really annoying. I mean, linking the header to your home page should suffice, don’t you think?

In all my years of web development I’ve never seen a page background used as a navigational element linked to the homepage. Background are backgrounds… they shouldn’t be utilized for navigational purposes.

No items found.