Dashboards & Visualizations

How to change the color of an entire panel in an HTML dashboard?

softek
Explorer

Hi, sorry noob question but have been hunting the docs / answers for ages...

Simple XML. I have 2 panels.

  1. A chart panel which shows for example 10 bars and is lets say has been set to 400px tall.

  2. To the right of it, I have an HTML panel with just 2 lines of text for an explanation of the chart.

I have created / set custom CSS dashboard.css for the text panel to change it from white (default) to silver and it works ok..

However, the HTML panel is of course is as tall as the chart panel next to it, but the CSS silver color is only applied to the lines of text, the rest of the 300px of that panel are white..

How to color the entire HTML panel to silver so it doesnt look odd?

Thanks!

0 Karma
1 Solution

softek
Explorer

I have simply added this to the custom dashboard.css

.dashboard-row .dashboard-panel .panel-body.html {

background: #F5F5F5;

}

View solution in original post

0 Karma

nidhigoyal
Explorer

Find div element of the html Panel and apply following code by editing element number. for example in my case, "its element 1" :

div#element1{
background-color:#00CDCD;}

0 Karma

softek
Explorer

I have simply added this to the custom dashboard.css

.dashboard-row .dashboard-panel .panel-body.html {

background: #F5F5F5;

}

0 Karma

markthompson
Builder

@ppablo_splunk - Please convert this comment to answer and mark as answer. Thanks 🙂

0 Karma

norbert_hamel
Communicator

possible that you have applied the css color to the wrong HTML element? could you drop the code for better insight?

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...