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

How do I edit a dashboard so that each panel has a different color?

chrisschum
Path Finder
‎04-30-2019 07:17 AM

I've tried the property but it still shows the color across all panels (I assume this is because of the h2 property set).

Also, what are the dashboard-panel options, i.e. h2, h3, etc?

Below is an example.

Thanks!

.dashboard-panel h2{
             background:#3366ff !important;
             color:white !important;
             text-align: center !important;
             font-weight: bold !important;
             border-top-right-radius: 15px;
             border-top-left-radius: 15px;
Reply
1 Solution
Solved! Jump to solution
Solution

vnravikumar
Champion
‎04-30-2019 08:46 AM

Hi

Try like

<dashboard>
  <label>panel</label>
  <row>
    <panel id="firstpanel">
      <title>test1</title>
      <table>
        <search>
          <query>index="_internal" |stats count by source</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row>
    <panel id="secondpanel">
      <title>test2</title>
      <table>
        <search>
          <query>index="_internal" |stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$hide$">
    <html>
      <style>
        #secondpanel .dashboard-panel h2{
background:#3366ff !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

 #firstpanel .dashboard-panel h2{
background:#81ff33 !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
      </style>
    </html>
  </row>
</dashboard>

View solution in original post

Reply
Solved! Jump to solution
Solution

vnravikumar
Champion
‎04-30-2019 08:46 AM

Hi

Try like

<dashboard>
  <label>panel</label>
  <row>
    <panel id="firstpanel">
      <title>test1</title>
      <table>
        <search>
          <query>index="_internal" |stats count by source</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row>
    <panel id="secondpanel">
      <title>test2</title>
      <table>
        <search>
          <query>index="_internal" |stats count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$hide$">
    <html>
      <style>
        #secondpanel .dashboard-panel h2{
background:#3366ff !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}

 #firstpanel .dashboard-panel h2{
background:#81ff33 !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
      </style>
    </html>
  </row>
</dashboard>
Reply
Solved! Jump to solution

chrisschum
Path Finder
‎05-01-2019 07:42 AM

That worked like a champ! Thank you!!!

0 Karma
Reply
Get Updates on the Splunk Community!

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...

Splunk Enterprise Security 8.x: The Essential Upgrade for Threat Detection, ...

Watch On Demand the Tech Talk on November 6 at 11AM PT, and empower your SOC to reach new heights! Duration: ...

Splunk Observability as Code: From Zero to Dashboard

For the details on what Self-Service Observability and Observability as Code is, we have some awesome content ...