Splunk Search
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
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
Get Updates on the Splunk Community!

Index This | When is October more than just the tenth month?

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

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

What’s New & Next in Splunk SOAR

 Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us for an ...