Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
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!
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
- Find Answers
- :
- Using Splunk
- :
- Splunk Search
- :
- How to change table CSS using Classes instead of I...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
1 Solution
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
ITWhisperer
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>- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
ITWhisperer
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>
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!
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 in Splunk Observability - August 2025
What's New We are excited to announce the latest enhancements to Splunk Observability Cloud as well as what is ...
Introduction to Splunk AI
How are you using AI in Splunk? Whether you see AI as a threat or opportunity, AI is here to stay. Lucky for ...
