WordPress – Display different HTML elements on Homepage

2 Views

I want to display different header sections on the home screen and article screen. I thought something like this would work: 

<? php if( is_home() ) { ?>
  <header class="header home" role="banner">
  <?php  } else { ?>
  <header class="header" role="banner">
  <?php
 }
?>

Where, in my CSS, the following takes place:

Read More
.header {
    background: $blue;

    &.home {
        background: $blue; 
    }
}

In reality I should see a green header on the home page, and a blue one on the homepage. But I don’t. Any clues?

Post Views: 2

Related posts

Leave a Reply

5 comments

  3. Assuming the code you posted is the code you’re using code, you apply the $blue attribute to both .header and .header.home instead of applying something like $green to one of them.

    .header {
    background: $blue;

    &.home {
        background: $blue; 
    }
}

    If you’ve declared a variable $green to hold a hexadecimal value representing a green color try

    .header {
    background: $blue;

    &.home {
        background: $green; 
    }
}

    See this JSFiddle for a working example: http://jsfiddle.net/SSCnJ/

  4. It might not be the solution, but you could also try changing this

     background: $blue;

    to this

     background-color: $blue;

    assuming that $blue holds either a hexadecimal value with a # in front, or is an rgba value.

    Hope this helps.