Instead of wrapping your content in a new div, you can use the body classes that WordPress adds. The blog home page has the class of blog.
Aaron,
Okay, interesting. This is obviously how to make things very specific.
I looked at the link you provided. I’m not quite grasping what I need to do. Do I need to add something to the header.php file to declare a new custom class? Or can I go ahead and just use a specific CSS declaration?
My blog page has a page ID of 396, so I”m wondering if I can use…
.page-id-396 site-content {
[custom widths go here for just the blog page so that I can fit a sidebar to the right side]
}
and that will work?
I’m not quite getting this, so here are my questions: In the header.php file I have this on line 34:
<body <?php body_class(); ?>>
If I want to add a class to my blog page, according to the codex, do I change the above to this?….
<body <?php body_class('page-blog'); ?>>
But then what do I do? Do I create .page-blog declarations in my CSS like this:
.page-blog .site-content {
(assorted changes in CSS)
}
The codex gives examples but I’m not grasping how to add a class to the body in order to be able to change the site-content widths only on the page blog page while leaving the rest of the site intact.
You don’t need to change anything – those page/template specific classes are already there – so what you posted above should work – is it not?
I tried this in MAMP first. My page id there is 34 for my “page blog”.
.page-id-34 .site-content {
float: left;
width: 50%;
margin: 1.71429rem 0 0 20%;
}
Using Firebug, I got these settings to work in my browser, and then pasted them into my dashboard CSS utility. Nothing happens.
pasted them into my dashboard CSS utility.
Do you mean your child theme style.css file? For twentytwelve, you may need to be wrapping that CSS in a media query to affect a bigger screen – such as:
@media screen and (min-width: 600px) {
.page-id-34 .site-content {
float: left;
width: 50%;
margin: 1.71429rem 0 0 20%;
}
}
Or you may have a CSS error above the code you are adding – in which case it may be invalidating all subsequent code.
You can validate your CSS file to check on that –
http://jigsaw.w3.org/css-validator/#validate_by_input
I put that code in the +600 media query way at the bottom (good call on that one. I overlooked that), but it didn’t work. So it might be that CSS error. I’ll have to check that out in a bit.
David –
What is the url that you are trying to change? If I can take a look I might be able to help you figure out what the css error is.
I tried this in MAMP first.
I assumed that meant it was only on local.
Here is the URL. I just uploaded my CSS file to my site.
The CSS for the what I’m attempting is this:
/* for blog page - adjust site content width */
.page-id-396 .site-content {
float: left;
width: 50%;
margin: 1.71429rem 0 0 20%;
}
This should make the content narrower so that I can float a sidebar to the right of the content only on this page.
Actually, that class isn’t in the output HTML –
<body class="blog custom-background custom-font-enabled single-author">
Try this:
.blog .site-content {
...
That page doesn’t have the class of page-id-396. As the blog page though, it does have the class of blog
WPYogi… once again, you’re a genius. That worked! Thank you, too, Aaron.
So, “blog” is an automatic class, and I can use that as the selector. How easy is that? 🙂
Now I’ll set up my sidebar for this page. I see now I can use this same feature to show the sidebar only on the blog page using …
.blog #secondary {
display: block
}
Thanks, Guys!
Now I understand what you were saying Aaron. I didn’t understand that your mention of “blog” way up above was an actual class I could use.
