Twenty Twelve Theme – top wapper/margin

Try using a browser developer tool for this kind of exploratory CSS work.
I use Google Chrome’s built-in Developer Tool and it’s really easy to expose the webpage’s underlying HTML and CSS.

Now that you know the style, from being exposed by the Developer Tool, you can add a new style in your Child Theme stylesheet to override it.

Thank you Andrew – that’s a good tip.

In the child style.css file I added the amended code:

.site-header {
	padding: 0px 0;
	padding: 0.714285714rem 0;
}

But that didn’t work.

Have also taken out the coding for the site-description, site-title, in header.php – didn’t work either.

Andrew your answer may suffice for the experienced developers, but some of us just can’t work out from “inspect element” (in developer tools) where in the style.css the top margins for the wrapper are set. I’m used to changing almost anything in a twentyten child (have built quite a number of quality sites with it), and now using twentytwelve for a new site, I’m stumped if I can see where this parameter is set. It would be MUCH easier if someone could say “It’s in the xyz file and you need to change blah blah blah to blah blah blah blah” – Some of us do need our hands held with the new themes…

Cheers, Dave.

Thanks Dave!

Jennifer your padding adjustment needs to be made on both lines. That is, if you change the “px” value to zero, you need to change the corresponding “rem” value. Of course, that won’t address this issue, but it’ll help you to make other changes you’re working on… ??

There isn’t a particular line of code you need to change, Jennifer. You need to create the new style and add it to your Child Theme stylesheet.

If creating CSS seems out of grasp, you can seek help in a CSS-specific forum or hire someone at https://jobs.wordpress.net .

Have also taken out the coding for the site-description, site-title, in header.php – didn’t work either.

Do not remove that from the header, and do not leave your site’s title and tagline empty for the sake of adjusting margin. It’s so wrong to do so, and it will negatively affect your site’s SEO.

Dave, changed the padding to zero on both values.

Andrew, waiting on the CSS forum for an answer – though did have a stab at writing CSS (top margin) but that didn’t work either.

Paul, have reinstated the code, thanks for the heads-up. Interesting though, coding the header.php file with ‘site title’ and ‘site description’ doesn’t show us on the page like it does when the title and description is added through admin/settings. This is just what I wanted while keeping SE’s happy.

Thanks guys…. I’m still trying to solve the problem.

Jennifer I just managed to find the right code in my regular style.css file, which I’ve now modified for my child css file.

The twentytwelve file has the following:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 48px;
		margin-top: 3.428571429rem;
		margin-bottom: 48px;
		margin-bottom: 3.428571429rem;
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

Which I’ve over-ridden in the child theme with the following:

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 12px;
		margin-top: 0.857142857rem;
		margin-bottom: 12px;
		margin-bottom: 0.857142857rem;
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	}

As you can see, the parameters I changed are the margins top and bottom. I change the margin by a quarter the pixel value, so I also changed it a quarter of the “rem” value too, to make the changes consistent with each other.

BTW the reasons I’ve included the whole block of code here and also in my child theme, is (a) that you can find it easier, and (b) that I can easily go back and make further alterations (to the box-shadow, padding etc) without having to flog through mountains of code again – my memory resembles a sieve at the best of times!

You’re a star Dave – but… hate to say it, think there is a confusion.

I am having a problem with the header, meaning the logo image, which has too much space above it – it is the area where the site description usually goes. If I was writing it in html, I’d say it was data inside the body table that needs to go higher.

Have used your code though which has made the body higher on the page.

Thanks!

The one you put above should read like this:

/* Header */
.site-header {
	padding: 0;
	padding: 0;
}

Also, make sure that in your dashboard, under Appearance >> Header where you’ve uploaded your own header image, underneath you should UNcheck the box “Show header text with your image” or that setting may conflict with your css. That should take care of what you’re wanting to do.

BTW are you a fellow Aussie, I see you use a sulphur-crested cockatoo as your avatar on the css forum…

CRACKED IT! Thanks loads!

Over the moon – many thanks for your help.

Sulphur-crested cockatoo… no that was a default image. A Brit in Spain.

Gracias!

No wukkas!… ??

Under Appearance > Header
uncheck the “Show header text with your image”

This will prevent Site’s title and Site’s description from displaying on front while keeping it in source code. This is the right way to not show Site’s title and description.

coding the header.php file with ‘site title’ and ‘site description’ doesn’t show us on the page like it does when the title and description is added through admin/settings.

The Header set in admin will come off with its own CSS. What you adjust in your child theme for frontend will not take effect in the admin, so just do not compare what you see in admin side, you will get confused.