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!

New Splunk Observability innovations: Deeper visibility and smarter alerting to ...

You asked, we delivered. Splunk Observability Cloud has several new innovations giving you deeper visibility ...

Synthetic Monitoring: Not your Grandma’s Polyester! Tech Talk: DevOps Edition

Register today and join TekStream on Tuesday, February 28 at 11am PT/2pm ET for a demonstration of Splunk ...

Instrumenting Java Websocket Messaging

Instrumenting Java Websocket MessagingThis article is a code-based discussion of passing OpenTelemetry trace ...