ProgressBar barcolor changes

[l0cke1234]

Hi Primefaces geek's!

First of all ! Thanks for the great framework!

I am trying to solve the problem with different progressbar bar color, when let's say something is <50%, >70%, and >90%.
I am building some kind of report system, and there I have a data like : hdd storage and usage.
And for example one HDD uses already 60%, another 80% and another 96% of the storage.
Now, when I assign .ui-progressbar-value{background-color:yellow;} all of the listed HDD usages will be shown in yellow, I want to show them in different colors, like <50% - green, >70% - yellow, > 90% red (or something like this).

Is this possible? I mean, is there a solution for changing the color of the bars?

Whole crap is in rich:dataTable, where a specific column is for the storage usage:

Code: Select all

 <rich:column>
	    					<f:facet name="header">
	    						<h:outputText value="HDD usage"/>
	    					</f:facet>
							<h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="2">
								<h:panelGroup>
									<h:outputText value="#{item['hddusedspace']}" rendered="#{item['showbar']}">
										<f:convertNumber maxFractionDigits="2"/>
									</h:outputText>
									<h:outputText value="%" rendered="#{item['showbar']}"/>
								</h:panelGroup>
	    						<p:progressBar style="width:170px" value="#{item['hddusedspace']}" rendered="#{item['showbar']}"/>
	    					</h:panelGrid>
	    				</rich:column>

And I can't use it like

Code: Select all

<p:progressBar style="width:170px" value="#{item['hddusedspace']}" styleClass="greenbar" rendered="#{item['showbar'] and item['hddusedspace'] lt 50}"/>
<p:progressBar style="width:170px" value="#{item['hddusedspace']}" styleClass="yellowbar" rendered="#{item['showbar'] and item['hddusedspace'] gt 70 and item[hddusedspace] lt 90}"/>
<p:progressBar style="width:170px" value="#{item['hddusedspace']}" styleClass="redbar" rendered="#{item['showbar'] and item['hddusedspace'] gt 90}"/>

because simple styleClass is assigned to whole progressbar container and background-color within "greenbar", "yellowbar" and "redbar" is applied to the container not the bar itself.

Any ideas?