How to hyperlink header image in MistyLook theme?

• 

  shonshon8 · Member · Sep 20, 2010 at 1:28 am

  • Copy link
  • Add topic to favorites

  Hi, my question is how do I hyperlink my header image to the homepage? The theme I’m using is MistyLook. I’m in the process of getting rid of the tabs above my custom header image, but need to be able to link back to my homepage! Any suggestions much appreciated; thanks!

  Here is the link:
  http://shonshon8.wordpress.com

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 20, 2010 at 6:08 am

  • Copy link

  First off, go to settings > reading and decrease the number of posts to show on blog pages to 3 maximum. You have way too many images on the main page and it takes for ever to load. I gave up with my wireless connection after 3 minutes.

  That is why I can’t give you any help on this. I’m not going to waste my limited bandwidth allowance.

• 

  panaghiotisadam · Member · Sep 20, 2010 at 10:31 am

  • Copy link

  It’s possible to make the header image clickable (even without the CSS upgrade), but many users don’t know that the header may work as a link back home. Why not add a Home link to your list of pages instead? If you’d like that, see here, Note 3:

  Page tabs as extra links

• 

  shonshon8 · Member · Sep 20, 2010 at 5:10 pm

  • Copy link

  To thesacredpath, yes, I was also trying to find a way to reduce the # of posts on my blog. Thanks for that.

• 

  shonshon8 · Member · Sep 20, 2010 at 5:16 pm

  • Copy link

  Hi panaghiotisadam, I will try what you suggested; thanks! However, any tips on how to hyperlink the header in MistyLook would also be much appreciated. I’d like to cover both bases!

• 

  panaghiotisadam · Member · Sep 20, 2010 at 7:28 pm

  • Copy link

  My no-CSS-upgrade solution is an invisible linking rectangle in the dimensions of the header image, placed exactly in front of it. For the standard version of the theme, that would mean putting this in a text widget:

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

  But you’ve changed the dimensions, so you’ll have to change the numbers. The width and height of the inside div should be those of your header image; if you can’t calculate the proper top and left numbers for the outside div, try this first (a red rectangle):

  <div align="center" style="width:100%;top:73px;left:0;position:absolute;z-index:11;">
  <a href="YOUR BLOG URL HERE">
  <div style="background-color:#f00;width:760px;height:190px;">
</div></a>
  </div>

  Adjust the numbers till it falls in place, then delete the bg color.

  Thesacredpath or hallluke will probably be able to give you the CSS-upgrade variant of this solution or suggest an alternative one.

• 

  hallluke · Member · Sep 21, 2010 at 12:34 am

  • Copy link

  The code below should hide your existing header image, then add that image to your blog title link so it is clickable and finally shift the RSS feed and other info back above it again. Let me know if you have any problems.

  #container {position:relative;}
  #container #feedarea {position:absolute; padding:0; right:25px;}
  #container #headerimage {display:none;}
  #container #header {height:181px; width:950px; margin:50px 25px;}
  #container #header h1 {display:block; margin:0;}
  #container #header a {display:block; text-indent:-999em; background-image:url("http://shonshon8.files.wordpress.com/2009/12/leopard-print-bkgd-red_950pixels.jpg"); height:181px; width:950px;}