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!

Index This | Forward, I’m heavy; backward, I’m not. What am I?

April 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

A Guide To Cloud Migration Success

As enterprises’ rapid expansion to the cloud continues, IT leaders are continuously looking for ways to focus ...

Join Us for Splunk University and Get Your Bootcamp Game On!

If you know, you know! Splunk University is the vibe this summer so register today for bootcamps galore ...