How to change the font size and color of the caption in Single value panel?

[hwakonwalk]

Hi,
I have multiple single values merged in single panel and I have mentioned the description in the caption. This caption has a very small size and displays in white reducing its visibility
I want to change the color to Black, increase its size and make it bold
Is there any simple way to do it in xml?

Thanks,
Zubair

[hwakonwalk]

Thank you niketnilay, it worked very well for me for the single value panels. I also tried to use the same concept to change the location and size of the Values displayed in gauges. Is there a way to utilize the same script with minor twists and turns?

[niketn]

@hwakonwalk... Yes you can extend your CSS overrides for specific styling that you need. However, whenever you can use Splunk's Chart References that would be better since overriding through !important implies you are choosing to undo all the dynamic adjustments that Splunk Visualization makes on its own based on data.

Splunk 6.x Dashboard Examples App has got an example to style your dashboard using CSS. You can inspect specific element in dashboard using browser's inbuilt debugging mechanism and then create your own CSS class. Club related contents together and use them in your dashboards as required.

[niketn · Accepted solution]

Splunk Single Value Panel adjusts font size dynamically based on contents. So please be sure before you override settings.

For Single value panels Splunk provides additionalClass option to apply your own style for the same.
(Refer to the Splunk Answer: https://answers.splunk.com/answers/131564/font-size-for-single-value-visualization.html)

However additionalClass is deprecated.(https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#single)

Other option for you would be to use Simple XML CSS extension where you provide CSS style override for Single Value Under Label text using your own CSS which you can refer in your dashboard or form using stylesheet attribute.

/* custom_single_value_override.css - SVG Single Value Override */

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;
}

Place above code as custom_single_value_override.css under your Splunk App's appserver\static folder. Typically:

$SPLUNK_HOME\etc\apps\<YourAppName>\appserver\static 

Once it is placed refer to the same in your form or dashboard:

<dashboard stylesheet="custom_single_value_override.css">

Or