Dashboards & Visualizations

Using css or html style tags in Splunk status indicator?

eholz1
Contributor

Hello Is it possible to style the status_indicator.status_indicator_app in a manner like we can for the

"single value" chart? Can code similar to this be used?

<html>
<style>
#test {
font-size: 18px !important;
font-weight: bold !important;
font-color: red;
}
.single-value .single-result {
font-size: 30px !important;
}
</style>
</html>

 

Thanks,

eholz1

Labels (1)
0 Karma
1 Solution

tscroggins
Influencer

@eholz1 

Hi,

The CSS class name is splunk-status-indicator:

 

<html>
  <style>
    .splunk-status-indicator {
      font-size: 30px !important;
    }
  </style>
</html>

 

 If you prefer, you can assign an id value to the viz element and reference the id in your selector:

 

<html>
  <style>
    #my_status_indicator .splunk-status-indicator {
      font-size: 30px !important;
    }
  </style>
</html>

 

Note that a Splunk administrator can disable inline styles in web.conf using the dashboard_html_allow_inline_styles setting. In this case, you'll need to add styles to a .css file referenced by the dashboard.

 

View solution in original post

tscroggins
Influencer

@eholz1 

Hi,

The CSS class name is splunk-status-indicator:

 

<html>
  <style>
    .splunk-status-indicator {
      font-size: 30px !important;
    }
  </style>
</html>

 

 If you prefer, you can assign an id value to the viz element and reference the id in your selector:

 

<html>
  <style>
    #my_status_indicator .splunk-status-indicator {
      font-size: 30px !important;
    }
  </style>
</html>

 

Note that a Splunk administrator can disable inline styles in web.conf using the dashboard_html_allow_inline_styles setting. In this case, you'll need to add styles to a .css file referenced by the dashboard.

 

eholz1
Contributor

This is excellent, thanks so much. Great forum!!

0 Karma
Get Updates on the Splunk Community!

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...

Adoption of Infrastructure Monitoring at Splunk

  Splunk's Growth Engineering team showcases one of their first Splunk product adoption-Splunk Infrastructure ...

Modern way of developing distributed application using OTel

Recently, I had the opportunity to work on a complex microservice using Spring boot and Quarkus to develop a ...