Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How to enlarge the size of a caption underneath a ...
- 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
Hi dashboard-pro's,
I have a question about formatting the text you are able to add underneath the value of a single-value visualization. Also called the "caption".
I want to make it bigger in size, however I didn't get it to work with CSS.
Please kindly show me a way how to do it. I know that it was possible in the past. I'm using splunk in version 7.2.3.
I've already found this post by the ever-great @niketnilay , but apparently that way doesn't work anymore.
https://answers.splunk.com/answers/513196/how-to-change-the-font-size-and-color-of-the-capti.html?ut...
Thanks in advance for your help!
Regards,
horsefez
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @pyro_wood
Please try and let me know
<dashboard>
<label>singlevalue</label>
<row>
<panel>
<html>
<style type="text/css">
#test .under-label {
font-size: 20px !important;
}
</style>
</html>
<single id="test">
<search>
<query>index=_internal | stats count as count</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="field">count</option>
<option name="underLabel">Value</option>
</single>
</panel>
</row>
</dashboard>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@pyro_wood the > sign strictly looks for specified nodes arranged in the same hierarchy in the <html> DOM element. You can either remove the > signs or reduce to specific root and leaf nodes in the CSS selector as per your need, the example provided by @vnravikumar does the second.
First step is to add ID to Splunk element ie. at <row>, <panel> or specific view level like in the following example it is at <single> value level.
Second step is to right click an element and get the CSS selector for specifi destination node, in this case <text> with class under-label
7.2 has alot of changes in the way <html> components are created in the Splunk Dashboards. So do use Browser Inspector to investigate and ensure whether correct CSS Override is being applied or not: https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html
Following is the updated CSS style without > sign which should work.
<row>
<panel>
<html>
<style>
#mySingleValue svg g.single-value-under-label g.single-value-label g.under-label-group g.svg-label text.under-label{
font-size: 150% !important;
fill: black !important;
font-weight: bold !important;
}
</style>
</html>
<single id="mySingleValue">
<search>
<query>| makeresults
| fields - _time
| eval data=100
</query>
</search>
<option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
<option name="underLabel">Test Under Label</option>
</single>
</panel>
</row>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you @niketnilay for that in-depth explanation. 🙂 🙂
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @pyro_wood
Please try and let me know
<dashboard>
<label>singlevalue</label>
<row>
<panel>
<html>
<style type="text/css">
#test .under-label {
font-size: 20px !important;
}
</style>
</html>
<single id="test">
<search>
<query>index=_internal | stats count as count</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="field">count</option>
<option name="underLabel">Value</option>
</single>
</panel>
</row>
</dashboard>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you very much @vnravikumar
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Welcome 🙂
A Season of Skills: New Splunk Courses to Light Up Your Learning Journey
Announcing the Migration of the Splunk Add-on for Microsoft Azure Inputs to ...
Splunk Observability for AI
