Adding different colours to each panel in a dashboard- Splunk Cloud

dkgs — Mon, 21 Sep 2020 10:57:48 GMT

Hello,

I wanted to add colours to the dashboard panel. Please find below the dashboard code and screenshot. There are hyperlinks in each panel and I need to add colors to the background of each panel. Any help would be appreciated. Adding the dashboard code also below. @niketn

<label>Test-Landing dashboard </label>
<description>Links to all other dashboards</description>
<row>
<panel depends="$alwaysHideHTMLStyle$">

<html>
<style>

body{margin-bottom: 150px;background: #FFDAB9!important;}

.dashboard-body{background-color:#FFDAB9!important; font-weight:bold!important}

</style>

<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/30min_block" style="color:black;" alignment="central">30 MIN BLOCK</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/high_disk_" style="color:black;">High Disk %</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/cpu_utilization_ae6hg218" style="color:black;">CPU Utilization AE6HG218</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/30min_block" style="color:black;">Server - Dashboard</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/sql_agent_not_running_in_Server_servers" style="color:black;">SQL Agent Not Running in Server Servers</a></center>

</html>
</panel>
</row>
<row>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/high_cpu" style="color:black;">High CPU</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/sql_serv_not_running" style="color:black;">SQL Serv Not Running</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/sql_server_cpu_usage" style="color:black;">SQL Server CPU UsageK</a></center>

</html>
</panel>
<panel>
<html>


<center><a href="https://abc.splunkcloud.com/en-GB/app/project_base-Server/job_fail" style="color:black;">JOB FAIL</a></center>

</html>
</panel>
<panel>
<html>

Re: Adding different colours to each panel in a dashboard- Splunk Cloud

ITWhisperer — Mon, 21 Sep 2020 11:13:56 GMT

This sort of thing has been answered many times. Essentially, you give your panels an id and then add a css style associated with that id.

Re: Adding different colours to each panel in a dashboard- Splunk Cloud

niketn — Mon, 21 Sep 2020 13:04:16 GMT

@dkgs , whatever @ITWhisperer said.

Since all panels that you want to apply CSS to are html panels, you would need following CSS selector div#yourPanelID .panel-body.html

Following is a sample CSS (I have grouped 2 panels for same background color, you can change as per your needs).

div#panel1 .panel-body.html, div#panel6 .panel-body.html{ background: #003D5E !important; } div#panel2 .panel-body.html, div#panel7 .panel-body.html{ background: #005684 !important; } div#panel3 .panel-body.html, div#panel8 .panel-body.html{ background: #006EAA !important; } div#panel4 .panel-body.html, div#panel9 .panel-body.html{ background: #00A4FD !important; } div#panel5 .panel-body.html, div#panel10 .panel-body.html{ background: #7ED2FF !important; }

topic Re: Adding different colours to each panel in a dashboard- Splunk Cloud in Dashboards & Visualizations

Adding different colours to each panel in a dashboard- Splunk Cloud

Re: Adding different colours to each panel in a dashboard- Splunk Cloud

Re: Adding different colours to each panel in a dashboard- Splunk Cloud