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!

Index This | What travels the world but is also stuck in place?

April 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Realizing the full potential of your Splunk investment requires more than just understanding current usage; it ...

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

As data volumes continue to grow and environments become more distributed, managing and optimizing data ...