topic Re: Dashboard Panel Title Colors in Splunk Search

How to add background cover for Dashboard Panel Title Colors?

elijahputz — Wed, 30 Mar 2022 16:12:25 GMT

Hello,

I am trying to add a background cover for the panels within a dashboard.

I have attached a photo of what we currently have and then a photo example of what I am trying to do.

Including is the source code for these panel sections.

<row>
<panel>
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel>
<title>ALL DATACENTERS | Resources Unavailable</title>
<chart>
<title>ALL DATACENTERS | Resources Unavailable</title>
<search>
<query>index=pan_logs dvc="*" session_end_reason="resources-unavailable" | timechart span=5h count by dvc</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</chart>
</panel>
</row>
<row>

Re: Dashboard Panel Title Colors

gcusello — Wed, 30 Mar 2022 06:44:49 GMT

Hi @elijahputz,

you could add two html panels with the colours you like: I'm not an expert in html, but this is the approach:

<row> <panel> <html> <h1> <center> <font size="+8" style="line-height: 50px; color: black"> <a> First column </a> </font> </center> </h1> </html> </panel> <panel> <html> <h1> <center> <font size="+8" style="line-height: 50px; color: black"> <a> Second column </a> </font> </center> </h1> </html> </panel> </row>

Ciao.

Giuseppe

Re: Dashboard Panel Title Colors

elijahputz — Wed, 30 Mar 2022 06:54:24 GMT

Thank you. I am just trying to change the Title background color and make the text white.

Re: Dashboard Panel Title Colors

gcusello — Wed, 30 Mar 2022 07:07:21 GMT

Hi @elijahputz,

good for you, tell me if I can help you more, otherwise, please, accept the answer for the other people of Community.

Ciao and happy splunking.

Giuseppe

P.S.: Karma Points are appreciated 😉

Re: Dashboard Panel Title Colors

ITWhisperer — Wed, 30 Mar 2022 07:49:00 GMT

Use CSS and give your panels appropriate ids

div[id="white_on_red"] .dashboard-element-title { background-color: red !important; color: white !important; }

Re: Dashboard Panel Title Colors

elijahputz — Wed, 30 Mar 2022 07:56:50 GMT

Can you give me an example using the code I provided?

Re: Dashboard Panel Title Colors

ITWhisperer — Wed, 30 Mar 2022 08:05:37 GMT

<row> <panel depends="$alwayshidden$"> <html> <style> div[id="white_on_green"] .dashboard-element-title { background-color: green !important; color: white !important; } div[id="white_on_red"] .dashboard-element-title { background-color: red !important; color: white !important; } </style> </html> </panel> <panel id="white_on_green"> <title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title> <table> <title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title> <search> <query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query> <earliest>$field1.earliest$</earliest> <latest>$field1.latest$</latest> <refresh>2m</refresh> <refreshType>delay</refreshType> </search> <option name="dataOverlayMode">none</option> <option name="drilldown">none</option> <option name="percentagesRow">false</option> <option name="refresh.display">progressbar</option> <option name="rowNumbers">false</option> <option name="totalsRow">false</option> <option name="wrap">true</option> </table> </panel> <panel id="white_on_red"> <title>ALL DATACENTERS | Resources Unavailable</title> <chart> <title>ALL DATACENTERS | Resources Unavailable</title> <search> <query>index=pan_logs dvc="*" session_end_reason="resources-unavailable" | timechart span=5h count by dvc</query> <earliest>$field1.earliest$</earliest> <latest>$field1.latest$</latest> <refresh>2m</refresh> <refreshType>delay</refreshType> </search> <option name="charting.chart">column</option> <option name="charting.drilldown">none</option> <option name="refresh.display">progressbar</option> </chart> </panel> </row>

Re: Dashboard Panel Title Colors

elijahputz — Wed, 30 Mar 2022 08:27:59 GMT

Thank you. That worked. I was actually trying to change the main panel Title color and not the description section.

Re: Dashboard Panel Title Colors

ITWhisperer — Wed, 30 Mar 2022 08:37:54 GMT

That was difficult to determine because you said panel and the pictures don't convey the difference you were after - use this CSS instead

div[id="white_on_red"] .panel-title { background-color: red !important; color: white !important; }

Re: Dashboard Panel Title Colors

elijahputz — Wed, 30 Mar 2022 19:21:26 GMT

Thank you.

Where would I put the code you just sent?

div[id="white_on_red"] .panel-title { background-color: red !important; color: white !important;

<form theme="light">
<label>DoS Protection | Datacenters Clone 2</label>
<fieldset submitButton="true" autoRun="true">
<input type="time" token="field1">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<title>DoS Protection Count and Distribution Aggregate - ALL DATACENTER FIREWALLS</title>
<table>
<title>DoS Protection Count and Distribution - ALL DATACENTER FIREWALLS</title>
<search>
<query>index=pan_logs threat_category=flood dvc="FD0*.*" rule="* DoS Protection" vendor_action="random-drop" OR vendor_action="drop" action!=unknown | stats sparkline sum(repeat_count) by vsys_name dvc dest_ip action | sort by sum(repeat_count) desc limit=10 | rename sparkline AS "Distribution", sum(repeat_count) AS "Count", dest_ip AS "Destination", vsys_name AS "Virtual System", dvc AS "Device", action AS "Action" | table Device "Virtual System" Action Count Destination Distribution</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.latest$</latest>
<refresh>2m</refresh>
<refreshType>delay</refreshType>
</search>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel>

Re: Dashboard Panel Title Colors

elijahputz — Wed, 30 Mar 2022 20:24:22 GMT

I figured it out

Than you all.

Re: Dashboard Panel Title Colors

ITWhisperer — Wed, 30 Mar 2022 21:19:43 GMT

In the style block like I showed earlier.