Link header image to home page

chrisefranklin · Member · Feb 16, 2012 at 8:04 am
Copy link

Add topic to favorites
I would like to link my header image to my home page. I do have the CSS upgrade. Assistance will be appreciated!

The blog I need help with is: (visible only to logged in users)
fairegarden · Member · Feb 16, 2012 at 5:02 pm
Copy link
I am also interested in this. Having the link overlay the photo?
timethief · Member · Feb 16, 2012 at 5:16 pm
Copy link
@chrisefranklin
All CSS editing is theme specific. Your theme on the blog linked to your username is Modularity Lite and the blog title is linked to your home page. Staff will assist you when they can but you may wish to search the Modularity Lite threads and see if the same question has been asked and answered previously.
timethief · Member · Feb 16, 2012 at 5:19 pm
Copy link
@fairegarden
All CSS editing is theme spefic and the blog linked to your username is not using Modularity Lite. It’s using ChaoticSoul and the blog title is linked to your home page. I Will you please start your own thread so you do not create confusion in this one? here’s the link https://en.forums.wordpress.com/forum/css-customization#postform
fairegarden · Member · Feb 16, 2012 at 5:30 pm
Copy link
Sorry!!!!!
timethief · Member · Feb 16, 2012 at 5:32 pm
Copy link
Not to worry. :) Creating a new thread is easy, just click the link provided.
designsimply · Member · Feb 16, 2012 at 5:47 pm
Copy link
How to do this will depend on your theme. I see that http://chrisefranklin.wordpress.com/ uses the Modularity Lite theme and has some custom CSS already. Here’s some CSS you can add to approximate what you already have except it extends the clickable area from the title over the top of the header image.

You should test it out to make sure it works as expected. Here’s the code to try out:
```
#top {
  height: 40px;
}
#top div.main-nav {
  top:235px;
}
#header-image {
  display: none;
}
#masthead h4 a {
  display: block;
  width: 950px;
  height: 270px;
  background: url(http://chrisefranklin.files.wordpress.com/2012/02/blogheader1.jpg) no-repeat left 70px;
  padding-bottom: 40px;
  border-bottom: 1px solid black;
}
.container-inner {
  padding-top: 270px;
}
```
chrisefranklin · Member · Feb 17, 2012 at 12:49 pm
Copy link
@designsimply – Thanks so much, I was able to simply copy & paste the code and it worked like a dream! Clever workaround to the problem!

@timethief – Thanks for your input as well!
designsimply · Member · Feb 17, 2012 at 10:24 pm
Copy link
Yay! Cheers :)

No items found.