Outreach theme: crazy header!

[styzer]

Hi all,

I've been battling for hours with a stupid issue that I shouldn't have to. I am asking for help now because it's getting ridiculous.

I installed Genesis and Outreach on http://www.musicmondayca.barefootheart.com .

I just want to recreate the header found here: http://www.musicmakesus.ca/musicmonday

So there are 2 headers: one background with the gradient, and the music notes. Plus I need to insert the logo on top of that. I've tried so many configurations and css modifications it's not even funny. If anyone could help I'd be grateful.

This is my first site with Genesis, and would love to be able to find how to do this.

thanks!

Andre

[styzer]

I apologize for the strong language, I was pretty frustrated at the time of writing... I am sure the issue isn't with the theme, but with me, something I'm missing somewhere. I started exploring the use of hooks and will see if this can help my situation.

Hope you all have a great day!

Regards,

Andre

[styzer]

I was offered this solution, so I'm going to try it. I'm sharing it here so others could potentially benefit from it.

In your style.css file, find the following css:
#header {
background: url(images/header.png) repeat-y center center #090909;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

Change this to:
#header {
background: url(images/header.png) repeat-y center center #090909;
background-position: center top !important;
background-color: #090909 !important;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

The person said: "This will allow you to upload a custom header without it aligning left or removing the background color."

Thank you!

Regards,

Andre

[damangmedia]

Here is what I did and it worked fine. The repeat is set to y in outreach, however I want it to repeat x.

Replace header.png with the head you want to use and replace logo.png with the logo you want to use. The go into wordpress appearance - header - and uncheck the "show header text with your image"

#header {
background: #090909 url(images/header.png) center repeat-x;
background-position: center !important;
background-repeat:repeat-x !important;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
background: url(images/logo.png) no-repeat;
float: left;
overflow: hidden;
width: 430px;
}

[styzer]

Hi damangmeda,

Sorry I just saw your post today... I saved your reply though as it may come in handy! Here is the completed site (transfer into Genesis and Outreach from a custom multi-site): http://www.musicmonday.ca

Regards,

Andre

[MakeYourselfVisible]

Damangmeda, thank you for that solution; worked like a charm for me! As someone with limited coding experience, I found the Outreach Header hard to work with out of the box but this was simple enough.

Thanks again, let me know if I can Paypal you a beer 🙂

[damangmedia]

Hey Happy it worked out. Thanks for the offer for the beer. I will save that for the next time I am pulling my hair out and I need one!

[mbreslow]

this worked well for me as far as the logo goes, but I find that the header.png just acts like an image and not a background image. I'd like to make it stay in the background where it belongs, and cover everything. any ideas?

[damangmedia]

@mbreslow it should be a background image is you followed the process in the css. If you are using the custom header then it will add the image to the page as an image. What is the site so I can have a look at it for you.

Make it great,
Matt
http://damangmedia.com

[Matt@theDIYvillage]

@damangmedia, would you care to take a look at my site and point me in the right direction?  I seem to have done something to the header.png where it's not covering the full width of the page.  It's leaving a small space on the right hand side.  I've got a logo that I'd like to lay on top of the header.png or I've considered just modifying it in illustrator so that the logo and the header are just one image.  In any case, I'm at a loss and could use some help!

http://www.theDIYvillage.com

Thanks in advance!
Matt

[damangmedia]

@theDIYvillage

Yes you have to update the following section on your style.css

#header {
background: #090909 url(images/header.png) center repeat-y;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
width: 430px;
}

to the following:

#header {
background: #090909 url(images/header.png) center repeat-x;
background-position: center !important;
background-repeat:repeat-x !important;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
background: url(images/logo.png) no-repeat; 
float: left;
overflow: hidden;
width: 430px;
}

Make sure you upload the logo file to the images directory. And you can not use the custom header, you have to reset that in the theme options. Make sense?

Make it great,
Matt Clark
Inbound Marketing for Business

[Matt@theDIYvillage]

Hey Matt!  Thanks for the tips, but I seem to still be having trouble.  I modified the stylesheet as instructed, restored the header image, and uploaded my logo.png to the images file for the theme, but I've got a blank space on the right side of my header still and no logo...

And how come my header and footer ads have blank backgrounds?

Anybody have any thoughts?

[damangmedia]

@theDIYvillage sorry for the delay in getting back to you. I went and checked the site and looks like you go it figured out. Let me know if you I can help with anything else.

Make it great,
Matt

[Author]

Posts