Solved: Different color for panel title

cip1 · ‎10-01-2019

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>

jacobpevans · ‎10-01-2019

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 · ‎09-03-2020

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

jacobpevans · ‎10-01-2019

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 · ‎12-07-2020

Thanks @jacobpevans. This was really helpful.

Different color for panel title

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!