Splunk Search
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question
Solved! Jump to solution

How to change table CSS using Classes instead of Ids

cherrypick
Path Finder
‎09-10-2024 02:56 AM

As the title suggests, I want to change the CSS style of a table within Splunk dashboard using classes instead of id. The reason is I have multiple tables with different values BUT applying a similar style. If I want to make changes or create a new table with similar style, I have to keep iterating the id (e.g. tableid_10) which is impractical. I have inspected element and cannot change the Splunk default class "panel-element-row" as this will affect other tables on my dashboard. 

e.g. for panel below the css works fine if I use the id as a selector.

<panel>
<table id="test">
<search>
<query>index="test"
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>

With the following css

#test th{
            color:#808080 !important;

            border: 1px solid white !important;
}

However, if I switch it to using class selector,

<panel>
<table class="test">
<search>
<query>index="test"
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>

With the following css

.test th{
            color:#808080 !important;
            border: 1px solid white !important;
}

It no longer works.

Labels (1)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

ITWhisperer
SplunkTrust
SplunkTrust
‎09-10-2024 03:53 AM

Go back to using ids but adopt a naming convention e.g. all those you want to affect begin with the same word

<dashboard version="1.1" theme="light">
<label>Tables</label>
<row>
<panel>
<table id="test_1">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="test_2">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="nottest_A">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel depends="$alwaysHide$">
  <html>
    <style>
div[id^="test_"] th{
            color:red !important;
            border: 1px solid white !important;
}      
    </style>
  </html>
</panel>  
</row>
</dashboard>

View solution in original post

Reply
Solved! Jump to solution
Solution

ITWhisperer
SplunkTrust
SplunkTrust
‎09-10-2024 03:53 AM

Go back to using ids but adopt a naming convention e.g. all those you want to affect begin with the same word

<dashboard version="1.1" theme="light">
<label>Tables</label>
<row>
<panel>
<table id="test_1">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="test_2">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel>
<table id="nottest_A">
<search>
<query>| makeresults
| fields - _time
| eval random=random()
| eval hide="Hide"
| rename hide as " "</query>
<earliest>0</earliest>
<latest></latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel depends="$alwaysHide$">
  <html>
    <style>
div[id^="test_"] th{
            color:red !important;
            border: 1px solid white !important;
}      
    </style>
  </html>
</panel>  
</row>
</dashboard>
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Unlocking Unified Insights: New Gigamon Federated Search App for Splunk

In today’s data-heavy environment, organizations are caught in a data distribution dilemma. As data volumes ...

GA: New Data Management App in Splunk Platform

Streamlining Data Management: Introducing a unified experience in Splunk Managing data at scale shouldn’t feel ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...