Getting Data In

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

smanojkumar
Contributor

How to change the colour of info button in dashboard.

Tags (2)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@smanojkumar 

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

0 Karma

smanojkumar
Contributor

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

smanojkumar_0-1694429517612.png


Thanks in Advance!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

Tags (2)
0 Karma

smanojkumar
Contributor

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>

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...