Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

Hello Splunkers,  We’re excited to kick off a Splunk Dashboard contest! We know that dashboards are a primary ...

May 2026 Splunk Expert Sessions: Security & Observability

Level Up Your Operations: May 2026 Splunk Expert Sessions Whether you are refining your security posture or ...