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

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor