Solved: Re: adding css to dashboard crashed dashboard

matansocher · ‎04-17-2018

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?

kmaron · ‎04-17-2018

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 · ‎04-17-2018

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 · ‎04-18-2019

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 ?

msivill_splunk · ‎04-17-2018

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

matansocher · ‎04-17-2018

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

thanks!

damien_chillet · ‎04-17-2018

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.

matansocher · ‎04-17-2018

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

damien_chillet · ‎04-17-2018

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

adding css to dashboard crashed dashboard

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

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

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

Are you a member of the Splunk Community?

adding css to dashboard crashed dashboard

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

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

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