topic Re: How to change panel background color using css? in Dashboards & Visualizations

How to change panel background color using css?

mprreddy51 — Thu, 26 May 2016 05:12:00 GMT

Hi,

I have 5 panels in a row as shown in screen shot with yellow color heading.

I am trying to change the background color of each panel like red background, pink, blue...etc. I used this CSS file to get heading yellow, but I am not getting background color of each panel. Any ideas/suggestions?

CSS:

#panel2 h2.panel-title{
background-color: #FFD501;
}
#panel3 h2.panel-title{
background-color: #FFD501;
}
#panel4 h2.panel-title{
background-color: #FFD501;
}
#panel5 h2.panel-title{
background-color: #FFD501;
}
#panel6 h2.panel-title{
background-color: #FFD501;
}

Thanks,
PR

Re: How to change panel background color using css?

jkat54 — Thu, 26 May 2016 12:21:53 GMT

right click and inspect element in Chrome. You'll see the computed CSS as well as which div is in use etc. Then override that div/class in your css.

Re: How to change panel background color using css?

mprreddy51 — Thu, 26 May 2016 16:50:14 GMT

Is there no syntax for that?
like: #panel6 h2.panel-title{
background-color: #FFD501;
}

Re: How to change panel background color using css?

jkat54 — Thu, 26 May 2016 18:42:01 GMT

... im telling you how to find the div/class via developer tools. Once you know the correct div id / class etc. you can write your css using whatever syntax is appropriate.

Re: How to change panel background color using css?

mprreddy51 — Thu, 26 May 2016 18:45:48 GMT

Yup, I followed that procedure rightclick and inspect but not getting the panel class rest all i am able to change the colors like heading ,spacing...etc thanks for ur responce

Re: How to change panel background color using css?

jkat54 — Thu, 26 May 2016 19:13:25 GMT

Are you looking at the "styles" details on the right? There you find the computed style... also maybe style on tag in the code itself that you'll have to override.

Here i've changed the answers.splunk.com boxes to red: