Dashboards & Visualizations

Changing Text Colour In a Dashboard

itsomana
Path Finder

I have a traffic light dashboard configured and was wondering if you can change the white text in the green traffic light box to black. If so could some advise as to how I would go about doing it.

Tags (1)
1 Solution

Drainy
Champion

Splunk uses a CSS file to define what colour things appear.
So for example the default one is located in;
$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/

If you are working on an app you can copy and paste the application.css file to your etc/apps/APPNAME/appserver/static/ folder to override the default settings.
Of interest is the part;

.SingleValue .severe {
       background-color: #bb2121;
       color: #fff;
}
.SingleValue .high {
       background-color: #e67918;
       color: #fff;
}

This defines the background colour of the different colours. if you wanted you could copy and paste one of those and create your own, maybe called it .SingleValue .reallyBad { and then you just need to use the term reallyBad in place of low, severe etc in your rangemap command. You can then also define your own custom colours but also use the existing ones!

Just some important points, ensure Splunk has access to the file if you copy it over or move it as an admin/root user.
For more detail visit this link for a full breakdown;
http://docs.splunk.com/Documentation/Splunk/latest/Developer/UseCSS

View solution in original post

Drainy
Champion

Also, don't forget to accept answers on questions you've asked in the past if they have solved a problem (by clicking on the tick on the left of the answer)
This just encourages more people to help you out and also makes the website a useful database of knowledge by identifying answers that have helped 🙂

Drainy
Champion

Splunk uses a CSS file to define what colour things appear.
So for example the default one is located in;
$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/

If you are working on an app you can copy and paste the application.css file to your etc/apps/APPNAME/appserver/static/ folder to override the default settings.
Of interest is the part;

.SingleValue .severe {
       background-color: #bb2121;
       color: #fff;
}
.SingleValue .high {
       background-color: #e67918;
       color: #fff;
}

This defines the background colour of the different colours. if you wanted you could copy and paste one of those and create your own, maybe called it .SingleValue .reallyBad { and then you just need to use the term reallyBad in place of low, severe etc in your rangemap command. You can then also define your own custom colours but also use the existing ones!

Just some important points, ensure Splunk has access to the file if you copy it over or move it as an admin/root user.
For more detail visit this link for a full breakdown;
http://docs.splunk.com/Documentation/Splunk/latest/Developer/UseCSS

Get Updates on the Splunk Community!

Application management with Targeted Application Install for Victoria Experience

  Experience a new era of flexibility in managing your Splunk Cloud Platform apps! With Targeted Application ...

Index This | What goes up and never comes down?

January 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Splunkers, Pack Your Bags: Why Cisco Live EMEA is Your Next Big Destination

The Power of Two: Splunk + Cisco at "Ludicrous Scale"   You know Splunk. You know Cisco. But have you seen ...