Retro-fitted: Header

limetreefruits · Member · Oct 1, 2012 at 4:32 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
designsimply · Member · Oct 1, 2012 at 9:11 pm
Copy link
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.
limetreefruits · Member · Oct 1, 2012 at 9:28 pm
Copy link
Looks awesooome *singing voice*

Thank you so much for all your help!
limetreefruits · Member · Oct 1, 2012 at 11:29 pm
Copy link
I am not sure what happened but the header was clickable as homepage. It is not doing that anymore.
How can I fix this?
designsimply · Member · Oct 2, 2012 at 12:50 pm
Copy link
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;
}
```
limetreefruits · Member · Oct 2, 2012 at 4:45 pm
Copy link
Excellent! Everything is working now.
Thanks so much for your help!

No items found.