Solved: Using panel id to change background color of panel

wu_weidong · ‎12-06-2019

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.

vnravikumar · ‎12-06-2019

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 · ‎12-06-2019

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 · ‎12-23-2019

Thanks! This worked.

Using panel id to change background color of panel

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!