How to change the color of the Info button in dash...

smanojkumar · ‎09-06-2023

How to change the colour of info button in dashboard.

kamlesh_vaghela · ‎09-06-2023

Can you please share more details like which info button you want to change color? A screenshot of a sample dashboard or panel would be helpful.

KV

smanojkumar · ‎09-11-2023

Hi @kamlesh_vaghela ,
Thanks for your response!
I had attached the screenshot for your reference,

Thanks in Advance!

kamlesh_vaghela · ‎09-11-2023

@smanojkumar

It looks like you have a custom dashboard. So you can apply CSS by adding it to the HTML tag.

Sample Code:

Here I'm changing the background.

<dashboard version="1.1">

  <label>Demo</label>
  
  <row>
    <panel>
       <html depends="$alwaysHideCSSStyle$">
        <style>
          .dashboard-body {
              background: #1E93C6 !important;
          }

          .dashboard-header h2{
              color: #ffffff !important;
          }          
        </style>
      </html>
    </panel>
  </row>
</dashboard>

To identify the element you can Use your Browser Inspector tool. Check this link for instructions.

https://community.splunk.com/t5/Dashboards-Visualizations/How-do-I-update-panel-color-in-Splunk-usin...

For further help on CSS, share sample code so we can replicate in our instance.

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

smanojkumar · ‎09-13-2023

Hi @kamlesh_vaghela ,

Good day!

Thanks for your response!

Here is my XML after added the changes that you mentioned still, I didn't get the expected one, the color of info icon is not changed.

<panel id="global_status_op">
<title>Global Compliance</title>
<html>
<style>

.dashboard-body {
background: #0000FF !important;
}

.dashboard-header h2{
color: #0000FF !important;
}
</style>
<div class="infobutton" parent="global_status_op" type="collapse" style="display: none">
<p style="font-size:15pt;">
The compliance is calculated as follow:</p>
<p style="font-size:9pt;">
- If compliant, the asset is considered as complinat</p>
<p style="font-size:9pt;">
- If not compliant, the asset is considered as not compliant</p>
</div>
</html>
</panel>

How to change the color of the Info button in dashboard?

.conf25 Global Broadcast: Don’t Miss a Moment

Observe and Secure All Apps with Splunk

What's New in Splunk Observability - August 2025

Are you a member of the Splunk Community?

How to change the color of the Info button in dashboard?

.conf25 Global Broadcast: Don’t Miss a Moment

Observe and Secure All Apps with Splunk

What's New in Splunk Observability - August 2025