Dashboards & Visualizations

CSS in setup.xml

Nicholas_Key
Splunk Employee
Splunk Employee

Is there a way I can edit the CSS of the setup.xml of different apps? A sample case would be to change the header in green font to blue.

Tags (1)

sideview
SplunkTrust
SplunkTrust

There are two ways, but neither of them are particularly fun.

1) harder, but technically allows you to apply CSS to manager pages, including setup.xml ::

Create a custom module. Give that custom module a ModuleName.css file, then make a copy of the search app's view called "_admin.xml" and place it in your app. Edit your version of _admin.xml to include your custom module. How your custom module and its CSS file will be loaded in every manager page. This is a tough road.

2) easier, but you have to be a little familiar with jquery::

application.css is not loaded in Manager, but for some reason application.js is, and you can take advantage of that. You can use jquery to apply CSS to the page. The scope of what I mean by that is rather large, but readers who are familiar with jquery you'll know what I mean.

Also for #2, I always wrap this stuff in either an if statement or a switch statement to only apply these changes in manager, and only in the setup.xml page.

// only do stuff in Manager please.
if (Splunk.util.getCurrentView()=="_admin") {
    // only do stuff in setup.xml pages please...    
    if (document.location.toString().indexOf("/setup")!=-1) {
        doStuff();
    }
}

sophy
Splunk Employee
Splunk Employee

Customizing the CSS for you application is discussed in this Developer manual topic:

http://www.splunk.com/base/Documentation/latest/Developer/UseCSS

Basically, you want to create/modify an application.css for your app. You can refer to Splunk's default.css ($SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/) for the "Application Header" default style formats.

esachs
Splunk Employee
Splunk Employee

This is how you change your app's look, but not the look of your setup page. application.css only controls your app's appearance after it has been set up. The setup screen is not affected by changes to this file. I think setup screen formatting is based on Manager's formatting. To the best of my (shaky) knowledge, setup.xml is using similar mechanisms to Manager, but has been instrumented so that you can modify different types of endpoints from the same place.

0 Karma
Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!