As you can see in this screenshot, when I select the banner using Firebug, it points to the style.css file. Is that where the modification is to be made?
…or is it the header.php file? I don’t understand why in some instances, it’s the header.php file that’s modified to change the size of the banner, and sometimes it’s other files, such as the functions.php.
Remove the padding here:
#header {
padding: 10px 0 20px;
}
and remove the margin here:
#preheader {
margin-bottom: 10px;
}
Is there anything I can do to shrink-down that banner even more height-wise on my site?
The code I posted above is still active on the site…so those spaces are still there. Did you change it?
It should go in your CSS file — preferably a child theme or custom CSS plug-in or option.
The code I posted above is still active on the site…so those spaces are still there. Did you change it?
Yes I did. Or at least I thought I did.
I just searched through my header.php and style.css for
#preheader {
margin-bottom: 10px;
}
and I couldn’t find that anywhere (unless I’m looking in the wrong files, perhaps? I can’t remember which file I removed those codes from.)
It should go in your CSS file — preferably a child theme or custom CSS plug-in or option.
Are you saying that the code you suggested I remove should be in my style.css? If so, I searched that file, and the only instances of #preheader code I found in there were the below lines:
#preheader {background: #333 url(images/back_preheader.png) repeat-x top left; font-family: Tahoma, Helvetica, Arial, sans-serif; font-size: 11px; margin-bottom: 10px; }
#preheader li {float: left; display: inline; margin-right: 10px; line-height: 30px; }
#preheader a {color: #ddd; text-decoration: none; }
#preheader a:hover {text-decoration: underline; }
The code I posted above is still active on the site…so those spaces are still there. Did you change it?
I noticed that that top black bar (aka the “pre header”, I think) appears distorted, or bigger if you will, in Google Chrome.
But in Mozilla it views differently, or correctly.
Might that be why you thought the code was still there, or did you actually see the code still there?
No, the code is still in the CSS — so what you need to do is add this to the custom CSS:
#preheader {
margin-bottom: 0;
}
#header {
padding: 0;
}
Also, make sure that you are not making changes in theme files – you really need to be using a child theme — or you are going to lose all your changes when the theme is updated…
I just added that to the custom, and I think it shrinked the banner a little bit, but it still looks messed up in mozilla like I showed in my previous post. It might just be a caused by a resolution difference between the two browsers, or something.
Also, make sure that you are not making changes in theme files – you really need to be using a child theme — or you are going to lose all your changes when the theme is updated…
Are you suggesting that I put the changes in my current custom.css in a child theme?
If you’re using custom, that’s fine — but that means putting changes there – not making changes in theme files. Is that what you are doing?
And if you are changing any other files, you should be using a child theme…
But I still don’t see those changes having been made…there is nothing in your custom CSS file at all.
Interesting. When I view my custom.css from within wordpress, it’s populated.
Here’s a link to it
If you’re using custom, that’s fine — but that means putting changes there – not making changes in theme files. Is that what you are doing?
I had to remove the code you pointed out earlier from theme files. Wasn’t that what I was supposed to do?
