In single-value: CSS by value impossible

[secuc2r83]

Hello,

In a simple XML: i use a single value and i need , with a CSS, to change parameters by value (ex: if test1 => color=green, backgroung=red....)
But impossible to apply css by value (can't use token in single value)
I check "Splunk Dashboard Example 6x" but they do it by panel, never by single-value
I check parameters in Firefox's dev tools, but all my tests failed

Ex:

<panel>
      <single id="my_single">
       <search>
          <query>| stats count as value | eval value = 4550 | rangemap field=value test1=0-99 test2=100-999 test3=1000-2999</query>
        </search>
        <option name="field">range</option>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x65a637","0x6db7c6","0xf7bc38","0xf58f39","0xd93f3c"]</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
      </single>
    </panel>

Test successfull:

#my_single .single-result {
font-size: 75px !important;
background-color: blue !important;
}

Tests failed when i try by value:

#my_single .test1.single-result.text {
font-size: 75px !important;
background-color: blue !important;
}

#my_single .single-result.text.test1 {
font-size: 75px !important;
background-color: blue !important;
}

#my_single .single-result.text.value.test1 {
font-size: 75px !important;
background-color: blue !important;
}


#my_single .single-result.text.value-test1 {
font-size: 75px !important;
background-color: blue !important;
}

#my_single .single-result.text-test1 {
font-size: 75px !important;
background-color: blue !important;
}

.test1.single-result-value {
font-size: 75px !important;
background-color: blue !important;
}

#my_single .test1.single-result.text-value {
font-size: 75px !important;
background-color: blue !important;
}

Thanks for your help

[secuc2r83]

Hi niketnilay,

I successfully adapt your script to use it with strings.

Thanks for your helps
Regards

[niketn · Accepted solution]

@secuc2r83 when Single Value is Rendered CSS override will not work. You might have to try with Simple XML JS Extension. Please refer to the one of my older answer on Similar lines: https://answers.splunk.com/answers/583539/can-we-set-two-different-colors-for-single-value-a.html

Adjust to your needs and if you need further help, let us know 🙂