How to change the background color (from a CSS) of a gauge?

[skender27]

Hi,

I have two gauges and a css file (dark.css) to manage the colors for all dashboard panels.
What I am trying to do is to control also the color of these gauge panels.
Is there any css specification to do this?

In my dark.css (which I put in form stylesheet=dark.css... tag in the xml source of the entire dashboard) I have:

body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell {
background: #18353b !important; /*color of whole background/*

And this works for all except the two gauges panels I have (they will maintain white colors at the beginning/refresh as default in Splunk and you have to click on Modify panels to make their color become same as all the dashboard background).

Any help?

Thanks,
Skender

[nfilippi_splunk]

You can also style using xml options:

<chart>
       ...
        <option name="charting.backgroundColor">#475565</option>
        <option name="charting.foregroundColor">#EBF5FF</option>
        <option name="charting.fontColor">#99CCFF</option>
</chart>

Which should result in something like this:

[skender27 · Accepted solution]

With the inspector of the page (using Iceweasel -> Inspect element), I discovered that the class was called highcharts-container, so I just added it to my css file application.css like this:

body,.dashboard-body,.footer,.header,.app-bar,.dashboard-panel,.dashboard-cell,.highcharts-container {
    background: #18353b !important; /*colore background tutta la dashboard*/
    }

Problem resolved!!!
Skender

[skender27]

In order to control also the input fields for the dashboard (radio buttons, labels etc), I did the same thing:

.fieldset .input {
    width: 220px;
    color: #ddd;
}

[skender27]

To illustrate it better, I have a situation like this below: