Dashboards & Visualizations

Css Overwrites existing feature within dashboard

rony121
Loves-to-Learn Lots

Hi, 

 

I am new to CSS for creating Dashboard in Splunk Enterprise.😅

I want to create a table type panel in a dashboard with background color as blue. But after applying css, I am unable to assign different color to different values in a column of table. 

For instance:

Table A

Column1 Column2 Column3

A                  ball            date1

B                   bat           date2

 

I  want to color all "ball" in column2  as green and bat as red after changing background as Blue for table.
Please help

Labels (5)
Tags (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

What does your current Simple XML / CSS contain?

0 Karma

rony121
Loves-to-Learn Lots

<form>
<row>
<panel id="panel1">
<table id="table1">
<title>Files Received</title>
<search>
<query>index=xyz sourcetype=abc | table column1, column2, column3"</query>
<earliest>-24h</earliest>
<latest>now</latest>
<refresh>10m</refresh>
</table>
</panel>
</row>
<row>
<panel depends="$alwaysHideCSS$">
<html>
<style>
#table1 .table th, .table td{ background-color: #000080 !important; border-color: #ffffff ; border-style: groove; border-width: 1px; }
#table2 .table th, .table tr{ background-color: #808080 !important; border-color: #ffffff ; border-style: groove; border-width: 1px; }
#panel1.dashboard-panel, #panel1 .dashboard-panel {
background: #000080 !important;
}
</style>
</html>
</panel>
</row>
</form>

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust
        <format type="color">
          <colorPalette type="expression">case (match(value,"bat"), "#ff0000",match(value,"ball"),"#00ff00",true(),"#000080")</colorPalette>
        </format>

And remove !important from the background

0 Karma

rony121
Loves-to-Learn Lots

I tried this but somehow it is not reflected correctly. 
If I remove !important from background color, that css color is not reflected on table. 

0 Karma
Get Updates on the Splunk Community!

Customer Experience | Join the Customer Advisory Board!

Are you ready to take your Splunk journey to the next level? &#x1f680; We invite you to join our elite squad ...

Observability Cloud | AWS PrivateLink Enabled for Splunk Observability Cloud

We’ve enabled AWS PrivateLink for Observability Cloud, giving you an additional inbound connection to send ...

Index This | A sphere has three, a circle has two, and a point has zero. What is it?

September 2023 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...