setting the color of single value to non standard colors

[RickGenesis]

I am using sideview utils displayvalue for multiple single values and I want to set the color to a non standard field value/color (ie I'm using case to set the field value not range) I thought I could just use some CSS similar the simpletable examples, but I assume the displayvalue module only accepts the standard output from range or I am getting my syntax wrong(Im not great with CSS so this is very likely). I looked at the CSS being applied with firebug, which shows the below class name, but I still cant get it working.

    <module name="HTML">
  <param name="html">
    <![CDATA[
    <style type="text/css">
    .valueDisplay div.inner critical{
    background-color:#ff2052;
    }        
    .valueDisplay div.inner degraded{
    background-color:#f01b31;
    }
    .valueDisplay div.inner good {
    background-color:#008000;
    }
    .valueDisplay div.inner maintenance {
    background-color:#d2691e;
    }
  </style>
<div style="width:400px">
    <div class="valueDisplay"><b>app status</b>
    <div class="inner $results[0].impact$"><b>$results[0].impact$</b></div>
    </div>
  </div>
    ]]>
  </param>
</module>

Thanks

[sideview · Accepted solution]

Take out those "div.inner" bits. Also the "degraded", "critical" classnames need to have leading "." characters for it to be interpreted as a rule for classnames. Without the period the CSS engine is going to look for HTML elements with those tagnames (ie <critical>) and they wont exist.

Overall your rule is saying "find <critical> nodes inside of (a div that has class="inner"), that is in turn inside (any element that has class of "valueDisplay"). If you look at the HTML, you'll see that the "critical" classnames etc are on the same div as the class="inner", not nested within. So the div.inner really has to be taken out of there.

Change to:

.valueDisplay .critical{
  background-color:#ff2052;
}        
.valueDisplay .degraded{
  background-color:#f01b31;
}
.valueDisplay .good {
  background-color:#008000;
}
.valueDisplay .maintenance {
  background-color:#d2691e;
}

[RickGenesis]

perfect thanks very much

[sideview]

interesting. Change ".valueDisplay" to "div.valueDisplay" and that'll bump up the precedence enough to explicitly override the default. I'd thought the embedded style would trump the included style, but on secodn thought it's actually execution order and I think the included styles are included at the bottom of the HTML or something.

[RickGenesis]

still not working, when I look in firebug I can see the top style is .valueDisplay div.inner followed by my style (but with a line through it). If I disable the top styles entry for backgroud color the next one down (mine) applies which, so it looks like the default one gets applied after mine.