Outreach Theme – Inline CSS puts my logo to the left

Community Forums Forums General Discussion Outreach Theme – Inline CSS puts my logo to the left

This topic is: not resolved

This topic contains 10 replies, has 4 voices, and was last updated by  DarralynC 1 year, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #54852

    BrettOnTheNet
    Participant
    Post count: 20

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

    IanP
    Participant
    Post count: 71

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

    • This reply was modified 1 year, 2 months ago by  IanP.
    • This reply was modified 1 year, 2 months ago by  IanP.
    #55312

    BrettOnTheNet
    Participant
    Post count: 20

    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

    #55359

    BrettOnTheNet
    Participant
    Post count: 20

    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?

    #56231

    DarralynC
    Participant
    Post count: 39

    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

    • This reply was modified 1 year, 2 months ago by  DarralynC.
    • This reply was modified 1 year, 2 months ago by  DarralynC.
    • This reply was modified 1 year, 2 months ago by  DarralynC.
    • This reply was modified 1 year, 2 months ago by  DarralynC.
    #57096

    BrettOnTheNet
    Participant
    Post count: 20

    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

    • This reply was modified 1 year, 2 months ago by  BrettOnTheNet.
    • This reply was modified 1 year, 2 months ago by  BrettOnTheNet.
    #58635

    DarralynC
    Participant
    Post count: 39

    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.

    #58687

    BrettOnTheNet
    Participant
    Post count: 20

    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.

    #58688

    BrettOnTheNet
    Participant
    Post count: 20

    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.

    #58691

    braddalton
    Participant
    Post count: 10217

    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.


    #59214

    DarralynC
    Participant
    Post count: 39

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.