Dashboards & Visualizations

Different color for panel title

cip1
Engager

Hi there,
I would like to create a dashboard having different color titles for its panels, using css.(don't ask why 🙂
Can anyone tell me if this is even possible, as I am getting the following when trying to set 2 colors...

test_html_css

<panel>
  <title>this is cyan</title>
  <html>
    <style>
      .panel-title {
          color:    #00FFFF;
       }    
    </style>
  </html>
</panel>
<panel>
  <title>this is green</title>
  <html>
    <style>

       .panel-title {
          color:    #7FFF00;
       }    
    </style>

    <table style="width:100%">
      <tr>
        <td style="width:33%">
        <div id="mysingle1"/>
        </td>
      </tr>
    </table>
  </html>
</panel>

alt text

0 Karma
1 Solution

jacobpevans
Motivator

Greetings @cip1,

If you inspect the html in Chrome, you'll see that both titles have both CSS properties defined, but the later declaration overrides the previous one (since both are applying to the class of .panel-title. Instead, you'll need to give them ids and set the CSS based on the id. Try this run-anywhere dashboard instead (tested in 7.2.4):

<dashboard>
  <row>
    <panel id="Panel1">
      <title>this is cyan</title>
      <html>
        <style>
          #Panel1 .dashboard-panel .panel-title {
            color:     #00FFFF;
          }    
        </style>
      </html>
    </panel>
    <panel id="Panel2">
      <title>this is green</title>
      <html>
        <style>
          #Panel2 .dashboard-panel .panel-title {
            color:     #7FFF00;
          }    
        </style>
        <table style="width:100%">
          <tr>
            <td style="width:33%">
            <div id="mysingle1"/>
            </td>
          </tr>
        </table>
      </html>
    </panel>
  </row>
</dashboard>

Cheers,
Jacob

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.

View solution in original post

bansodesant
Explorer

This solution works perfectly. Instead of adding CSS code under each title tag the better way is to add CSS file in your app's /appserver/static/<filename>.css 

This will avoid writing code for each title tag and same will be applied in your entire dashboard. Don't forget to add stylesheet in you <dashboard> OR <form> tag
Ex : 

<dashboard  stylesheet="my_style.css">

 

0 Karma

jacobpevans
Motivator

Greetings @cip1,

If you inspect the html in Chrome, you'll see that both titles have both CSS properties defined, but the later declaration overrides the previous one (since both are applying to the class of .panel-title. Instead, you'll need to give them ids and set the CSS based on the id. Try this run-anywhere dashboard instead (tested in 7.2.4):

<dashboard>
  <row>
    <panel id="Panel1">
      <title>this is cyan</title>
      <html>
        <style>
          #Panel1 .dashboard-panel .panel-title {
            color:     #00FFFF;
          }    
        </style>
      </html>
    </panel>
    <panel id="Panel2">
      <title>this is green</title>
      <html>
        <style>
          #Panel2 .dashboard-panel .panel-title {
            color:     #7FFF00;
          }    
        </style>
        <table style="width:100%">
          <tr>
            <td style="width:33%">
            <div id="mysingle1"/>
            </td>
          </tr>
        </table>
      </html>
    </panel>
  </row>
</dashboard>

Cheers,
Jacob

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.

hmbisht
Explorer

Thanks @jacobpevans. This was really helpful.

0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...