Dashboards & Visualizations

CSS reference

cmeo
Contributor

There seem to be an awful lot of CSS elements which you can customise in Splunk, but I don't see any reference document which lists them. Does this exist? I've looked in both docs and dev, but apart from telling everyone 'you should use CSS' it's pretty light on detail.

0 Karma

vnakra_splunk
Splunk Employee
Splunk Employee

There are no official docs on this, by design. That's because we consider the Splunk CSS classes a non-public API, which means that the class names and other things are subject to change at any time, without notice (and they do). If you use them, please keep that in mind.

The best way to avoid depending on these is to use standard CSS with HTML-style dashboards.

niketn
Legend

Please download Splunk 6.x Dashboard examples which has examples of using CSS to enhance your dashboards. There are several examples on Javascript and CSS extensions to Simple XML dashboards. The Custom Layout Example: Dark deals explicitly with CSS styling of dashboard.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

cmeo
Contributor

Seen this of course, and it's nice as far as it goes. Also had a look at what gets shipped with the search app: how complete is this? This topic is barely even touched in the current docs.

As far as I can tell, there is no reference resource for the hundreds and hundreds of other css attributes used by splunk. People who do this a lot more than I do, seem to be spending lots of time messing around with an inspector of some kind, tracking through the attribute hierarchies, which may or may not be particularly human readable. Then there's the tedious procedure of edit, bump and reload to see if the knob you've twiddled is actually the right one, and what interesting side effects might happened.
Seriously, is this the state of the art? Anyone recommend a good CSS tool that can take some of the pain out of this, and does not require you to be such an expert that you don't need it? Not built-in browser object inspectors...

0 Karma

mscomms
Path Finder

I edit the css within the dashboard by adding a css panel then once it is working as expected then move it to a file. That way it just works with a save rather than having to bump the server

 <row>
    <panel depends="$alwaysHideCSS$">
        <html>
        <label>CSS Panel Do Not Delete</label>
            <style>


               CSS Goes Here

           </style>
         </html>
      </panel>
</row>

0 Karma

niketn
Legend

CSS Extension and JS Extension allows Splunk developers to extend and use their own CSS and JavaScript to extend Splunk to do whatever developer imagines.

Some more examples are present on dev.splunk.com(http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAEU7 )

However, I find that Simple XML Examples App is better organised and it gets you started with some examples in each area.

Let me change this answer to comment so that Splunk Community can point you to any App which can allow Splunk developers to use CSS more dynamically. Otherwise it would mean that there is scope of development of such app.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...