Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   Styling posts page different from page pages (http://forum.bytesforall.com/showthread.php?t=15085)

pmac Aug 11, 2011 02:24 PM

Styling posts page different from page pages
 
I tried a couple of solutions I saw in here but none are working and I'm sure I'm missing the answer in here somewhere... I just want a different background color for my posts page. http://schoolhouseartgallery.com/events is the posts page, but if you look through the other pages of the site, you'll see that I want the blog to have the same background as the right sidebars...
This was my last attempt in the CSS inserts:

body.page-id-9 td#middle {
background: #c6c2be;
}

with no luck.

Thanks!

lmilesw Aug 11, 2011 02:35 PM

Since it is the blog page the selector for that would be body.blog but that is not going to do all this for you. You will have to use CSS for the the various divs you want to affect.

pmac Aug 12, 2011 09:35 AM

So, what would those divs be? I mean, I'm assuming they are the same as all the options in "style pages and posts" but what would the path be for the CSS inserts to affect the background color of all divs on the body.blog so I can the look I'm going for? This would be an awesome option for future versions!

juggledad Aug 12, 2011 09:50 AM

1) If you are using the 'background' rule, you must provide ALL the options. If you just want to effect the color use 'background-color' instead.
2) using
HTML Code:

body.page-id-9 td#middle {
background-color: #c6c2be;
}

will cause the middle to be that color, however this is like the russian doll, there are more parts. The page also the post styling (since a page is just a special type of post) so
HTML Code:

div.post, div.page {
    background: none repeat scroll 0 0 #000000;
    display: block;
    margin-top: 0;
    padding: 0 20px 5px 0;
}

this code also needs to be overriden

pmac Aug 12, 2011 10:00 AM

OK, I just want to affect the background color. I tried this:

body.page-id-9 td#middle {
background-color: #c6c2be;
}

and it didn't change anything anywhere. How do I override this code:

div.post, div.page {
background: none repeat scroll 0 0 #000000;
display: block;
margin-top: 0;
padding: 0 20px 5px 0;
}
to change just the background color of the entire blog page?

pmac Aug 12, 2011 10:02 AM

I do have this in my inserts:

td#middle {
background: none repeat scroll 0 0 #000000;
}

Is that why I can't override with:

td#middle {
background: none repeat scroll 0 0 #000000;
}

?

lmilesw Aug 12, 2011 10:27 AM

Try this as a start and see what happens
HTML Code:

body.blog .post-headline a:link {
    color: black !important;
}
body.blog div.post {
    background-color: #c6c2be;
    color: black;
    padding-left: 15px;
}
body.blog .post-headline a:hover {
    color: gray !important;
}


pmac Aug 12, 2011 11:39 AM

OK, all looks good! I only need to know how to pad the body copy on the left on single post page. Awesome! Thanks!

lmilesw Aug 12, 2011 12:10 PM

You generally do that in Style Posts & Pages in the theme options.

pmac Aug 12, 2011 12:14 PM

Right, but if I do that, it changes alignment of the posts page and the page pages which I don't want to do.

lmilesw Aug 12, 2011 12:23 PM

This is where Firebug comes in handy. You go to the page or post you want to change, determine the selectors, and test out the CSS. This is easy to say but it does take a bit to get used to working with Firebug but is invaluable in the long run. What I came up with for your case is the following.:)
HTML Code:

.type-post {
    padding: 20px !important;
}


pmac Aug 12, 2011 12:38 PM

Hi Larry,

I actually use firebug a lot but I find that figuring out the order and the right spacing and punctuation for the inserts is nearly impossible. For instance, I don't see "type-post" anywhere in the firebug path on that specific page so how would I know to use it? I was trying to change the paragraph style...There are probably directions somewhere... This works though so thanks for the help and being so patient!

lmilesw Aug 12, 2011 01:08 PM

In your case I went to a post and using FireBug I saw this line.
HTML Code:

<div id="post-387" class="post-387 post type-post status-publish format-standard hentry category-events odd">
and noticed a class of type-post. To double check the CSS I went to a page and saw it was type-page. So then I figured I could use a class of type-post as the selector.

I know it not clear when you first start using FireBug but after awhile you start to know what the syntax means. For instance the id= section is of course the id and the class= section is all the different classes given to the item such as post-387, post, type-post, etc. I just picked out type-post as the one that seemed right.


All times are GMT -6. The time now is 04:30 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.