topic Re: How to add different background color for dashboard & panels in Splunk Search

How to add different background color for dashboard & panels?

av_ — Mon, 10 Jul 2023 18:40:10 GMT

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.

Re: How to add different background color for dashboard & panels

GaetanVP — Fri, 07 Jul 2023 15:08:23 GMT

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>  <style> .dashboard-body { background-color: #b4c519 } </style>  <style> .dashboard-panel { background-color: #217727 } </style>  <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

Re: How to add different background color for dashboard & panels

inventsekar — Fri, 07 Jul 2023 22:02:53 GMT

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

Re: How to add different background color for dashboard & panels

av_ — Mon, 10 Jul 2023 09:21:43 GMT

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.

topic Re: How to add different background color for dashboard &amp; panels in Splunk Search

How to add different background color for dashboard & panels?

Re: How to add different background color for dashboard & panels

Re: How to add different background color for dashboard & panels

Re: How to add different background color for dashboard & panels

topic Re: How to add different background color for dashboard & panels in Splunk Search