topic Re: adding css to dashboard crashed dashboard in Dashboards & Visualizations

adding css to dashboard crashed dashboard

matansocher — Tue, 17 Apr 2018 13:45:40 GMT

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?

Re: adding css to dashboard crashed dashboard

damien_chillet — Tue, 17 Apr 2018 13:59:30 GMT

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.

Re: adding css to dashboard crashed dashboard

matansocher — Tue, 17 Apr 2018 14:02:11 GMT

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

Re: adding css to dashboard crashed dashboard

msivill_splunk — Tue, 17 Apr 2018 14:06:51 GMT

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

Re: adding css to dashboard crashed dashboard

kmaron — Tue, 17 Apr 2018 14:14:02 GMT

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>

Re: adding css to dashboard crashed dashboard

damien_chillet — Tue, 17 Apr 2018 14:18:13 GMT

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

Re: adding css to dashboard crashed dashboard

matansocher — Tue, 17 Apr 2018 14:37:49 GMT

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

thanks!

Re: adding css to dashboard crashed dashboard

kashz — Thu, 18 Apr 2019 17:25:12 GMT

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 ?