Changing the PAGE WRAP color for each page. PHP?

  • Resolved Meeker Jones

    (@mikaanami)


    11 years, 10 months ago

    Hey,

    I have a site that needs to have “different colors” for each page’s PAGE WRAP background image. A lot of forums discuss simply the background color of a page, but in my case, it is a constant background with the PAGE WRAP colors changing.

    ALSO – I am using a translucent .png file (repeated) to create a see thru color for this background. So I am looking for some php or css that allows me to specify each page’s page wrap’s background image.

    For example I have something like this already working for me for each banners that go on the different pages:

    <div id=”banner-image”>
    <?php if (is_page(‘about’)) { ?> <?php bloginfo(‘image_url’); ?><img src=”/images/top_banners/about.jpg”><?php } ?>
    <?php if (is_page(‘contact’)) { ?> <?php bloginfo(‘image_url’); ?><img src=”/images/top_banners/contact.jpg”><?php } ?>
    </div>

    Right now I am only able to assign 1 color (background image) to all the page wraps, since I can only seem to color the background of my pagewrap from my style.css file.
    Here is the code for my css that is assigning only 1 color. (again, I am using a bg image to color my pagewrap.)

    #page-wrap {
    width: 830px;
    margin: 0px auto ;
    background: url(images/bg_about.png);
    }

    Somehow when it comes to the php for background image of the PAGE WRAP – I am very lost… Does anyone have any suggestions? What are the tags I should use instead of assigning from the style sheet? How do I change it for each page?

    Thanks for your help!

    Meekr

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    11 years, 10 months ago

    if your theme uses body_class() it will have individual css classes for each page, with the psge ID incorporated, such as:

    .page-id-27

    you can build your page background css on those; example (assuming the ‘about’ page has the page id 27):

    .page-id-27 #page-wrap { background-image: url(images/about.png); }

    or you can code a conditional section within the <head> section of header.php:

    <style type="text/css">
#page-wrap { <?php
if (is_page('about')) { echo 'background-image: url('.get_stylesheet_directory_uri().'/images/about.png);'; }
elseif (is_page('contact')) { echo 'background-image: url('.get_stylesheet_directory_uri().'/images/contact.png);'; } ?> }
</style>

    http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

    Thread Starter Meeker Jones

    (@mikaanami)

    11 years, 10 months ago

    Thank you so much The Sweeper
    This works!
    I have a custom site, so I did not have page ID – but the <head> section php worked.

    Further:
    You gave me code to do 2 pages – I imitated the code for my 3rd -6th pages and it doesn’t seem to work…

    This is what you gave me
    <style type=”text/css”>
    #page-wrap { <?php
    if (is_page(‘about’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/about.png);’; }
    elseif (is_page(‘contact’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/contact.png);’; } ?> }
    </style>

    To add more pages, the bolded part is what I will repeat – correct?
    Before I seal it with the final “?> }” to close out the PHP.
    or the wording “elseif” would be different for more pages? Somehow it is not working for the next 4 pages.

    <style type=”text/css”>
    #page-wrap { <?php
    if (is_page(‘about’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/about.png);’; }
    elseif (is_page(‘contact’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/contact.png);’; }

    elseif (is_page(‘sample1’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/bg_sample1.png);’; }
    elseif (is_page(‘sample2’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/bg_sample2.png);’; }
    elseif (is_page(‘sample3’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/bg_sample3.png);’; }
    elseif (is_page(‘sample4’)) { echo ‘background-image: url(‘.get_stylesheet_directory_uri().’/images/bg_sample4.png);’; }
    ?> }
    </style>

    is what I got.
    Any fault you see?
    for the last 4 pages, the background doesn’t show up.

    Thank you!
    Meekr

    Thread Starter Meeker Jones

    (@mikaanami)

    11 years, 10 months ago

    sorry about the bad BOLDING at the top – please ignore the bold towards the end…

    Thread Starter Meeker Jones

    (@mikaanami)

    11 years, 10 months ago

    The Sweeper,

    Actually – I figured it out.
    What you originally told me worked.

    HUGE HELP – now I can use this for unique footer colors and such, too – I will see.

    Really really appreciate it!!!

    Meekr

    Michael

    (@alchymyth)

    11 years, 10 months ago

    [edit]well done – took me too long to reply ;-(

    the code looks ok; and works in my test setup.

    for the last 4 pages, the background doesn’t show up

    does the style code get output into the head section, i.e. is the conditional statement triggered for the right page?

    is ‘sample1’ the exact spelling of a page title, or is it a page slug?

    try to change to use the page title, or the page slug, or the page ID in the conditional code.

    double check the image urls…

    if you post a link to your site, I can have a look at the output of the different pages.

    Thread Starter Meeker Jones

    (@mikaanami)

    11 years, 10 months ago

    Thanks Sweeper.
    I was able to change my footer colors for each page – using this technique.
    This has been very helpful.
    Thank you for sharing your knowledge!!!

    Meekr

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing the PAGE WRAP color for each page. PHP?’ is closed to new replies.