topic Css Overwrites existing feature within dashboard in Dashboards & Visualizations

Css Overwrites existing feature within dashboard

rony121 — Thu, 25 Feb 2021 15:43:49 GMT

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

Re: Css Overwrites existing feature within dashboard

ITWhisperer — Thu, 25 Feb 2021 16:43:26 GMT

What does your current Simple XML / CSS contain?

Re: Css Overwrites existing feature within dashboard

rony121 — Fri, 26 Feb 2021 09:10:26 GMT

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

Re: Css Overwrites existing feature within dashboard

ITWhisperer — Fri, 26 Feb 2021 09:27:48 GMT

<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

Re: Css Overwrites existing feature within dashboard

rony121 — Mon, 08 Mar 2021 13:03:51 GMT

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.