Outreach Theme – Inline CSS puts my logo to the left

[BrettOnTheNet]

Hi

I am using Outreach theme. I had managed to center the logo image previously, but when I upgraded to 2.0 I lost that, and it headed back to the left again.

I have not been able to work out what I did to make it work last time. Outreach seems to put some inline css into the header with the !important, so any changes to style.css do not work.

<style type="text/css">#header { background: url(http://paparangiscouts.org.nz/wp-content/uploads/cropped-scouts-header.png) no-repeat !important; }</style>

I've fudged a solution, by putting the css I want into the footer, so I now have two css statements for the same #header.

Where can I change this behaviour in Outreach/Genesis so that I can center the heading. I'm guessing there is some simple thing that I have missed here.

My footer solution is rather inelegant!

Thanks
brett

http://paparangiscouts.org.nz

[IanP]

I had a similar header issue that was solved by implementing the following:

I would suggest removing the custom header function from your functions.php file. (backup first however)

Remove this:

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

[BrettOnTheNet]

Hi Ian

Thanks for that. I tried it, and it ended up completely removing my logo. All I was left with was the background that shows in the rest of the theme. It left the space for the logo, but no logo.

Cheers
Brett

[BrettOnTheNet]

I've managed to get my additional inline CSS into the header now (using Genesis Extender from CobaltApps), but I still have two inline statements and would like to get rid of the incorrect one.

Anybody got any ideas?

[DarralynC]

How did you get this back centered? I am new at this...but it seems like it should be a simple fix?
Thanks.
http://ccsmain.carmeleducationalfoundation.org

[BrettOnTheNet]

I used the Genesis Extender plugin from Cobalt Apps and inserted the CSS I wanted to use into the header, so that it appears after the inline CSS that is causing the problems.

<style type="text/css">#header { background: url(http://paparangiscouts.org.nz/wp-content/uploads/cropped-scouts-header.png) no-repeat center !important; }</style>

If you look at the source of my site you will see this:

<style type="text/css">#header { background: url(http://paparangiscouts.org.nz/wp-content/uploads/cropped-scouts-header.png) no-repeat !important; }</style>
<style type="text/css">#header { background: url(http://paparangiscouts.org.nz/wp-content/uploads/cropped-scouts-header.png) no-repeat center !important; }</style>

Two CSS statements saying basically the same thing except the second one centers it.

It's a bit of a hack, but it works

[DarralynC]

Hi, Brett!
Thanks for the code...I am just not sure how to insert?
Genesis Child Theme Outreach Stylesheet.css?

I also I looked for the Genesis Extender Plugin - Cobalt Apps and couldn't find it?
Can you give direction?
Thanks.

[BrettOnTheNet]

The Genesis Extender Plugin is not free, but you can see it here: http://cobaltapps.com/downloads/genesis-extender-plugin/

But you could do this with something like Genesis Simple Hooks as well: http://wordpress.org/plugins/genesis-simple-hooks/

All I did was add the CSS above to the wp_head hook.

When I use the Genesis Extender plugin this puts my line of code directly below the line of code that comes from the theme. I can't guarantee that the Genesis Simple Hooks would do the same thing.

[BrettOnTheNet]

So you don't add it to the CSS stylesheet ... It's got to be added to the code of the site itself.

There might be a more elegant way to do it, but this is the best I could find.

[Brad Dalton]

Just published a post on this.

You can simply upload your logo to the images folder and remove the PHP which adds support for a custom header.

As long as the logo is 120px height and 400px width it will center.

Otherwise you will need to change the values for the height and width in your style sheet.

All changes should be made by copying the CSS rules to the end of the file and not to the original code as its hard to find and manage modified code that way.

---

Tutorials for StudioPress Themes.

[DarralynC]

Hi, Brad and Brett!
The simple hooks solution worked like a charm! It put it right back in the center.

http://ccsmain.carmeleducationalfoundation.org

Thanks.

[Author]

Posts