Solved: Inline CSS to Change Panel Color Refuses to Work

zella · ‎10-25-2020

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 🙏

nwuest · ‎10-25-2020

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

.

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

nwuest · ‎10-25-2020

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

.

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

zella · ‎10-26-2020

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.

nwuest · ‎10-26-2020

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

Inline CSS to Change Panel Color Refuses to Work

CSS

panel

New in Observability Cloud - Explicit Bucket Histograms

Updated Team Landing Page in Splunk Observability

New! Splunk Observability Search Enhancements for Splunk APM Services/Traces and ...