Dashboards & Visualizations

adding css to dashboard crashed dashboard

matansocher
Contributor

Hi,

I added a bit of css to my dashboard in simple xml

 <html>
 <head>
     <style type="text/css">
         .my-list ul {
           list-style-position: inside;
         }
     </style>
 </head>
 </html>

everytime I save the dashboard and refresh, it cannot load again, remains on the Loading ... grey screen.
any idea why?

0 Karma
1 Solution

kmaron
Motivator

I use something like this to change the size of my panels. This only works at a panel level but I had no issue having my dashboard reload when I used it. Maybe it will help get you closer?

    <panel depends="$alwaysHideCSS$">
      <html>
       <style>
          .my-list ul {
            list-style-position: inside;
          }
       </style>
     stuff down here for the html in the panel
     </html>
   </panel>

View solution in original post

kmaron
Motivator

I use something like this to change the size of my panels. This only works at a panel level but I had no issue having my dashboard reload when I used it. Maybe it will help get you closer?

    <panel depends="$alwaysHideCSS$">
      <html>
       <style>
          .my-list ul {
            list-style-position: inside;
          }
       </style>
     stuff down here for the html in the panel
     </html>
   </panel>

kashz
Explorer

I'm constantly seeing depends="$alwaysHideCSS" and depends="$hiddenForCSS$" .
Can someone please explain this and provide some splunk / css documentation on it?

Plus when you use .my-list ul {}, does that not require you to define the token / identifier using class keyword.
As per CSS documentation when using CSS, if using # as selector, we need to define the id field correct?
and the . as selector needs class keyword to be defined ?

Can someone explain ?

0 Karma

msivill_splunk
Splunk Employee
Splunk Employee

Put the CSS into a separate file and reference it from the simple xml (example taken from Wallboard dashboard in "Scalable Vector Graphics - Custom Visualization" app)

<dashboard stylesheet="svg:white_background.css" hideChrome="true" hideTitle="true">
  <label>Wallboard</label>
  <description>Dashboard designed to be displayed on large TVs</description>
...
...

https://docs.splunk.com/Documentation/Splunk/7.0.3/AdvancedDev/UseCSS covers the specifics

0 Karma

matansocher
Contributor

I actually cant add custom css files. my organization is very big and I dont have the privileges to add files.

thanks!

0 Karma

damien_chillet
Builder

I think you can't add this to the simple XML as it is not supported.
You would have to convert your dashboard to a HTML view first.

0 Karma

matansocher
Contributor

I dont want to convert it. is there any other way to add css?

0 Karma

damien_chillet
Builder

Check answers below, I would put CSS in a separate file. @msivill has linked the relevant docs.

0 Karma
Get Updates on the Splunk Community!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Enhance Security Operations with Automated Threat Analysis in the Splunk EcosystemAre you leveraging ...

Splunk Developers: Go Beyond the Dashboard with These .Conf25 Sessions

  Whether you’re building custom apps, diving into SPL2, or integrating AI and machine learning into your ...

Index This | How do you write 23 only using the number 2?

July 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...