Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Using panel id to change background color of panel

wu_weidong
Path Finder
‎12-06-2019 01:54 AM

I'm looking at the answers provided from the links 1 and 2 at the bottom of this page, and they both mention using panel id to specify the background color of a panel. I have 5 panels in all, and I was able to change the background color of the 5 panels with the code below.

 <row depends="$STYLES$">
     <panel>
       <html>
         <style>
           #panel_section1 .dashboard-panel {
             background:green !important;
           }
           #panel_section2 .dashboard-panel {
             background:green !important;
           }
           #panel_section3 .dashboard-panel {
             background:green !important;
           }
           #panel_section4 .dashboard-panel {
             background:green !important;
           }
           #panel_section5 .dashboard-panel {
             background:green !important;
           }
         </style>
       </html>
     </panel>
   </row>
 ...
<row>
 <panel id="panel_section1">
   ...
 </panel>
</row>
<row>
 <panel id="panel_section2">
   ...
 </panel>
</row>

(3 more times for section3 to section5).

My question is I wanted the same style for all my panels, i.e. background is green. Do I really have to repeat the code 5 times for 5 panels? I tried the code below and it did not work.

<style>
    #panel_section1 #panel_section2 #panel_section3 #panel_section4 #panel_section5 .dashboard-panel {
      background:green !important;
  }
<style>

I also tried the code below, i.e. only have 1 <style> block and set all my panels to the same id, but got the error that there was duplicate panel id.

<style>
    #panel_section1 .dashboard-panel {
      background:green !important;
  }
<style>
...
<row>
 <panel id="panel_section1">
   ...
 </panel>
</row>
<row>
 <panel id="panel_section1">
   ...
 </panel>
</row>

I'm just wondering if there is a shorter and less repetitive way to do this.

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

vnravikumar
Champion
‎12-06-2019 04:54 AM

Hi

Try like

 #panel_section1 .dashboard-panel,#panel_section2 .dashboard-panel {
              background:green !important;
            }

OR

<style>
            [id^="panel_section"] .dashboard-panel {
              background:green !important;
            }

          </style>

View solution in original post

Reply
Solved! Jump to solution
Solution

vnravikumar
Champion
‎12-06-2019 04:54 AM

Hi

Try like

 #panel_section1 .dashboard-panel,#panel_section2 .dashboard-panel {
              background:green !important;
            }

OR

<style>
            [id^="panel_section"] .dashboard-panel {
              background:green !important;
            }

          </style>
Reply
Solved! Jump to solution

wu_weidong
Path Finder
‎12-23-2019 05:34 PM

Thanks! This worked.

0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...