Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: How do I change the panel title font size usin...
- 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 would like to change the dashboard panel title font size using XML, not CSS.
I found the following in one of the posts:
<html>
<style>
.dashboard-row .dashboard-panel h2.panel-title {
font-size: 20px !important;
}
</style>
</html>
But, when I insert it inside of the and it still changes the title font of ALL the panels in my dashboard.
How would I change the title font for one particular panel only?
Kind Regards,
Kamil
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@damucka give panel an id for example myPanelWithCSS1 and then change CSS Select to the specific panel
<row>
<panel id="myPanelWithCSS1">
....
</panel>
</row>
Then add id to your CSS Selector to make it more specific:
<html>
<style>
.dashboard-row #myPanelWithCSS1 .dashboard-panel h2.panel-title {
font-size: 20px !important;
}
</style>
</html>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@damucka give panel an id for example myPanelWithCSS1 and then change CSS Select to the specific panel
<row>
<panel id="myPanelWithCSS1">
....
</panel>
</row>
Then add id to your CSS Selector to make it more specific:
<html>
<style>
.dashboard-row #myPanelWithCSS1 .dashboard-panel h2.panel-title {
font-size: 20px !important;
}
</style>
</html>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@niketnilay Awesome!
If this reply helps you, an upvote would be appreciated.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Had to play with it a little bit to get it to work. I went with:
<style>
/* Target a single panel, that has an id="myPanelWithCSS1" */
#myPanelWithCSS1 .dashboard-panel h2{
font-size: 40px !important;
color:red !important;
}
</style>
Thanks!
If this reply helps you, an upvote would be appreciated.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you, it worked.
Could you perhaps help me also to change the color of the single value? I would like to have a static blue color without ranges.
I try to implement it as follows, but it does not work:
<html>
<style type="text/css">
#LogBackupWithCSS1 .dashboard-panel .single-value .single-result {
font-size: 40px !important;
color: #0877A6 !important;
}
</style>
</html>
The font size gets changed correctly by the above.
Kind Regards,
Kamil
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sure, thanks for your help.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I haven't worked with the .single-value .single-result before. I wouldn't want to steer you wrong. Perhaps that is another question for Splunk Answers?
If this reply helps you, an upvote would be appreciated.
Machine Learning - Assisted Adaptive Thresholding
Observability Unlocked: Kubernetes Monitoring with Splunk Observability Cloud
Wrapping Up Cybersecurity Awareness Month
