Community Forums › Forums › Archived Forums › Design Tips and Tricks › Full Header Width – White Background Changed?
- This topic has 15 replies, 3 voices, and was last updated 10 years, 12 months ago by nutsandbolts.
-
AuthorPosts
-
November 16, 2013 at 7:04 am #73382tpaulwhiteMember
Hi - my site is http://www.milepro.com
When I upgraded the latest version of WordPress, I lost the full width white background across the top of my site. The area I am referring to is the header area, beneath the blue header bar with social icons - where the milepro logo is - this formerly was white across the full width but seemed to go back to the default grey. I am ok with the default grey on the sidebar area, but wanted white across the top of the header. Can you please help me understand how to change it back?
I really appreciate your help
http://www.milepro.comNovember 16, 2013 at 7:49 am #73388RobGMemberThe reason your seing the grey BG color os because it set to the following baackgroung PNG below
body { background: url(images/bg-light.png);
If you want your background to cover the rest of the header you would need to change it to the following
body { background-color: #ffffff;
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 16, 2013 at 8:01 am #73393tpaulwhiteMemberThank you Rob- the change you suggested made the entire background white. I am just looking to make the header background area white. Can you please advise how to do that?
Thank you!November 16, 2013 at 8:03 am #73394tpaulwhiteMemberOne more thing - here is the code that I put at the bottom of the CSS orginally when it worked fine
#header {
background: none repeat scroll 0 0 #fff !important;
border: none;
width: 100%;
}#header .wrap {
margin: 0 auto;
width: 960px;
}
#header #title-area {
background: url(http://www.milepro.com/wp-content/uploads/2012/12/milepro-logo.jpg) no-repeat scroll 0 0 transparent; }November 16, 2013 at 8:08 am #73395RobGMemberWhat theme are you using?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 16, 2013 at 8:11 am #73396tpaulwhiteMembernews theme
November 16, 2013 at 12:54 pm #73440RobGMemberIf you make your logo with a white background the same width as your header that's one way to have a full width banner and get it to be the same color.
I also came accross this tutorial that might help you http://sridharkatakam.com/add-responsive-header-image-metro-pro/
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 16, 2013 at 3:19 pm #73457tpaulwhiteMemberThank you Rob - I don't think I am doing a good job explaining what I am looking for, so I will provide an example
I am trying to emulate the header of the geekwireDo you notice how the wide header goes across the top, but the grey is still on the sides. this is what my site used to look like then it somehow changed with an upgrade. I am just trying to get the full width white header back
Thank youNovember 16, 2013 at 6:04 pm #73484RobGMemberI took a look at the logo that appears on the Geekwire.com website and the dimensions are 390x75 so that logo is not the full width of the header section.
What I also notice about that website is he is not using a image of any kind for the background, instead he is using background: #FFF; which makes if much easier to cover the header section and make it completely white.
They are also using the following CSS to fill in any dark areas in the header.
#header { width: 960px; height: 80px; margin: 0 auto 0; padding: 5px 0 8px 0; background: #FFF; }
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 16, 2013 at 11:49 pm #73521nutsandboltsMemberTry this -
Remove your header image from Appearance > Header.
In your stylesheet, add the following:
#header { background: #fff url(http://www.milepro.com/wp-content/themes/news/images/header.png) no-repeat !important; }
That will put the header image back in place and force the entire header to be white.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+November 17, 2013 at 7:00 am #73549tpaulwhiteMemberThank you both - sorry this is so difficult but i have tried both options above and neither work.
Here is what I have at the bottom of my CSS - it used to work and create the white header background
#header {
background: none repeat scroll 0 0 #FFF !important;
border: none;
width: 100%;
}
#header .wrap {
margin: 0 auto;
width: 960px;
}
#header #title-area {
background: url(http://www.milepro.com/wp-content/uploads/2012/12/milepro-logo.jpg) no-repeat scroll 0 0 transparent; }It looks like somehow the bg-light.png background image from the wrap is over riding the plain white header background I am looking for.
Any more ideas how to get the white header background back?
November 17, 2013 at 9:54 am #73556nutsandboltsMemberThis reply has been marked as private.November 17, 2013 at 10:27 am #73560RobGMemberOk after reading all the content posted here to resolve this matter, I added the CSS code provided by Andrea to demo site.
It's currently running the same News thems as your website.
My demo website
http://demo.robgoss.com/I uploaded your logo to my demo site and placed the URL for the logo after the header Background a long with the white background covering the rest of the header. It looks fine to me so I don't understand what's going on or why it won't work on your website.
header {
background: #fff url(http://www.creativebloggers.net/demo/wp-content/themes/news/images/milepro-logo.jpg) no-repeat !important;
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
border-top: 1px solid #d5d5d5;
min-height: 110px;
margin: 0 auto;
overflow: hidden;
width: 960px;
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossNovember 17, 2013 at 6:41 pm #73857tpaulwhiteMemberHi Guys - I tried what Andrea suggested again and it worked - the only problem is that it moved my logo all the way to the left. Can you tell me how to get it back flush with the navigation bar (the Travel Credit Cards navigation)
Almost there... thanks for you help!
November 17, 2013 at 6:43 pm #73858tpaulwhiteMemberOne more thing... the logo is no longer "clickable" - it used to redirect back to the home page when clicked on....
November 17, 2013 at 7:33 pm #73874nutsandboltsMemberThere are a number of conflicting rules in your stylesheet. At this point it's difficult to tell what's causing what. :/
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.