Dashboards & Visualizations

Using panel id to change background color of panel

wu_weidong
Path Finder

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
1 Solution

vnravikumar
Champion

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

vnravikumar
Champion

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>

wu_weidong
Path Finder

Thanks! This worked.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...