Dashboards & Visualizations

Inline CSS to Change Panel Color Refuses to Work

zella
Explorer

Hello everyone,

I'm at an impasse with this. I have no idea why this would not work. Not the best at CSS so I'm probably missing something. Would appreciate any insight!

 

<form>
  <label>DEV DASH</label>
  <description>IN DEVELOPMENT.</description>
  <row>
    <panel id="panel_1">
      <html>
        <p>
          <u>
            <a href="" target="_blank">
                <b>Test &amp; Testing</b>
              </a>
          </u>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </p>
      </html>
    </panel>
    <panel id="panel_2">
      <html>
        <p>
          <u>
            <h2>
              <a href="" target="_blank">
                <b>Test &amp; More Tests</b>
              </a>
            </h2>
          </u>
          <li>List Item 3</li>
        </p>
      </html>
    </panel>
.....

 <row depends="$STYLES$">
    <panel>
      <html>  
      <style>
        #panel_1 .dashboard-panel, #panel_2 .dashboard-panel, #panel_3 .dashboard-panel {
        background:#C9E5A0; !important;
        }
        #panel_4 .dashboard-panel, #panel_5 .dashboard-panel, #panel_6 .dashboard-panel {
        background:#AEF0D9 !important;
        }
        #panel_7 .dashboard-panel, #panel_8 .dashboard-panel, #panel_9 .dashboard-panel {
        background:#F0D3DA !important;
        }
      </style>
    </html>
    </panel>
  </row>
</form>

 

@niketn if you would be so kind 🙏

Labels (2)
0 Karma
1 Solution

nwuest
Path Finder

Hi zella,

I've given this a go in my Splunk environment at home and I'm able to visibly see green, blue, and pink in the dashboard with copying your code and pasting it in

splunk_picture.JPG.

Could you possibly paste your entire dashboard xml so we can take a gander at it?

Note:
To make your current pasted code work I had to close the "row" element for panels_1/2.
I then copied all between the first row element and changed panel_1/2 to panel_4/7 to verify the color changing.

Can't wait to hear back from you!

V/R,
nwuest

View solution in original post

0 Karma

nwuest
Path Finder

Hi zella,

I've given this a go in my Splunk environment at home and I'm able to visibly see green, blue, and pink in the dashboard with copying your code and pasting it in

splunk_picture.JPG.

Could you possibly paste your entire dashboard xml so we can take a gander at it?

Note:
To make your current pasted code work I had to close the "row" element for panels_1/2.
I then copied all between the first row element and changed panel_1/2 to panel_4/7 to verify the color changing.

Can't wait to hear back from you!

V/R,
nwuest

0 Karma

zella
Explorer

Glad to see it works on your end. I guess that validates to me that my CSS actually works -- I checked whether I closed that row in my source code and I had.

Are there any known issues with dashboards not taking CSS? This is an environment known to be mismanaged so ... it's possible something broke on the backend.

0 Karma

nwuest
Path Finder

Hi zella,

If you feel comfortable in sending me the .xml format of your dashboard, I can take that and put it into my Splunk Environment and see if I can produce the same error you are getting.

CSS can finicky if something is missing in the code whether is a mis-placed open/closing element OR a simple typo.

Also,
If there are certain dashboards that are being managed by multiple users, you should be able to configure the permissions that suit the environment. Or you can possibly clone the dashboard and make it private to your user so you know that it won't be fiddled with.

Configure Dashboard Permissions 

V/R,

nwuest

Tags (2)
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...