Dashboards & Visualizations

How to change panel background color using css?

mprreddy51
Explorer

alt text

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

0 Karma

jkat54
SplunkTrust
SplunkTrust

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.

alt text

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

0 Karma

jkat54
SplunkTrust
SplunkTrust

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.

0 Karma

mprreddy51
Explorer

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

0 Karma

jkat54
SplunkTrust
SplunkTrust

... 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.

0 Karma

mprreddy51
Explorer

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

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...