Full Width Header – White Background – News Theme

[tpaulwhite]

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

[John]

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 😉

[John]

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 😉

[tpaulwhite]

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!

[John]

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 😉

[tpaulwhite]

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

[John]

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 😉

[tpaulwhite]

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!

[John]

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 😉

[tpaulwhite]

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

[John]

You're welcome!

---

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

[wadams92101]

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?

[John]

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 😉

[Author]

Posts