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!
Take Action Automatically on Splunk Alerts with Red Hat Ansible Automation Platform
Are you ready to revolutionize your IT operations? As digital transformation accelerates, the demand for ...
Calling All Security Pros: Ready to Race Through Boston?
Hey Splunkers,
.conf25 is heading to Boston and we’re kicking things off with something bold, competitive, and ...
Beyond Detection: How Splunk and Cisco Integrated Security Platforms Transform ...
Financial services organizations face an impossible equation: maintain 99.9% uptime for mission-critical ...
