Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Styling posts page different from page pages


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Aug 11, 2011, 03:24 PM
pmac
 
91 posts · Nov 2010
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!
  #2  
Old Aug 11, 2011, 03:35 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Aug 12, 2011, 10:35 AM
pmac
 
91 posts · Nov 2010
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!
  #4  
Old Aug 12, 2011, 10:50 AM
juggledad's Avatar
juggledad
 
22,315 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Aug 12, 2011, 11:00 AM
pmac
 
91 posts · Nov 2010
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?
  #6  
Old Aug 12, 2011, 11:02 AM
pmac
 
91 posts · Nov 2010
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;
}

?
  #7  
Old Aug 12, 2011, 11:27 AM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Aug 12, 2011, 12:39 PM
pmac
 
91 posts · Nov 2010
OK, all looks good! I only need to know how to pad the body copy on the left on single post page. Awesome! Thanks!
  #9  
Old Aug 12, 2011, 01:10 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
You generally do that in Style Posts & Pages in the theme options.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Aug 12, 2011, 01:14 PM
pmac
 
91 posts · Nov 2010
Right, but if I do that, it changes alignment of the posts page and the page pages which I don't want to do.
  #11  
Old Aug 12, 2011, 01:23 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Aug 12, 2011, 01:38 PM
pmac
 
91 posts · Nov 2010
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!
  #13  
Old Aug 12, 2011, 02:08 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] use the header only on the posts page/home page and exclude all other pages mimikbos Header configuration & styling 5 Oct 16, 2010 12:10 PM
[SOLVED] Having trouble styling pages - keeping consistency with the main page Volfan996 Atahualpa 3 Wordpress theme 8 Jul 20, 2010 08:00 AM
404 Page error on all pages (not posts) twola New Versions, & Updating 3 Oct 14, 2009 10:32 PM


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


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