Outreach Header Not Full Width

[Matt@theDIYvillage]

Hello all,

I've recently installed the Outreach Theme and I'm having a problem getting the header to fill the full width of the page.

I've modified the code as instructed by @damangmedia to read as follows

#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;

Any assistance would be greatly appreciated!

Here's a link to my homepage.

http://www.theDIYvillage.com

Thanks in Advance!

Matt

http://www.theDIYvillage.com

[rfmeier]

Matt,

Hello. Are you trying to do something like this?

https://www.diigo.com/item/image/40chg/rued

Let me know.

---

Ryan Meier – Twitter

[CJHallock]

I am working on the same thing and can't get my header to go full width ... finally made the leap to Studio Press and realizing that I've had it easy with the last few themes I use but also restricted because the features that studio press has...

 

So, here is the site I'm working on and not sure how to make the header centered with a black background ... I tried just using the image they had loaded, photoshop it to what I was wanting and go from there but no luck  ...  http://198.57.135.131/~vnet/

[Matt@theDIYvillage]

@rfmeier, yes, that's exactly what I'm hoping to accomplish.

[CJHallock]

Had to copy CSS from above and make a few changes but I got it ... Thanks for this forum! ... I was pulling my hair out!

[rfmeier]

Matt,

Are you uploading the header image through the WordPress Admin Appearance -> Header options? It looks like that may be overriding the style.css you already have implemented.  Removing that uploaded image will probably fix the issue.

Try that and let me know how it turns out.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

@rfmeier,

I've deleted the header image through the appearance menu.  Do I need to restore to original?  It is currently showing a blank header with my logo.png overlayed

[rfmeier]

Matt,

The original should still be there. However, WordPress is still injecting css for the background with an empty background image url still causing an override on your style.css.

Was this an WordPress option or Genesis option? I am not familiar with this theme.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

@rfemeier, To be honest, I'm not sure.  The restore original option is within the appearance/header menu.  But when I have attempted that, it still shows a header image that doesn't span the full width of the page.

[rfmeier]

Matt,

Looking at the Genesis core, it is implementing it's own custom header code. Reset the header and I will help you get a fix in.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

Okay Ryan, Within the Appearance/Header Menu, I've restored to the original header image.

Thanks for taking the time to help.  I can be considered a code newbie...

[rfmeier]

Matt,

Wow. It is still injecting an empty background image url

#header { background: url() no-repeat; }

Try adjusting your css for the time being;

/* line ~183 */
#header {
	background: #090909 url(images/header.png) center repeat-x !important; /* add !important to override */
	background-position: center !important;
	background-repeat: repeat-x !important; /* add missing end tag */
	margin: 0 auto;
	min-height: 120px;
	overflow: hidden;
	width: 100%;
}

This should get us close for a temporary fix.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

Ryan, I've adjusted the css to reflect your temporary fix, but I'm still showing the same header image

[Matt@theDIYvillage]

Would this code within functions.php have anything to do with it?

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
'width' => 1060,
'height' => 120

[rfmeier]

Matt,

That image is only 1200px wide. Stretching it would pixel-ate the image and it would look... bad. Adding a background color of #090909 (~black) to the header will replace the white and make the header look full.

Within your css the background color is specified correctly, however, when the custom header image css is output, that color is being removed. Even when you remove the custom header image, the custom header css is still being specified, but with an empty image url. This still overrides your style.css file.

Appending !important to the end of a css rule will prevent that css style rule from being overrode.

So to fix this, you need to edit your style.css file. Around line ~190, after the width: 100%; rule, add the following to the line after.

background-color: #090909 !important;

Also, on line 185, you need to append the ; to the end of the css rule. it is missing.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

Alright, Ryan, I've added the additional rule.

Here's what my header code is looking like:

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

But I'm still showing the blank background rather than the black

[rfmeier]

Matt,

I am not seeing the css changes. Do you have caching turned on?

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

I've disable my cache.  Are you seeing the changes now?

[rfmeier]

Matt,

Not yet. It looks like your changes are there, but the style.css file is cached right now. I can see them when I hit an un-cached stylec.css file.

http://www.thediyvillage.com/wp-content/themes/outreach/style.css?ver=1.9.33

It should clear up soon.

---

Ryan Meier – Twitter

[Matt@theDIYvillage]

I'll wait a while and see what happens.  The only cache plugin I've got is w3 total cache...and it's completely disabled at the moment.  Is there something else I should be disabling?

Over the past week, I've had problems with all kinds of theme adjustments.  I'm hoping that there isn't a larger underlying issue with my code.

[Author]

Posts