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!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

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 ...