Change div colour depending on category page - php

Question

I am using the woo-commerce plugin within my Wordpress environment and there are category pages which I need to change the colour of a div background depending on which category are you in.
So I have like a banner across the top which is found in 'archive-product.php'
the div is named 'publicationsHeader'
I need it to change the background when you are category pages like so..
?product_cat=creative
I am a bit stuck on the best approach?
Here is my code:
<div class="publicationsHeader">
<section>
<div class="introLeft">
<h2>Publications</h2>
<h3 style="font-size: 1.2em;
color: #fff;
line-height: 28px;
padding-top: 20px">We write and produce current, practical and highly effective publications that teachers and pupils can use with immediate effect. All resources have been revised for the 2014/15 academic year.</h3>
</div>
<div class="introRight">
<a href="https://www.facebook.com/JaneConsidineEducation" target="_blank">
<button style="background-image:url(img/facebookIcon.png)"></button>
</a>
<a href="https://twitter.com/janeconsidine" target="_blank">
<button style="background-image:url(img/twitterIcon.png)"></button>
</a>
</div>
</section>
</div>
.publicationsHeader{
background-color: #e84b34;
box-sizing:border-box;
padding: 40px 0;
height: auto;
overflow:auto;
}
.publicationsHeader h2{
font-size:3em;
color: #fff;
text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.3);
}
.publicationsHeaderLeft{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px;
float:left;
width: 50%;
}
.publicationsHeaderLeft input{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
}
.publicationsHeaderLeft textarea{
border: solid #ccc thin;
width:95%;
font-size:16px;
padding: 10px 5px;
margin: 10px 0;
resize:vertical;
}
.publicationsHeadereft button{
background-color: #ec4a2c;
border: none;
color: #fff;
padding: 10px 20px 10px 20px;
font-size:16px;
}
.publicationsHeaderRight{
background-color: #fff;
box-sizing: border-box;
padding:40px 20px 160px 20px;
float:right;
width: 50%;
}
.publicationsHeaderRight li{
padding: 5px 0;
}

Answer 1

Why not just use the body_class() function? It adds a bunch of class names to your body tag that reflect the current page; in the case of WooCommerce it will add classes for .woocommerce, tax-product_cat and a class identifying that particular category, such as: .term-my-product-cat.
Using these you could style everything quite simply:
.publicationsHeader{
background-color: #e84b34; /* Default colour */
}
.term-product-cat-1 .publicationsHeader {
background-color: red; /* Change background for header for category 1 only */
}
.term-product-cat-2 .pulicationsHeader {
background-color:blue; /* Change background for category 2 */
}
You can read more about body_class() here.

Answer 2

First fetch the get data in a variable with some default:
$pcat = empty($_GET['product_cat']) ? 'default' : $_GET['product_cat'];
Then make your div like this:
<div id="publicationsHeader" class="<?php echo $pcat;?>">
</div>
Define a class in your css file like this:
.creative {
background: url(images/creative.png);
}
.default {
background: url(images/default.png);
}

Answer 3

You could do the following: check which category is currently displaying and give the $background variable a color accordingly. Like so:
if(is_product_category('creative')){
$background = "#ffffff";
}
Then call the $backgroundin the stylesetting of your div, like so:
<div id="publicationsHeader" style="background-color: <?php echo $background; ?>">Content goes here</div>

Answer 4

You can grep the parameter $_GET["product_cat"] and wrap that in a if-clause to set the css-class of publicationHeader via javaScript.