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

Question

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!

Answer 1

try this code:
<b:if cond='data:blog.searchLabel == "Test2"'>
<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 :)