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
Get Updates on the Splunk Community!

Splunk Mobile: Your Brand-New Home Screen

Meet Your New Mobile Hub  Hello Splunk Community!  Staying connected to your data—no matter where you are—is ...

Introducing Value Insights (Beta): Understand the Business Impact your organization ...

Real progress on your strategic priorities starts with knowing the business outcomes your teams are delivering ...

Enterprise Security (ES) Essentials 8.3 is Now GA — Smarter Detections, Faster ...

As of today, Enterprise Security (ES) Essentials 8.3 is now generally available, helping SOC teams simplify ...