SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change background color and image from page to page

    screen-shot01.jpg

    Brand new to WordPress.
    I'm trying to reproduce the attached image. My goal is to change the image, the two color boxes and the title of the page depending on the page. So for example if you go to the "Minutes" page you would get two shades of green, the title "Minutes" and a new image instead of the flowers. The header.php contains the navigation and center logo. The sidebar.php contains the color boxes, the image and the title, the purples, the flowers and "Minutes" respectively.
    Is this doable?
    Thank you very much.

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can do it with IDs on the <body> tag, changing them page by page using some PHP and Wordpress conditional comments.

    Here's an example:

    PHP Code:
    <?php
    if ( is_page('home') ) { 
     
    $bodyID 'home'
    } elseif ( 
    is_page('minutes') ) { 
     
    $bodyID 'minutes'
    } elseif ( 
    is_page('about') ) { 
     
    $bodyID 'about'
    } else {
     
    $bodyID 'home';
    }
    ?>
    ... and so on one for each page you want to style differently....

    There are lots of possibilities besides "is_page()": http://codex.wordpress.org/Conditional_Tags

    Then for the <body> tag:
    HTML Code:
    <body id="<?php echo $bodyID; ?>">
    Then in your .css file, target the body ID in front of each selector that you have differing {properties:values;} for:

    Code:
    #home img{property:value;}
    #about img{property:value;}
    #minutes img{property:value;}
    These selectors are just examples. I don't know what your HTML/CSS looks like.

    Hope it helps.

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. That worked really well. I am able to get each piece to work like I want it to pretty much.
    I'd read similar explanations and couldn't understand or get them to all come together. Your ideas and code were just what was needed.
    thanks again.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No problem, glad to assist when I can.

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,
    thanks so much for your answer,
    A new related problem ...
    I put in the following PHP into the sidebar
    PHP Code:
        <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Widgets')) : else : ?>
         <div id="aside">
            <div id="photo">
                <div class="page-name">
                
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <?php endwhile; ?>
            <h2 class="page-title"><?php the_title(); ?></h2>

        <?php include (TEMPLATEPATH '/inc/nav.php' ); ?>

        <?php else : ?>

            <!--<h2>Not Found</h2>-->

        <?php endif; ?>

            </div>
                <div class="photo">
                    <img src="<?php echo $bodyID?>" />
                </div>
            </div><!--end of TEXT-IMAGE-->            
            <div class="clearfix"></div>

        <div class="content">

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div>
                <div class="entry">
                    <?php the_content(); ?>
                </div>
            </div>
            

        <?php endwhile; ?>

        <?php include (TEMPLATEPATH '/inc/nav.php' ); ?>

        <?php else : ?>

            <p style="position:absolute; top:-200px;width:200px;line-height:20.75px;">The page was not found. Please click on the menu item to the right to return to your desired page.</p>

        <?php endif; ?>
        
            </div><!--end of CONTENT-->
        </div><!--end of ASIDE-->  
        
        <?php endif; ?>
    There's some extraneous stuff in there I know and I do want to strip this out, but that (will) be a later thing.
    The problem now is there is a blank image error in IE, the little red x in the upper left hand corner.
    My thought is because I don't have a "empty image" image nor a way to describe it. That is, there is (I think) there is no else for none of the menu items.


    PHP Code:
    <?php 
        
    if ( is_page('home') ) {  
             
    $bodyID 'home';
        } elseif ( 
    is_page('updates') ) {  
             
    $bodyID 'updates';  
        } elseif ( 
    is_page('about') ) {  
             
    $bodyID 'about';  
        } elseif ( 
    is_page('community-info') ) {  
             
    $bodyID 'community-info'
        } elseif ( 
    is_page('board-members') ) {  
             
    $bodyID 'board-members';   
        } elseif ( 
    is_page('minutes') ) {  
             
    $bodyID 'minutes'
        } elseif ( 
    is_page('covenants') ) {  
             
    $bodyID 'covenants';   
        } elseif ( 
    is_page('by-laws') ) {  
             
    $bodyID 'by-laws'
        } elseif ( 
    is_page('financials') ) {  
             
    $bodyID 'financials';  
        } elseif ( 
    is_page('contact') ) {  
             
    $bodyID 'contact';   
        } else { 
             
    $bodyID 'home'
        } 
    ?>

    <body id="<?php echo $bodyID?>">
    Am I making sense?
    If that is the reason, how do I say not any of the above?
    Is this thinking along the right path?
    thank you.

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The image path that you have set is:
    PHP Code:
    <img src="<?php echo $bodyID?>" />
    that is just going to print:
    Code:
    <img src="home" ... />
    or whatever the body ID is for that particular page. You need to add a path to an image file that is on your server into the src="" attribute.

    Though to tell it if "IS NOT" this add an ! (exclamation point) before the "if" like so:

    PHP Code:
    <?php  
       
    if ( !is_page('home') ) {   
            
    $bodyID 'not-home'
       } else {   
            
    $bodyID 'home';   
       }  
    ?>
    Hope it helps.

  7. #7
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    I'm still getting the red X indicating a missing image. The page has the image I would like but there is also the X icon so I know that some image is missing somewhere.
    When I change from " is_page('home') " to " !is_page('home') " I still get the X but the image and background color stays the same from page to page. The image/color scheme is the home page one.


    Though to tell it if "IS NOT" this add an ! (exclamation point) before the "if" like so:
    PHP Code:
    <?php  
       
    if ( !is_page('home') ) {   
            
    $bodyID 'not-home'
       } else {   
            
    $bodyID 'home';   
       }  
    ?>
    The client decided she actually wanted the "about" page to be the home page. I did go into the CSS and the PHP and make what I thought were the changes, but from what I could tell (still limited understanding) those changes did not change the effects I wanted.

    More thoughts and help please.

    thanks

  8. #8
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I got the problem solved about the missing image (the red X) on the page.
    I made a transparent .gif the size of the image I was replacing with the php code. So the default was the .gif which appears on all the pages and the background-image that is pulled up with the "$bodyID ='abc'" CSS definition.

    PHP Code:
            <div class="photo">
                <img src="/wp-content/uploads/2011/11/Meadow_Creek_HOA1.gif" alt="Meadow Creek Homeowners Association"<?php 
        
    if ( is_page('home') ) {  
             
    $bodyID 'home';
        } elseif ( 
    is_page('updates') ) {  
             
    $bodyID 'updates';  
          } elseif ( 
    is_page('about') ) {  
             
    $bodyID 'about';
        } elseif ( 
    is_page('community-info') ) {  
             
    $bodyID 'community-info'
        } elseif ( 
    is_page('board-members') ) {  
             
    $bodyID 'board-members';   
        } elseif ( 
    is_page('minutes') ) {  
             
    $bodyID 'minutes'
        } elseif ( 
    is_page('covenants') ) {  
             
    $bodyID 'covenants';   
        } elseif ( 
    is_page('by-laws') ) {  
             
    $bodyID 'by-laws'
        } elseif ( 
    is_page('financials') ) {  
             
    $bodyID 'financials';  
        } elseif ( 
    is_page('trials') ) {  
             
    $bodyID 'trials'
        } elseif ( 
    is_page('contact') ) {  
             
    $bodyID 'contact';   
        } else { 
             
    $bodyID 'home'
        } 
    ?> /> 
            </div>

    thanks for the help along the way


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •