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!

Index This | I’m short for "configuration file.” What am I?

May 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with a Special ...

New Articles from Academic Learning Partners, Help Expand Lantern’s Use Case Library, ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Your Guide to SPL2 at .conf24!

So, you’re headed to .conf24? You’re in for a good time. Las Vegas weather is just *chef’s kiss* beautiful in ...