Adding image header to P2

bigurn · Member · Jun 21, 2009 at 2:16 pm
Copy link

Add topic to favorites
I’ve searched extensively for an answer to this (both here and on the net generally) and have struck out so far.

I just applied the P2 theme to my blog and I love it. But I miss my custom image header and P2 doesn’t have that option. Does anyone have the specific code I can add to the CSS stylesheet that will let me put it back in? Specifically, I’d like to add an image just to the right of the title block.

The only answers I’ve gotten to this are for self-hosted blogs. I can’t find a solution for a wordpress.com blog.

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 21, 2009 at 2:17 pm
Copy link
We need a link to the blog please.
bigurn · Member · Jun 21, 2009 at 2:31 pm
Copy link
sorry…always forget that.

middayramble.wordpress.com
thesacredpath · Member · Jun 21, 2009 at 2:57 pm
Copy link
Under #header, #footer the width is set to 1002px, and to keep things looking right with the theme, you should keep your header image at that width. Height though can be adjusted. I used 120px in the example below, but you can change that if you wish. You will want to size your header image exactly, and then upload it to your media library, take the URL of that image and put it where “URLofheader” is.

First off, you are going to have to add the following:
```
#header {
background: transparent url(URLofheader) no-repeat scroll 0 0;
height: 120px;
}
```
Secondly, you are going to want to make the background for the title and tagline transparent most likely by adding the stuff below.
```
#header .sleeve {
background:transparent none repeat scroll 0 0;
}
```
Add only these items to the CSS edit window and make sure that “add to existing…” is selected, preview things to make sure it looks right, and then when satisfied click “save.”
bigurn · Member · Jun 21, 2009 at 3:01 pm
Copy link
i’m going to give this a try right now…THANK YOU
thesacredpath · Member · Jun 21, 2009 at 3:05 pm
Copy link
You’re welcome.
bigurn · Member · Jun 21, 2009 at 3:07 pm
Copy link
That’s definitely working. But is there a way to separate the image from the title/tagline box? I’d like to keep them where they are, and just have the image to the right. I added a “margin-left” to that code you gave me, but the image is taking the title box with it.

thanks again!
thesacredpath · Member · Jun 21, 2009 at 3:12 pm
Copy link
Try adding the following and then adjusting the margin left more negative (I just put -10px in as a placeholder.
```
.sleeve {
margin-left: -10px;
}
```
bigurn · Member · Jun 21, 2009 at 3:22 pm
Copy link
Got it…but I had to add #header before .sleeve

You’ve given me just enough info to learn how CSS works. You’re teaching a man to fish. :-)

THANKS!
thesacredpath · Member · Jun 21, 2009 at 3:23 pm
Copy link
You’re welcome.

No items found.