Quick CSS question, clashing/overriding CSS?

[wartex11]

Hey guys,

 

Just got a quick question, appreciate the responses in advance...

 

I am trying to make the "This product is currently out of stock" red on my product page, it is currently green, but when I play with the CSS either it stays green or because it is the same tag as the "In stock" status message, the "In stock" message style plays up,

 

I've attached some photos and snippets of code, if someone could point me in the right direction that would be great!

 

These are the surrounding css comments I believe in product.css: (the ones I've commented out are things I've tried),

 

#availability_statut {
    padding-bottom: 10px;
    float: left;
}
#availability_statut span#availability_label {
    font-weight: bold;
    padding-right: 7px;
    color: #333;
}
#availability_statut span#availability_value {
    display: inline-block;
    margin-right: 7px;
    color: #207a20;
    font-weight: bold;
}



.warning-inline {
    display: inline-block;
    margin-right: 7px;
    color: #F00 !important;
    font-weight: bold;
}

/*
.row_1 p.our_price_display span#old_price_display {
}
*/


/*#availability_statut span#availability_value span.warning-inline {
    display: inline-block;
    margin-right: 7px;
    color: #F00 !important;
    font-weight: bold;
}
*/
 

 

I've tried adding !important to global.css:

 

 

.warning_inline {
    color: #ff0000 !important;
    font-weight: bold;
}

 

[wartex11]

I seem to be doing this all the time...spend a night trying to figure it out, post on Prestashop Forums and then figure it out some how!

 

For the archive:

 

I think the warning-inline code was clashing, I changed the secondary class to class="out_of_stock"

 

and added the following code to product.css under #availability_statut span#availability_value:

 

#availability_statut span#availability_value {
    display: inline-block;
    margin-right: 7px;
    color: #207a20;
    font-weight: bold;
}

#availability_statut span#availability_value.out_of_stock {
    display: inline-block;
    margin-right: 7px;
    color: #F00;
    font-weight: bold;
}