you're reading:
Blog title, Header customization, Home/Front/Blog tab, Html & inline css codes, Links, Position absolute, Themes

Clickable header image in Vertigo

In all themes, the header image or the blog title works as a link back to your homepage.

Some themes allow you to hide the actual blog title and tagline (see list in my post Header images). That’s useful if you wish to add your own header image with the blog title incorporated in it as a graphic.

But if you do that in Vertigo, you’re left with no link back home on or near the header: the home link is the title, not the image, and the theme has no top nav menu or sidebar either (in which a Home tab would or could be included).

You can turn your whole header image into a home link by adding a Text widget to one of the footer widget areas and pasting the following code into it:

<div align="center" style="width:100%;top:-42px;left:0;position:absolute;z-index:11;">
<a href="YOUR BLOG URL HERE"><div style="width:960px;height:268px;"></div></a>

This will produce an invisible linking rectangle in front of your header image. (The middle line of this code says create a rectangle in the dimensions I’m giving you and turn it into a link to the URL I’m giving you; the outer lines say take this thing and place it where I’m telling you instead of where the code is.)

Update: For the same trick in Bueno (with no title and no top menu), see here; for the same trick in Mystique (with one sidebar right), see here.

Please don’t paste code in comments – see comment guidelines.


45 thoughts on “Clickable header image in Vertigo

  1. I am amazed at your stamina and determination to keep up with posting about all the new themes!
    As you know, I love your attention to detail!

    One thing, and I’m out of things, but this might be more accurate:

    In all themes,…

    Did you mean “in all other themes”?

    Posted by Tess | June 19, 2011, 20:56
  2. 1) As often, just a forum-reply-turned-to-post:
    And as often, just a re-application of a trick I invented long ago:
    Stamina is only required for this (that now makes it easy for me to tell if and how I can apply such tricks):

    2) No, I mean all themes, including Vertigo. In Vertigo the home link is the blog title, and you’re left with no home link if you hide the title. Obviously the post fails to make this clear, so I do need a correction please but not the one you suggested!

    Posted by Panos | June 19, 2011, 23:22
  3. be easy, you are correct.
    me: looking at trees, i sometimes miss the forrest.
    so i apologize that while i thought something was confusing, i didn’t make the accurate response.

    This would apply to other themes w/o top navigation, your position absolute solution, I mean.
    (In some themes, don’t both the header image and title work to navigate back home? Or am I once again lost in the trees?
    Too bad one can’t just use the ruby slippers from OZ to get back home…)

    Posted by Tess | June 20, 2011, 00:54
  4. No you were right, the way I’ve put it in the post is unsatisfactory. But what the heck…

    Yes, I think in some themes you get both.

    Yes, the trick can be used in other themes too (if they are listed under the first two or three categories in my post on position:absolute). But I checked before doing this post, thinking I might do a more ambitious one, and saw that there’s no other theme with the combination link=title + no top nav + no sidebar: in all other themes where link=title, there is or you can add a home link in the top nav menu or the sidebar.

    Posted by Panos | June 20, 2011, 01:12
  5. Goodness! I don’t believe I’ve heard you use that expression before:
    “what the heck!”

    I miss digg3 and especially unsleepable where you made such great work-arounds with the position absolute / relative. But as messy as my blog is now, fun as those were, I don’t think there is a way back “home” for me anymore…

    Posted by Tess | June 20, 2011, 02:15
  6. Yeah I miss our Unsleepable too. But what the heck!

    Posted by Panos | June 20, 2011, 19:04
  7. Are you changing themes? Morning After now?

    Posted by Tess | June 22, 2011, 22:07
  8. “But what the heck!”
    I’m not sure what that means?

    If I can change (for worse), then you can and this might be nice enough to get used to…

    Posted by Tess | June 22, 2011, 22:17
  9. Most obviously Morning After now – opinion urgently needed!

    Posted by Panos | June 22, 2011, 22:20
  10. Oh, you looking all dressed up now!

    Looks a bit more fun (don’t worry, still thoughtful), but the background being so dark is distracting for me. (color is nice though) Or more accurately, it makes me feel claustrophobic, as though my screen is suddenly narrower.

    So unencumbered by the thought process:
    I like having the links on the top nav bar rather than on the sidebar.
    But I miss the useful links (image size, sidebar width, codes for text widgets etc.) which I used often. And the recent posts and comments?
    (Oh, just looked at the home page view and it’s there. Shaded and sticking out a bit on the left. As are the recent posts and comments… This theme is obviously more complicated. )
    I really don’t like seeing your gravatar sliced up with “—>you’re reading:” but I guess that is part of the theme design.
    (is your gravatar darker or is it just me seeing it in a different setting?)
    Do you have custom CSS to make the nav label “Comment Guidelines” red?
    I’d like to see a more personal header image, though what you have looks nice. The misty path picture is still so fine. It wouldn’t fit there anyway… but…
    Where is the search box? I often used that on your blog as well.
    (Ha! yes, it’s on your front page now and not repeated on a post page such as this one. Don’t know that I like that. More hits for you though, what with me having to go back each time I want a peek. Usually your blog is up on a browser tab with the post I last used for advice in the forums so I can see immediately (refresh) what new comments you’ve gotten. Now I’ll have to navigate back to the front page… or is there a feed for all new comments?

    I don’t know if this was useful or not, but it is my first impression…

    Posted by Tess | June 23, 2011, 03:44
  11. Ditto on the top nave bar–easier!
    Also don’t like the way this theme messes up the header with that odd inserted text on each page.
    Hmm, no search bar on individual pages? Can that be fixed somehow? Two thumbs down, if not fixable.
    Otherwise, it’s an interesting change and gives me something to think about since I’m thinking about making the same switch.

    Posted by ELMalvaney | June 23, 2011, 05:56
  12. Maybe put the Search Bar at the top of the Primary sidebar?

    Posted by ELMalvaney | June 23, 2011, 05:57
  13. Odd that the Recent Comments wraps to two lines, but not to two full lines, so it still doesn’t show the full post name that the comment is in. Why bother wrapping if you only show one word?

    I actually kind of missed your Featured Post section because on first glance it looked like it was part of the post above–maybe a space between? Or a little more formatting within that section to clarify that they’re separate posts? Bullets?

    Posted by ELMalvaney | June 23, 2011, 06:02
  14. @Tess:

    Bg color: same as my Garland header. Retained it for the moment, might change it later – maybe make it a gradient like yours.

    Links to post lists on the top nav instead of the sidebar is one of the main reasons for the change: the one thing I hated therefore didn’t use in Garland was the top nav page tabs.

    Sliced gravatar isn’t part of the theme design, it’s part of my design – I can change it!

    No custom CSS: position absolute, my dear, position absolute!

    Now, to make things simpler: Garland or this?


    “That odd inserted text” can be removed if you wish – check my post on TMA.

    I may have to rethink where I’ve put what. Yes, the search box will show up on every page if you put it in the primary sidebar.

    And yes, thanks for the suggestion, I’ll add bullets to the FP list.

    Posted by Panos | June 23, 2011, 06:51
  15. Yes, the bg color is nice. but here it is overly emphatic. Overwhelming. Claustrophobic. Make it lighter? or a gradient. Just my opinion, but dark on the right to emphasize the sidebar would be nice. I just like gradients though.
    I really appreciate the top nav tabs. Very nice to find things when I try to answer questions in the forum.
    How many folk get to your blog via search to a specific post vs to your home page?
    I really don’t like the sliced gravatar.
    Sorry. It makes your gravatar look like a picture of the sun when it is having a solar flare! hot hot hot
    but not in a hot way that would offend Queen Victoria.
    more like an upset stomach. just my opinion: better the arrow below or beside or above.
    And the position absolute, (darling) well that probably would make only my heart throb, but even so, I love it!
    As for your header, well I said you could be more creative, but perhaps that one is right: your blog here is about WordPress.

    I liked Garland, but a change may be interesting for you. I did it (though now regret it—too much work to make pictures and tables narrower: it looks ok, though?) and this could be good. I did like Garland, but what the heck! (even though I don’t know what that means) I’m thinking the new theme will… well, make things fresh again.

    really, I need some new music.


    Posted by Tess | June 23, 2011, 08:17
  16. @Tess: Thanks!

    “How many folk get to your blog via search to a specific post vs to your home page?” I don’t know.

    You’re right about the bg. Added a discreet gradient, will see if I can improve it.

    Removed the sliced avatar too. I think I know what you mean when you say you really don’t like it:

    Music? What music?

    Posted by Panos | June 23, 2011, 14:54
  17. Yes, stripes galore in that film. and slices.

    Though for tips on interior decorating that film is better than the one I mention here:
    The chairs look really nice…

    Music playing now @chez tess:
    J. and I heard an interview on NPR with a man who got through captivity because of Mr. Cohen. Now he’s playing that and Sisters of Mercy all the time…

    OK, so back to behaving myself:
    I was picturing a right to left gradient so the sidebar would be emphasized by the dark color and the left side white so the posts appear wider, less confined. Even so, this vertical gradient is better (could be less subtle—lighter?)

    Posted by Tess | June 23, 2011, 16:37
  18. oops, I went over the number of permitted links on a comment
    bad tessie!

    Posted by Tess | June 23, 2011, 18:14
  19. How do you do a gradient bg color? Mine is too overwhelming too.

    One thing I don’t like about TMA is that the gravatars in the comments get stuck over to the left and the commenter’s name gets put at the bottom–it’s not as clear as 2010. Kind of a step backward really.

    Posted by ELMalvaney | June 23, 2011, 18:41
  20. Not Panos, but it’s an image which tiles horizontally.
    (on my blog, the background image tiles vertically)

    Posted by Tess | June 23, 2011, 19:51
  21. @T:

    Try Famous Blue Raincoat too.

    Horizontal gradient out of the question in my case: effect completely lost in lower resolution screens, where very little of the left and right bg area remains.
    I removed the sliced avatar, but I need the avatar somewhere; maybe at the beginning of the copyright notice?


    Creating a gradient is easy if you have Photoshop or another image editing application. You can also use online tools such as this:

    Posted by Panos | June 23, 2011, 20:24
  22. The gradient maker only gives me a tiny image that WP wants to make into numerous tiny little images. I do have Photoshop–how big does the image need to be though to scroll all the way down any length of screen?

    Posted by ELMalvaney | June 23, 2011, 22:15
  23. You can download the image from the gradient maker and stretch it in Photoshop. But since you have Photoshop, you don’t need that. Are you talking about a gradient that changes color from left to right or from top to bottom?

    Posted by Panos | June 23, 2011, 23:12
  24. Have you eliminated “threaded comments” or should I be going to sleep and start again in the morning?
    Or maybe my boss has decimated my brain and self confidence… lots of crit at work today. NYP! Any…whey…

    About the vertical gradient, I seem to remember making one or two (in my early Digg3 time) and somehow putting in a percent for the size rather than specifying a specific length or stretching it with photoshop. It wasn’t a fixed background. but the percent for the length was set to 100%, Maybe that was using a position absolute work-a-round, rather than the newish background images available on themes now? Is that something that could also be done with a CSS upgrade?

    So about your horizontal gradient, is it like that my “japanese cooking graphic and gradient” does not show up on lower res sites as well? hmm I don’t know how to check that?

    About your gradient, if not horizontal, try a narrow vertical stripe—or vertical gradient—(which I’ll not think of in the same way after noticing all the stripes in various scenes and objects in that eye-splitting movie) on the right side of the post page? (white or very pale color for the backbrouhd). Not so much a background as a graphic line? I’ll get used to the dark color on both sides of my wider screen, but it will still feel confining if that’s not possible. A person comes to love a friend’s face, no matter the changes.

    I removed the sliced avatar, but I need the avatar somewhere; maybe at the beginning of the copyright notice?

    Can you put your beautiful avatar before the arrow? or after it?
    (I’m being blind but where is your copywrite notice? (copyright))

    best to you

    Posted by Tess | June 24, 2011, 07:46
  25. • If you mean you’re not seeing threaded comments here, you shouldn’t be going to sleep. If you mean you recall having seen them before, then you do need some sleep! I hate threaded comments and had never enabled them.

    • Yes, you remember correctly. That was before the introduction of Appearance>Background. You would use position:absolute or position:fixed in a text widget, with width and/or height 100%. Yes, same thing possible if you have the CSS upgrade.

    • Yes it’s the same issue. You can change your resolution to check it (in Macs it’s in System Preferences > Displays), or you can get an idea by simply dragging the bottom right corner of the browser window to make the window smaller.

    • Vertical stripe on the right side of the post page? I’m afraid that’s not clear to me. You mean homepage or single post view? And you mean right side of main column or of sidebar?

    • I had tried the avatar before or after the arrow. Before doesn’t look nice, after is interesting visually but not very logical: the arrow is supposed to point to the heading, not the image. Put it below the Reference Posts box now, sort of a signature.

    Thanks again for everything!

    Posted by Panos | June 24, 2011, 17:55
  26. hmm…
    –>Assuming by the thanks:
    if you don’t mean So Long, and Thanks for All the Fish
    –>Apologies. then about the threaded comments. I am confusing you with someone else: now I do recall your dislike of threaded comments. And you are right: you get many more comments than I do, and threaded comments could get confusing. For me, with few comments and people using my contact form, lots of stuff does not get mixed together.
    –>Thank you for clarifying about the “cute junk” on my sidebar. It has taken longer for me to listen/hear than I’d like to admit. I sort of knew that, but I had not really considered it in terms of lower res viewers. Kind of a denial on my part, a kind of arrogance. GAK.
    –>gradient like this. (a biggish file, sorry) and then a gradient line on both front page and single post views via position absolute so even low res viewer would see the line. Just a graphic, a decoration for them. For me, on a higher resolution wider screen, there would be some white space, an opening, a way that my eyes can see wider space, to not be fenced by darkness on all sides. Just my opinion.
    –>To be honest, I don’t like this new theme, but trust that you have your reasons. There are some good things going on with it.
    –>You could return the favor (no necessary) by advising me on the blog for my work.
    But that would have to be not public: via email. No worry though. Your advice has already been a good benefit!

    Posted by Tess | June 25, 2011, 00:50
  27. My Photoshop knowledge doesn’t extend to creating gradients apparently. I use it for editing my photos, not for creating new art objects. I’m now working on that.

    As for the “You’re Reading” discussion, I think the “You’re Reading” doesn’t have quite the emphasis with the category links above the post title. Is that automatic or is there something you can do about that? It adds clutter, and this theme is already a little busy (in mostly good ways) that more clutter is not what is needed.

    I was looking at Vivian’s webpage, and see this cool line of author avatars. Is that something that is an option in this theme or will I need a CSS upgrade for that? Or is a HTML thing?

    Posted by ELMalvaney | June 25, 2011, 02:35
  28. @T:

    Of course I don’t mean So Long etc.!

    And of course I can “return the favor” – we’ve being doing that since your Digg3 days! But I still haven’t fixed my mail problem: can receive but cannot send.

    The image link you pasted gives a 403 – access denied response. And I still don’t understand: you mean at the right side of the main column or the right side of the whole white area?


    Same with me: I don’t like the categories above the post title. You can’t do anything about it unless you have the paid Custom Design upgrade. (Without it, I can mask the categories with a white strip, but I think this will leave too much empty space.)

    The line of avatars in Vivian’s is the Author Grid widget. Do you have other authors in your blog?

    To answer your Photoshop question, I need you to answer my previous question: gradient that changes color from left to right or from top to bottom?

    Posted by Panos | June 25, 2011, 02:54
  29. Top to bottom, like yours. I do have other authors, and I’d like to highlight that on the front page like Vivian does.

    That paid CSS upgrade almost seems like less of a good deal than just spending one-time money on a premium theme. I gather from the WP blog that they’ve made the CSS less formidable, but once I’ve made the changes, I suppose I still have to pay the annual fee or I lose everything?

    Posted by ELMalvaney | June 25, 2011, 03:25
  30. 1) If you have other authors, then the Authors widget or the Author Grid widget is a must.

    2) They’ve made CSS changes easy only as far as font families and font sizes are concerned (and only for the main elements: blog title, headings, and body text). The rest remains as formidable as ever. And yes, if you stop paying the annual fee the changes will vanish.

    3) Photoshop etc.:

    “How big does the image need to be though to scroll all the way down any length of screen?”

    I’m afraid there’s no answer to that, because monitor sizes and screen resolutions vary: height can be 500px, 600, 640, 768, 800, 840, 1050 or even more. The extremes are rare, so around 800px might be a good choice.

    So, for a simple vertical gradient from color 1 to color 2, you create a narrow png 800px high, set color 1 as your Fg color and 2 as your Bg color, paint the whole thing in color 1 with the paint bucket tool, then switch the tool to gradient, click at the top of the image, drag to the bottom, release, save if you’re pleased with the result.

    Then go to Appearance > Background, upload the image, select “Tile Horizontally” and “Fixed”, add color 2 in the Color field (so that visitors with screens larger than 800px high will see the same color below the end of the actual image), click Save changes.

    As Tess remembered, there’s a workaround you can use in a text widget, to make the image fit to the whole screen no matter what the screen resolution, but I will tell you about that tomorrow: I don’t have the time to experiment now. Are we talking about Twenty Ten or The Morning After?

    Posted by Panos | June 25, 2011, 04:08
  31. Let’s go with TMA, since that’s what I plan to switch to overnight *crossing my fingers* In the meantime, I’ll work on my new Photoshop task–thanks!

    Posted by ELMalvaney | June 25, 2011, 04:23
  32. Thanks for teaching me how to create a gradient–now nothing can stop me in my quest for world domination! :-)

    Posted by ELMalvaney | June 25, 2011, 05:56
    good LOL
    and here is champagne for world domination though great graphic design on!

    Posted by Tess | June 25, 2011, 06:48
  34. >:-)

    Posted by ELMalvaney | June 25, 2011, 07:11
  35. Sorry to spoil the drinking, but for the moment you must restrict yourself to a couple of continents only! I’ve got a high resolution screen, so I’m seeing more than 800px, and here’s what I’m seeing:

    You made the gradient fine, but you didn’t put the same hex in Appearance>Background>Color. Try this one:


    If that fails, we’ll resort to the promised workaround.

    Posted by Panos | June 25, 2011, 07:14
  36. Panos,

    The image link you pasted gives a 403 – access denied response. And I still don’t understand: you mean at the right side of the main column or the right side of the whole white area?

    I put the link to a private test blog so of course you can not see it. Idjot!!

    Is this better?

    GAK I even made a mess tonight of cooking brats. beans, macaroni, and a green veg. The onions and radishes were good, though. Actually, the mac & cheese was really good, as were the hot dogs—if only I could reproduce the inattention I applied to them again. So much to confess for my cooking blob, hey?

    Posted by Tess | June 25, 2011, 07:18
  37. That’s better, but I still don’t get it… You mean create a fade from the white to the bg color? Don’t think I’d like that, but I’ll try it later.

    The mac & cheese was really good? Makes sense!

    Posted by Panos | June 25, 2011, 07:25
  38. LOL!

    Posted by Tess | June 25, 2011, 18:46
  39. Is it my eyes or is this gradient a bit brighter?

    Posted by Tess | June 29, 2011, 16:55
  40. This gradient was brighter, because I loaded it this way:
    Then I reverted to the standard way because of this:

    By the way, check the new post for some nice songs!

    Posted by Panos | June 29, 2011, 19:38
  41. I run a Blogger site and just started a WordPress site for my 5-year old (a way to get him to write a few sentences every day, I hope). I love the layout , but I want to be able to put something into the little white boxes. I actually upgraded to a customized site, thinking that would enable me to do it, but i still can’t figure it out. I had hoped i could put widget in there, e.g., About Me, Photos, etc. Any ideas?

    Posted by goozymonster | July 14, 2011, 22:10
  42. If you mean the oblong shapes above the blog title, they’re just decorative images: you can’t put anything “in” them.

    You can add items in the header area the way I’m showing in the post, but the problem with this theme (and many others) is that their vertical positioning cannot be precise: it’s affected by the presence or absence of the grey adminbar.

    If you mean repositioning the page tabs or the widgets from the footer to the header area, it might be possible via CSS editing. But I’m on vacation now – I’m not able to experiment with this at the moment. I’ll get back to it when I can.

    Couple of other notes:
    a) We shall assume that the blog is yours, not your son’s (otherwise it’s against the TOS).
    b) Personally I don’t think an all-black theme is the best choice for him!

    Posted by Panos | July 15, 2011, 12:40
  43. Thank u so much for this tip!

    Posted by Bram de Winter | December 22, 2011, 14:43
  44. thanks for the tip! question though – I’m using it bueno and when I copy the html, only the top half of my header is clickable. Any fixes? thanks in advance!

    Posted by shannon | January 17, 2012, 07:21
  45. a) The numbers in this code are specifically for Vertigo. Bueno has different header and header image dimensions, so it needs different numbers.

    b) To be able to see where the rectangle falls when you try to make such adjustments, you can temporarily set a color to the rectangle, by changing this:
    to this:

    c) In some themes including Bueno, placing an object that way is affected by the stupid grey admin bar: for a user or a logged out user the object will show up higher. So you must take this into account and make the height of the rectangle larger than the actual height of the header image.

    In all, the code for Bueno as you’re using it (with the title hidden and with no top menu) should be as shown here:

    Posted by Panos | January 17, 2012, 14:51


author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: