Different background color on each page

  • Resolved rahish

    (@rahish)


    17 years, 5 months ago

    Hi,

    I am using the cutline theme and I want to have a different background colour on each page. I can’t work out how to do it but assume that it may mean having either a different header.php for each page or a different stylesheet for each page.

    Could anyone tell me how to do this?

Viewing 13 replies - 1 through 13 (of 13 total)

  • By “page,” I assume you are using that in the WP-Admin sense of the word. In that case, go into the template’s page.php (if there is one). If you see a <body> tag near the top, that’s our destination. Depending on the theme author, <body> might actually be in header.php

    Then replace the body tag with something like this:

    <?php if (is_page()){ ?>
   <body class="page-<?php the_ID(); ?>">
<?php }else{
   <body>
<?php } ?>

    That’s for if the body tag was in header.php. If it’s in page.php, you wouldn’t need all the conditions.

    Then, just go into your style sheet and add a single line for each page, like this:

    body.page-1{background:#fff;}
body.page-2{background:#f00;}

    etc. You’ll find the page ID’s on the “Manage Posts” screen.

    (You might actually need to write something like “body.page-1 container{}” if that’s how your CSS is set up.)

    Thread Starter rahish

    (@rahish)

    Thanks for that,

    Certainly looks plausible but what do I put for the ID if I have enabled permalinks for pages. Rather than something like
    ?page_id=5 I have the following

    domain.com/index.php/collection as the id of a page so should I have

    body.collection{background-color:#fff;} if so it doesn’t work

    Any ideas?

    Thread Starter rahish

    (@rahish)

    I am not actually sure that

    <?php if (is_page()){ ?>
   <body class="page-<?php the_ID(); ?>">
<?php }else{
   <body>
<?php } ?>

    is correct syntax as it comes up with an error in my code editor that says there is a missing ?> somewhere. I can’t work it out.

    After the else{

    Thread Starter rahish

    (@rahish)

    Great that worked, thanks a bunch.

    I am attempting to also change the background on various pages.

    I am using the corrected code
    </head>

    <?php if (is_page()){ ?>
    <body class=”page-<?php the_ID(); ?>”>
    <?php }else{ ?>
    <body>
    <?php } ?>

    <div id=”page”>

    My css looks like
    body.page-13 {
    background: #f8f8ff url(images/bg/home.jpg) no-repeat scroll 5px 0px;
    margin: 0;
    padding: 0;
    }

    I am getting no backgrounds.

    I am using a kubrick based template.

    Any idea what I may be doing wrong?

    @ Cheriejd:

    Check this topic, it might solve your problem: click

    I checked out the Template Tags/the ID information.

    So this needs to go in the loop. I am using this only on pages. So I have put this up near the top of the page info.

    <?php get_sidebar(); ?>
    <div id=”content” class=”narrowcolumn”>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class=”post” id=”post-<?php the_ID(); ?>”>

    <?php if (is_page()){ ?>
    <rap id=”page-<?php the_ID(); ?>”>
    <?php }else{ ?>
    <div id=”rap”>
    <?php } ?>

    <div class=”postheader”>

    I am not getting any background.

    I added the rap div at the top of my page (<div id=”rap”>).

    CSS now looks like this:
    #rap.page-12{
    background: #f8f8ff url(images/bg/black-smile.jpg) no-repeat scroll 5px 0px;
    }

    thoughts, suggestions, HeLP?

    thanks

    I think I’m being thick, but how is the this code, for the body tag, placed inside the Loop?

    What I mean is, it just outs “page-” without the ID

    no worries, foound a more elegant way.

    please consider sharing the more elegant way

    can someone help me,
    it returns always <body class=”page-“>

    thanks
    da

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Different background color on each page’ is closed to new replies.