Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: How to change the font color, in a dashboard, ...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello Everyone,
I'm trying to (based on dashboard Image Overlay with Single Value from Splunk Dashboard Example app) make a dashboard, where results of searches will have different font color depends on value from search.
For now I have:
XML
<dashboard stylesheet="layout.css">
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
</progress>
</search>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
CSS
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel #V7 {
color: #003399;
position: absolute;
top: 748px;
left: 367px;
}
Search work fine, but do you have any idea how to change font color for example when it is True then font is green, but when it is False font is red?
Any thoughts?
Thanks in advance.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Sethi90, instead of using a separate CSS File use hidden <html> <panel> with <style> tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).
PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$ has also been created in the search for setting color to green, red or default to grey based on search results. You can also print the token to ensure that it being set correctly or not.
<dashboard>
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
</progress>
</search>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel div#V7 {
color: $V7Color$;
position: absolute;
top: 748px;
left: 367px;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
Please try out and confirm!
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@niketnilay thanks for reply, everything is ok. I should only change this part:
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
to:
<eval token="V7Color">case($result.status$=="True","green",$result.status$=="False","red",true(),"grey")</eval>
and every works fine. Thanks a lot.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Sethi90, instead of using a separate CSS File use hidden <html> <panel> with <style> tag to apply CSS override. You can pass token to CSS being applied. Following is based on your existing dashboard code (un-tested but should work).
PS: css file layout.css refernce is removed since the same has been brought inside dashboard code as hidden html panel. Token $V7Color$ has also been created in the search for setting color to green, red or default to grey based on search results. You can also print the token to ensure that it being set correctly or not.
<dashboard>
<label>Dash</label>
<description>Display workflow status visually using an image, and grouped single value elements.</description>
<search id="V7">
<query>index=main sourcetype="test" Name="V7"
|eval status = case(Value=="False", "Close",Value=="True", "Open")
|table status
|head 1</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<progress>
<set token="V7">$result.status$</set>
<eval token="V7Color">case($result.status|s$=="True","green",$result.status|s$=="False","red",true(),"grey")</eval>
</progress>
</search>
<fieldset autoRun="true" submitButton="false">
<input type="time" searchWhenChanged="true">
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
.ingestion_pipeline {
position: relative;
width: 1220px;
height: 840px;
}
#image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('/static/app/simple_xml_examples/v2.png');
position: relative;
top: 0px;
left: 300px;
width: inherit;
height: inherit;
}
.singleValue {
font-size: 1em;
font-weight: bold;
}
#image_overlay_panel div#V7 {
color: $V7Color$;
position: absolute;
top: 748px;
left: 367px;
}
</style>
</html>
</panel>
</row>
<row>
<panel id="image_overlay_panel">
<html>
<div class="ingestion_pipeline">
<div class="image"/>
<div class="singleValue" id="V7">$V7$</div>
</html>
</panel>
</row>
</dashboard>
Please try out and confirm!
| makeresults | eval message= "Happy Splunking!!!"
Enter the Agentic Era with Splunk AI Assistant for SPL 1.4
Feel the Splunk Love: Real Stories from Real Customers
Data Management Digest – November 2025
