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!

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...

IM Landing Page Filter - Now Available

We’ve added the capability for you to filter across the summary details on the main Infrastructure Monitoring ...

Dynamic Links from Alerts to IM Navigators - New in Observability Cloud

Splunk continues to improve the troubleshooting experience in Observability Cloud with this latest enhancement ...