Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
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!

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...