All Apps and Add-ons

setting the color of single value to non standard colors

RickGenesis
Explorer

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

1 Solution

sideview
SplunkTrust
SplunkTrust

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;
}

View solution in original post

0 Karma

sideview
SplunkTrust
SplunkTrust

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;
}
0 Karma

RickGenesis
Explorer

perfect thanks very much

0 Karma

sideview
SplunkTrust
SplunkTrust

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.

0 Karma

RickGenesis
Explorer

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.

0 Karma
*NEW* Splunk Love Promo!
Snag a $25 Visa Gift Card for Giving Your Review!

It's another Splunk Love Special! For a limited time, you can review one of our select Splunk products through Gartner Peer Insights and receive a $25 Visa gift card!

Review:





Or Learn More in Our Blog >>