Two color schemes for one WordPress Site

  • perchingbird


    I’ve been scouring the Graphene theme support forum, and keep coming on the Styling by Class tutorial. Which would be amazing, but for some reason I can’t seem to get the code to work (which means I’m not using the right code, I know). I’ll get to the code in a moment though. I have been using Google Chrome and inspect element, and I’ve customized the Graphene theme with a child theme style sheet successfully for some other items (widgets, top bar, etc).

    The main site:

    The need: I have two static pages and one posts blog that should all share the same color scheme (Lair, Rogues Gallery, and Blarg). And right now they do!. However, the site owner needs a whole section devoted to a series of novels (dark epic fantasy, writing in progress, feel free to go read Daggers off the page!). All the pages made under OTHERRREALM should share a color scheme and header that is different than Lair, Blarg, and Rogues Gallery.

    Advice Needed on the most efficient way to set this up – the OTHERREALM section will have multiple pages with this color scheme and will be constantly growing, while the other three pages will be the only ones with the blues. It occurred to me that it’s probably best to set up a class for OTHERREALM, or to just style the entire site with OTHERREALM colors and custom CSS Lair, Blarg, and Rogues Gallery. Unless using OTHERREALM as a parent template will bring over the color schemes as well. So, input on the most efficient coding for that would be fantastic (the whole page of posts thing with OTHERREALM is another topic – I’m not liking the plugin I’ve got right now, but at least it functions).

    But, how I end up styling it doesn’t matter if I can’t figure out the code to style with. 🙁

    The OTHERREALM post id is 112, so shouldn’t it be this simple?

    .post-id 112 {
    background: #005826;



    I could substitute any of the page ids in there, really, except maybe for Blarg, since it is the blog itself and that coding might be more complicated. 😮



    I’ve installed FIrefox and FIrebug (which is amazing, it shames Chrome’s inspect element features), and it appears that the code I need is actually this: {
    background-color: #FFFFFF;

    I moved all my custom CSS to my child theme, and cleared the background option in the WPAdmin that could have been overriding the child CSS. And then I found the period. See, it’s body, not .body. ><

    So now I need to either constantly add new pages to the custom list, or code Lair, Blarg, and Rogues Gallery as the three directly applied style and use OTHERREALM as the main style that all pages have on creation. This is probably the most efficient method, and gives more control to the site owner (they won’t have to ask me to go fix any code when they want to add a page, after all).

    And for posterity, for those that might be trying to code your blog page with a static front page, the ID is actually… blog… not page-id-somenumber. My Blarg page-id is 40, but coding for that does nothing to the actual page, since blog overrides it.

    Yay Cascades!

    So, uh, thanks for reading? Comments on how to improve efficiency would still be fantastic. 😀



    Okay, so now I’m having a CSS conflict, and I’m not sure what’s wrong with the cascade. Thanks to Firebug I can see that the code is correct for getting the post content background color to change, it’s just over-writing the page-specific color. Hmm.

    So I have this:


    … to make the post content an off-white-ish color. But, for 3 pages I want the background to be white. So, I coded this further down in the CSS:,,{
    background-color: #fff;
    border-top-color: #fff;
    border-bottom-color: #fff;

    But when I look at the pages, they show the off-white color. When I inspect with Firebug, it shows the .post color #ffffff with a strikethrough, and the off-white whole, which means for some reason it is the white is not being read as the primary color.

    Thoughts on this error? What did I do incorrectly?

    I’ll be changing all the blues (links, sidebars, etc) to a green/off-white scheme eventually, which means that I’ll have to custom code these same three pages to remain blue and white, so I’m guessing whatever my mistake is will repeat itself as I go through this process. 🙁



    If a css property has a strike-through line on firebug it means that some other property has greater priority over it.

    I’m a little confused on what exactly you want to achieve but if you want to style the elements on a specific page you have to use the class indicated in the body tag.

    for example in the “OTHERREALM”

    .page-id-112 .post {
    background: #FFF;



    I must have been working on it too long, because I swore I tried that code and it didn’t work. Maybe, uh, my cache didn’t refresh properly.

    That must have been it.


    It works now. On to customize all the things!

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.