How to add different background color for dashboar...

av_ · ‎07-07-2023

Hi,

I have got a requirement to enhance the UI of a simple Splunk classic dashboard. I need to add different color for the dashboard background and different color for the dashboard panel. The reference image is attached below.

Can anyone help me with this.

inventsekar · ‎07-07-2023

Hi @av_ .. As suggested, you should edit the xml file and update the color parameter value.

maybe you should update us ur current dashboard's xml file(you should edit the hostnames, important details on the SPL).. so that we can help you edit the xml file.. suggst us, thanks.

Best Regards,
Sekar

my youtube channel for Splunk Newbie Learnings
https://www.youtube.com/@SiemNewbies101/videos

thanks and best regards,
Sekar

PS - If this or any post helped you in any way, pls consider upvoting, thanks for reading !

av_ · ‎07-10-2023

Hi @inventsekar

This is the sample xml:

<form version="1.1">
<label>Color Theme</label>
<fieldset submitButton="true">
<input type="time" token="field1">
<label>Time</label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="field2">
<label>Environment</label>
<choice value="Prod">Prod</choice>
<choice value="QA">QA</choice>
<choice value="DEV">DEV</choice>
</input>
</fieldset>
<row>
<panel>
<title>Fusion(XPDS, WMOS)->GI Adapter(XPDS,WMOS,BZ,LF)->Ship GW->NSP->SCPI Inbound->SCPI Outbound->S4</title>
</panel>
<panel>
<title>Fusion(XPDS, WMOS)->GI Adapter(XPDS,WMOS,BZ,LF)->NSP Topic->Shipped BRE service / SQS in Ship GW ->NSP->SCPI Inbound->SCPI Outbound->S4</title>
</panel>
</row>
<row>
<panel>
<chart>
<title>2nd Panel</title>
<search>
<query>index=main</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="charting.chart">line</option>
<option name="charting.drilldown">none</option>
</chart>
</panel>
<panel>
<table>
<title>First Panel</title>
<search>
<query>Index=main</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>

Reference image is attached in the beginning of the thread.

GaetanVP · ‎07-07-2023

Hello @av_

You can try to open your classic dashboard and edit the source (you will see a big xml file)

Inside the <panel></panel> tag, you can add something like this (it's basically CSS lines)

    <html>
        <!-- main background of the dashboard -->
        <style>
            .dashboard-body {
                background-color: #b4c519
            }
        </style>

        <!-- background of the panel -->
        <style>
            .dashboard-panel {
                background-color: #217727
            }
        </style>

        <!-- background of the titel panel section -->
        <style>
            .panel-title {
                background-color: #c51951
            }
        </style>
    </html>

Keep in mind that you can simply inspect the results of the dashboard with your browser and find the HTML classes of section you want to modify and add other CSS lines to the xml.

Hope it will help !
GaetanVP

How to add different background color for dashboard & panels?

chart

See your relevant APM services, dashboards, and alerts in one place with the updated ...

Index This | What goes away as soon as you talk about it?

What's New in Splunk Observability Cloud and Splunk AppDynamics - May 2025

Are you a member of the Splunk Community?

How to add different background color for dashboard &amp; panels?

chart

See your relevant APM services, dashboards, and alerts in one place with the updated ...

Index This | What goes away as soon as you talk about it?

What's New in Splunk Observability Cloud and Splunk AppDynamics - May 2025

How to add different background color for dashboard & panels?