WordPress.com

1. limetreefruits
   Member
   Oct 1, 2012, 4:32 PM

   Hello again,
   I just moved from Twenty Eleven to Retro-fitted as I found out on 20-11 the header could not be clickable and the widgets wouldn't never show on individual posts.

   Anyway, I was pretty close to the design I wanted there and now am trying to achieve something similar on this new theme.

   How can I make have my image header without cropping it and bringing it down a little bit so it touches the red bar?

   Thanks a lot in advance!

   The blog I need help with is limetreefruits.com.

2. designsimply
   Staff
   Oct 1, 2012, 9:11 PM

   Retro-fitted looks pretty cool. :)

   How can I make have my image header without cropping it and bringing it down a little bit so it touches the red bar?

   You'll need to replace the header set on the Appearance → Header page with CSS manually.

   First, upload a custom header image of the size you want to your media library and get the URL.

   Then add this to your Appearance → Custom Design → CSS editor:

   #header {
   	padding-top: 0;
   	padding-bottom: 0;
   }
   #branding {
   	background: transparent url(YOUR_IMAGE_URL) 0 0 no-repeat;
   	width: YOUR_IMAGE_WIDTH;
   	height: YOUR_IMAGE_HEIGHT;
   	padding: 0;
   }

   Replace YOUR_IMAGE_URL with the URL of the image you uploaded before. Replace YOUR_IMAGE_WIDTH with the width of that image and YOUR_IMAGE_HEIGHT with the height of that image.

3. limetreefruits
   Member
   Oct 1, 2012, 9:28 PM

   Looks awesooome *singing voice*

   Thank you so much for all your help!

4. limetreefruits
   Member
   Oct 1, 2012, 11:29 PM

   I am not sure what happened but the header was clickable as homepage. It is not doing that anymore.
   How can I fix this?

5. designsimply
   Staff
   Oct 2, 2012, 12:50 PM

   The link goes away if you turn off header text on the Appearance → Header page. You can add it back with a little CSS though. Try adding this:

   #site-title {
   	display: block;
   }
   
   #branding #site-title a {
   	display: block;
   	width:1055px;
   	height:229px;
   	text-indent: -9999px;
   	text-alignment: left;
   }

6. limetreefruits
   Member
   Oct 2, 2012, 4:45 PM

   Excellent! Everything is working now.
   Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.