Splunk Search

How to add background cover for Dashboard Panel Title Colors?

elijahputz
Explorer

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>

 

splunk color AFTER.JPGsplunk color.JPG

Labels (4)
Tags (2)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust
<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>

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Use CSS and give your panels appropriate ids

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

elijahputz
Explorer

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

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust
<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>
0 Karma

elijahputz
Explorer

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

 

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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;
          }
0 Karma

elijahputz
Explorer

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>

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

In the style block like I showed earlier.

0 Karma

elijahputz
Explorer

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

0 Karma

gcusello
Legend

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 😉

0 Karma

gcusello
Legend

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

0 Karma

elijahputz
Explorer

I figured it out

 

Than you all.

Tags (1)
0 Karma
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...