WordPress.org

1. erwin_m
   Member
   Posted 1 year ago #

   I'm tyingto change the background of a div for each page. There was a thread before over this subject, but it doesn't work for me. So the question is, what am I doing wrong?

   The previous thread is: http://wordpress.org/support/topic/css-div-background-image-change-by-page-id?replies=11

   My code so far.
   PHP
   

   <?php
   $class = '';
   if (is_page('Home')) {
     $class = 'home1';
   } elseif (is_page('Counseling')) {
     $class = 'counseling';
   } ?>

   CSS
   

   #header {
   					height: 225px;
   					background: #fff no-repeat;
                                           background-image: url(/img/header_visual/1.jpg);
   					position: relative;
   					margin-bottom: 20px;
   					}
   				#header.home1 {background-image: url(/img/header_visual/7.jpg);}

   I'm hoping somebody can help me.

2. richarduk
   Member
   Posted 1 year ago #

   Can't tell from what you've shown us.

   View source and see if the desired class is being output. If it is, then the problems is in the stylesheet. Go to the CSS validator and either paste in the snippet or, if it's an external stylesheet, the whole style sheet (there can be a cascading effect from further up the page).
   http://jigsaw.w3.org/css-validator/

   If view source doesn't show the correct class being output, then it's a problem with the php.

3. Digital Raindrops
   Member
   Posted 1 year ago #

   You are assigning the $class in header.php, something like?
   

   <?php
   $class = '';
   if (is_page('Home')) {
     $class = ' class="home1" ';
   } elseif (is_page('Counseling')) {
     $class = ' class="counseling" ';
   } ?>
   
   <id="header"<?php echo $class; ?>>

   This code might be more tidy:
   

   <?php if (is_page('Home')) : ?>
        <id="header" class="home1">
   <?php elseif (is_page('Counseling')) : ?>
        <id="header" class="counseling">
   <?php else: ?>
        <id="header">
   <?php endif; ?>

   These both give one of these:
   

   <id="header" class="home1">
   <id="header" class="counseling">
   <id="header">

   HTH

   David

4. erwin_m
   Member
   Posted 1 year ago #

   The problem is the css. The class is in the source.

   The validator gives me:

   #header Parse Error header. home1 { background-image: url(/img/header_visual/7.jpg); }

   What is the problem with this?

5. Digital Raindrops
   Member
   Posted 1 year ago #

   Could it just be a space or lack of one, or a case problem?

   Your sample style has no space between id and class?
   

   #header.home1 {background-image: url(/img/header_visual/7.jpg);}

   Does it need a space between the id and class?
   

   #header .home1 {background-image: url(/img/header_visual/7.jpg);}

   Do the folders 'img' and 'header_visual' exist in the themes folder and are all lower case, as in your style?
   '/img/header_visual/7.jpg'

   Just observations, if no joy then a live link would help.

   Edit:
   The parse message has a space between the period and class name.
   

   header. home1

   Check your stlye is correct.
   

   #header.home1 {

   Or
   

   #header .home1 {

   HTH

   David

6. alchymyth
   The Sweeper
   Posted 1 year ago #

   imho, there should not be a / before img/ (depending on your folder structure) - assuming that the css code is in style.css (or any other stylesheet)
   #header.home1 {background-image: url(img/header_visual/7.jpg);}

   a link to your site would definitively help.

7. richarduk
   Member
   Posted 1 year ago #

   The snippet that you gave us validates.

   I don't know if you're validating a whole style sheet or just a snippet - if you're validating a whole stylesheet then something higher up the stylesheet might be causing a problem, and the effect is cascading down.

   In which case, do a bit of the stylesheet at a time to eliminate the problem.

8. Digital Raindrops
   Member
   Posted 1 year ago #

   @alchymyth,
   Good call I never see that one, had my head in the code to much, this is one of the quirky bits, in code you need the leading / like get_template_directory_uri() .'/img/header_visual/7.jpg', but not required in the css.

   Regards

   David

9. erwin_m
   Member
   Posted 1 year ago #

   Ok, thanks all for watching with/for me. The space which was mentioned, I was palying with it, trying out. It didn't make any difference.
   I've removed the / , this didn't help either. Also I've put in the complete url, which also didn't help.
   You can see the site at: http://www.jac quelinelam merts.nl/wp/
   The banner with the flower should change between weblog and home, other menu-items are not coded in completely. Weblog is without any class and is default, the other pages have classes added which should put in another background.

   Please remove the spaces. This forum is so good, that it sometimes appears as first hit with a searchstring ;).

10. Digital Raindrops
    Member
    Posted 1 year ago #

    Home has an extra quote " in the class name "home1""

    <div class="home1"" id="header">

    HTH

    David

11. alchymyth
    The Sweeper
    Posted 1 year ago #

    @adeptris is right;

    also, you have put the (wrong) space back into the style; this should be:
    (because it is a css id and a css class in the same element)

    #header.home1 { background-image: url(http://www.yoursite/wp/wp-content/themes/Jcq/img/header_visual/7.jpg); }

    also, the image does not exist where it should be:

    http://www.yoursite/wp/wp-content/themes/Jcq/img/header_visual/7.jpg

    (substitute your real site address)

12. erwin_m
    Member
    Posted 1 year ago #

    Ok, it all makes sense, the image is present right now. But, I don't know where extra " comes from.
    I've added my code, would you please take a look? I don't see it.

    <?php
    $class = '';
    if (is_page('Home')) {
      $class = 'home1';
    } elseif (is_page('Counseling')) {
      $class = 'counseling';
    } elseif (is_page('Coaching')) {
      $class = 'coaching';
    } elseif (is_page('Reïntegratieondersteuning')) {
      $class = 'reintegratieondersteuning';
    } elseif (is_page('Verzuimondersteuning')) {
      $class = 'verzuimondersteuning';
    } elseif (is_page('Werkwijze')) {
      $class = 'werkwijze';
    } elseif (is_page('Cliënten aan het woord')) {
      $class = 'clienten';
    } elseif (is_page('Het team')) {
      $class = 'team';
    } elseif (is_page('Contact')) {
      $class = 'contact';
    } elseif (is_page('Praktijkinformatie')) {
      $class = 'praktijkinformatie';
    } ?>
    
    <div id="header"<?php if($class) echo ' class=' . $class . '"'; ?>>		
    
    					<ul>
    
    		 <li class="home"<?php
                    if (is_page("Home"))
                    {
                    echo " id=\"current\"";
                    }?>>
                    <a href="http://www.yoursite.nl/wp/">HOME</a>
            </li>
    
                      <li class="menu"<?php
                    if (is_category('Weblog') || in_category('1') && !is_single())
                    {
                    echo " id=\"current\"";
                    }?>>
                    <a href="http://www.yoursite.nl/wp/?cat=1">WEBLOG</a>
            </li>

    The last bit is for current pages, I thought lets add it, so it isn't confusing.

13. alchymyth
    The Sweeper
    Posted 1 year ago #

    this line:
    <div id="header"<?php if($class) echo ' class=' . $class . '"'; ?>>

    it is actually not an extra " but a missing one:
    the above lin should look like:

    <div id="header"<?php if($class) echo ' class="' . $class . '"'; ?>>

14. erwin_m
    Member
    Posted 1 year ago #

    alchymyth, your the best! It works. And of course I'm not forgetting adeptris, he's also putted in a lot of thinking. I will thank you for that!

15. alchymyth
    The Sweeper
    Posted 1 year ago #

    it is always down to team work ;-)

    the members here are a great bunch of guys and girls with a wide range of knowledge and experience - it is an honor and joy to be part of this.

Topic Closed

This topic has been closed to new replies.