Search code examples
cssconditional-statementsbloggerblogspot

How to get conditional css to work on Blogger/Blogspot?

I'm trying to get conditional CSS to work in Blogger / Blogspot - might be missing something obvious and fundamental to make it work but here we go.

A number of tutorials I've found have provided instructions but when i follow them they don't work (nb: they work perfectly when used in the template body to hide certain widgets on certain pages but i can't get them to work to style different elements differently on different pages).

So, as an example I want to have a different date background color depending on what page you're on here.

The date header styling is:

    .date-header span {
      background-color: #FF8BBF;
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }

I want the background color of the date to be different on another page, so as per various tutorials I've added the following code just above the template closing head tag.

<b:if cond='data:blog.url == "http://mgmmediaadditionaldemoblog.blogspot.com.au/search/label/Test2"'>
<style>
  .date-header span {
    background-color: #FF937E;
  }
</style>
</b:if>

But it's not changing the colour on the page specified. I've tried variations - putting the conditional code in the b:skin or b:template-skin sections of the head but i can't make it work - any help on this would be greatly appreciated!

Solution

  • try this code:
    <b:if cond='data:blog.searchLabel == &quot;Test2&quot;'> <style> .date-header span { background-color: #FF937E!important; } </style> </b:if>

    Test2 is the label, and add !important to your color code to make browser load background-color: #FF937E instead of background-color: #FF8BBF;.

    I wait for your feedback :)