Css Overwrites existing feature within dashboard

rony121 · ‎02-25-2021

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

ITWhisperer · ‎02-25-2021

What does your current Simple XML / CSS contain?

rony121 · ‎02-26-2021

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

ITWhisperer · ‎02-26-2021

        <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

rony121 · ‎03-08-2021

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.

Css Overwrites existing feature within dashboard

CSS

javascript

panel

simple XML

table

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life