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!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...