Outreach Header Not Full Width

Community Forums Forums Design Tips and Tricks Outreach Header Not Full Width

This topic is: not resolved

This topic contains 23 replies, has 4 voices, and was last updated by  Kim 1 year, 4 months ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #45022

    Matt@theDIYvillage
    Participant
    Post count: 14

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

    rfmeier
    Participant
    Post count: 603

    Matt,

    Hello. Are you trying to do something like this?

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

    Let me know.


    #45031

    CJHallock
    Participant
    Post count: 6

    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/

    #45033

    Matt@theDIYvillage
    Participant
    Post count: 14

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

    #45035

    CJHallock
    Participant
    Post count: 6

    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!

    #45037

    rfmeier
    Participant
    Post count: 603

    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.


    #45038

    Matt@theDIYvillage
    Participant
    Post count: 14

    @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

    #45039

    rfmeier
    Participant
    Post count: 603

    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.


    #45042

    Matt@theDIYvillage
    Participant
    Post count: 14

    @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.

    #45045

    rfmeier
    Participant
    Post count: 603

    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.


    #45046

    Matt@theDIYvillage
    Participant
    Post count: 14

    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…

    #45047

    rfmeier
    Participant
    Post count: 603

    Matt,

    Wow. It is still injecting an empty background image url

    [html][/html]#header { background: url() no-repeat; }[html][/html]

    Try adjusting your css for the time being;

    [css]
    /* 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%;
    }[/css]

    This should get us close for a temporary fix.


    #45050

    Matt@theDIYvillage
    Participant
    Post count: 14

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

    #45052

    Matt@theDIYvillage
    Participant
    Post count: 14

    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

    #45056

    rfmeier
    Participant
    Post count: 603

    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.

    [css]
    background-color: #090909 !important;[/css]

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


Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.