Color change based on availability

[Totti]

<span id="availability_value" href="http://schema.org/" style="padding-left:20px" itemprop="availability" class="warning_inline">Prodotto non disponibile  per questo gusto, ma disponibile per altri.</span>

<!-- availability -->
			<p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
				<span id="availability_label">{l s='Availability:'}</span>
				<span itemprop="availability" style="padding-left:20px" href="http://schema.org/" id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>
				{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}
				</span>
			</p>

I would like that if a product is unavailable or available in other colors is green otherwise red.

 

How can I change it ?

[vekia]

<span itemprop="availability" style="padding-left:20px" href="http://schema.org/" id="availability_value"{if $product->quantity <= 0} class="warning_inline"{else} class="nowarning_inline"{/if}>

then in css styles you can define:

.warning_inline {color:red!important;}
.nowarning_inline {color:green!important;}

you can for example use other styles like:

.warning_inline {color:white!important; padding:5px; background:red;}
.nowarning_inline {color:white!important; padding:5px; background:green;}

[Totti]

The problem is that if I select a product with an attribute with quantity to 0 I turn red.

I have to differentiate when the product does not have quantity for each attribute (red) and those products that have attributes for some amount (green).

Product not available = red
Product available with other attributes = green
Product is in stock = green.

[Totti]

Help me please !!!!!!!!!!