- Splunk Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How to make a css script affect only specific pan...
- 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
Hello I have the below css which affects all the panels including date/time filter..HOw can I make it affect only the panels I want.
<row>
<panel depends="$alwaysHideCSSPanel$">
<html>
<style>
table thead tr th,td{
font-size:150% !important;
width:150px !important;
border: 1px solid black !important;
text-align: right !important
}
table thead tr th{
font-weight: bold !important;
}
g[transform] text {
font-size:130% !important;
}
g.highcharts-axis-labels text {
font-size:130% !important;
}
g.highcharts-axis text {
font-size:130% !important;
}
h2 text {
font-size:130% !important;
}
</style>
</html>
</panel>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @power12,
If you give your panels IDs, then you can specify them in the CSS.
If you give panels an identifier "XXX_" and a number, then you can use a neat CSS trick where you apply the CSS to all DIVs whose ID starts with "XXX_"
<row>
<panel id="apply_css_1">...</panel>
<panel id="apply_css_2">...</panel>
</row>
<row>
<panel id="apply_css_3">...</panel>
</row>
Then create your CSS panel and add the prefix: div[id^=apply_css] to each class
<row>
<panel depends="$alwaysHideCSSPanel$">
<html>
<style>
div[id^=apply_css] table thead tr th,td{
font-size:150% !important;
width:150px !important;
border: 1px solid black !important;
text-align: right !important
}
div[id^=apply_css] table thead tr th{
font-weight: bold !important;
}
</style>
</html>
</panel>
</row>That way your CSS is only applied to the panels you want.
Cheers,
Daniel
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @power12,
If you give your panels IDs, then you can specify them in the CSS.
If you give panels an identifier "XXX_" and a number, then you can use a neat CSS trick where you apply the CSS to all DIVs whose ID starts with "XXX_"
<row>
<panel id="apply_css_1">...</panel>
<panel id="apply_css_2">...</panel>
</row>
<row>
<panel id="apply_css_3">...</panel>
</row>
Then create your CSS panel and add the prefix: div[id^=apply_css] to each class
<row>
<panel depends="$alwaysHideCSSPanel$">
<html>
<style>
div[id^=apply_css] table thead tr th,td{
font-size:150% !important;
width:150px !important;
border: 1px solid black !important;
text-align: right !important
}
div[id^=apply_css] table thead tr th{
font-weight: bold !important;
}
</style>
</html>
</panel>
</row>That way your CSS is only applied to the panels you want.
Cheers,
Daniel
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank You this worked
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You can use id that can be referenced by the css.
Check this example dashboard (you can just copy/paste in to a new dashboard 😞
<dashboard version="1.1">
<label>css test</label>
<row>
<panel>
<html>
<style>
#mycss table tr{
font-size:150% !important;
font-weight: bold;
width:150px !important;
border: 1px solid black !important;
text-align: right !important;
background-color: #FF00FF !important;
}
</style></html>
</panel>
</row>
<row>
<panel>
<table id="mycss">
<search>
<query>index=_internal sourcetype IN (splunkd, splunk_python)| timechart span=1h count by sourcetype | table _time splunkd * | fillnull value=0 splunkd splunk_python mongod</query>
<earliest>-4h@m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
</table>
</panel>
<panel>
<table>
<search>
<query>index=_internal sourcetype IN (splunkd, splunk_python)| timechart span=1h count by sourcetype | table _time splunkd * | fillnull value=0 splunkd splunk_python mongod</query>
<earliest>-4h@m</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
</table>
</panel>
</row>
</dashboard>Note that I added the mycss id to the css and to one of the tables.
Hope I was able to help you. If so, some karma would be appreciated.
Introducing the 2024 Splunk MVPs!
Splunk Custom Visualizations App End of Life
Introducing Splunk Enterprise 9.2
