Dashboards & Visualizations

Single Value Button Question

Ant1D
Motivator

Hey,

With single value buttons, I know that you can have red, green and amber colours as standard.

How would I be able to define my own colours (purple, orange etc) for this object? E.g. I want the colour of my single value button to turn purple when a certain value range is reached.

Thanks in advance for your help

1 Solution

ziegfried
Influencer

You need to define a CSS class for this. Best way to do this is to create a application.css file in the app of your dashboard.

$SPLUNK_HOME/etc/apps/<APP>/appserver/static/application.css

Here are some sample CSS rules:

.SingleValue .purple { background-color: purple; color: white; }
.SingleValue .darkred { background-color: #CC0000; color: #FFFFFF; }

These same rules define 2 classes (purple and darkred) that can be used to color the single value element.

View solution in original post

ziegfried
Influencer

You need to define a CSS class for this. Best way to do this is to create a application.css file in the app of your dashboard.

$SPLUNK_HOME/etc/apps/<APP>/appserver/static/application.css

Here are some sample CSS rules:

.SingleValue .purple { background-color: purple; color: white; }
.SingleValue .darkred { background-color: #CC0000; color: #FFFFFF; }

These same rules define 2 classes (purple and darkred) that can be used to color the single value element.

Ant1D
Motivator

Thanks again Ziegfried

Get Updates on the Splunk Community!

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI! Discover how Splunk’s agentic AI ...

[Puzzles] Solve, Learn, Repeat: Dereferencing XML to Fixed-length events

This challenge was first posted on Slack #puzzles channelFor a previous puzzle, I needed a set of fixed-length ...

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

What are Community Office Hours? Community Office Hours is an interactive 60-minute Zoom series where ...