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
Esteemed 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 😉

gcusello
Esteemed 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!

Synthetic Monitoring: Not your Grandma’s Polyester! Tech Talk: DevOps Edition

Register today and join TekStream on Tuesday, February 28 at 11am PT/2pm ET for a demonstration of Splunk ...

Instrumenting Java Websocket Messaging

Instrumenting Java Websocket MessagingThis article is a code-based discussion of passing OpenTelemetry trace ...

Announcing General Availability of Splunk Incident Intelligence!

Digital transformation is real! Across industries, companies big and small are going through rapid digital ...