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!

Security Professional: Sharpen Your Defenses with These .conf25 Sessions

Sooooooooooo, guess what. .conf25 is almost here, and if you're on the Security Learning Path, this is your ...

First Steps with Splunk SOAR

Our first step was to gather a list of the playbooks we wanted and to sort them by priority.  Once this list ...

How To Build a Self-Service Observability Practice with Splunk Observability Cloud

If you’ve read our previous post on self-service observability, you already know what it is and why it ...