Full Width Header – White Background – News Theme

Community Forums Forums Design Tips and Tricks Full Width Header – White Background – News Theme

This topic is: not resolved

This topic contains 12 replies, has 3 voices, and was last updated by  John 5 months, 4 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #4136

    tpaulwhite
    Participant
    Post count: 23

    I am trying to set my site up to have white space going across the top of the header section – I am using the News Theme.  I have been trying to adjust the #header section of the style.css file but am having no luck.  Any help would be appreciated

    My site is – xohawaii.com

    I am trying to get the header to look like the one at geekwire.com

    Thank you for your help!

     

    http://www.xohawaii.com

    #4163

    John
    Participant
    Post count: 155

    Try this at the end of your style.css:

    #subnav {
    background-color: #fff;
    padding: 0 0 8px;
    width: 100%;
    }
    #subnav ul {
    float: none;
    margin: 0 auto;
    width: 960px;
    }

    You might want to play with the padding size in #subnav to get that lined up correctly.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4165

    John
    Participant
    Post count: 155

    And personally, I’d add this to make the space around those social icons more proportional:

    #subnav li.social-facebook a,
    #subnav li.social-facebook a:hover,
    #subnav li.social-rss a,
    #subnav li.social-rss a:hover,
    #subnav li.social-twitter a,
    #subnav li.social-twitter a:hover {
    margin: 5px 10px 0 0;
    }

    and then change the padding in #subnav to

    padding: 0 0 4px;

     


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4198

    tpaulwhite
    Participant
    Post count: 23

    Thank you John – I made the changes and that made the top nav bar go all the way across, which is definitely one of the things I wanted.  Now I just need to get white space to the left of the header logo and to the right of the Hawaiian airlines ad widget, as well as turning the background around the hawaiian airlines widget white.  Can you please advise how to do that?  Just like the header logo section on Geekwire.com

     

    I really appreciate it!

    #4210

    John
    Participant
    Post count: 155

    If I understand correctly what you’re asking, I think this is what you want to do:

    #header {
    background:  none repeat scroll 0 0 #fff;
    border: none;
    width: 100%;
    }
    #header .wrap {
    margin: 0 auto;
    width: 960px;
    }
    #header #title-area {
    background: url(http://xohawaii.com/wp-content/uploads/2012/12/xoHAWAi’i-Logo-465x110.jpg) no-repeat scroll 0 0 transparent;
    }

    And I’d keep a border under the subnav by adding this:

    #subnav {
    border-bottom: 1px solid #D5D5D5;
    }


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4225

    tpaulwhite
    Participant
    Post count: 23

    Thanks John -

    I took the code you provided above and replaced the following section:

    #header {
    background-color: #000;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    min-height: 110px;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;

    The result was essentially the same look, but the logo was not gone.  I did not get the white background going across the full length of the screen that I was looking for.  Did I follow your instructions right?

    Thank you

    #4229

    John
    Participant
    Post count: 155

    I think you’d be better off pasting my code at the end/bottom of your style.css file because of how the CSS cascade works, at least for now, rather than replacing the default code.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4246

    tpaulwhite
    Participant
    Post count: 23

    Thanks John – I added it to the bottom of the style.css file and uploaded it so you can see the results.  I think something is still missing.  Please check it out.  http://www.xoHawaii.com

    As you will see – it moved my logo over to the left and left the gray background.  I was hoping to keep the logo where is was, just add the white background across the full screen.

     

    I really appreciate it!

    #4251

    John
    Participant
    Post count: 155

    We’re getting there…

    Add !important to #header, so it looks like this:

    #header {
    background:  none repeat scroll 0 0 #fff !important;
    border: none;
    width: 100%;
    }

    Then, the logo isn’t showing up because of a strange character in the image URL. I’d recommend renaming that image file name without any special characters, and then using that in the following code. For example, a better file name would be xohawaii-logo.jpg

    #header #title-area {
    background: url(http://xohawaii.com/wp-content/uploads/2012/12/xohawaii-logo.jpg) no-repeat scroll 0 0 transparent;
    }


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #4253

    tpaulwhite
    Participant
    Post count: 23

    That did it!  Thank you for such fast and helpful response!

    #4258

    John
    Participant
    Post count: 155

    You’re welcome!


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #86668

    wadams92101
    Participant
    Post count: 2

    I want to do something similar but instead of a white background in the header I want to have full width header image. would I simply the white background below with the URL image?

    #header {
    background: url(http://mydomain.com/header-background.jpg) no-repeat scroll 0 0 transparent;
    border: none;
    width: 100%;
    }

    Would this work in News Pro 3.0?

    #86977

    John
    Participant
    Post count: 155

    wadams92101,

    Possibly, but we’d need more information to help you with this, starting with the URL of the website you’re working on.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

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

You must be logged in to reply to this topic.