Dashboards & Visualizations
Highlighted

adding css to dashboard crashed dashboard

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
Highlighted

Re: adding css to dashboard crashed dashboard

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
Highlighted

Re: adding css to dashboard crashed dashboard

Contributor

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

0 Karma
Highlighted

Re: adding css to dashboard crashed dashboard

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

0 Karma
Highlighted

Re: adding css to dashboard crashed dashboard

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
Highlighted

Re: adding css to dashboard crashed dashboard

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
Highlighted

Re: adding css to dashboard crashed dashboard

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

Highlighted

Re: adding css to dashboard crashed dashboard

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