Splunk® Enterprise

Developing Dashboards, Views, and Apps for Splunk Web

Download manual as PDF

Splunk version 4.x reached its End of Life on October 1, 2013. Please see the migration information.
This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
Download topic as PDF

Customize CSS

You can make any number of changes to Splunk Web's appearance by customizing the CSS. You can change display options such as background colors, buttons, navigation, menus, and so on. To change the layout of a page, build a view. Start with the simple dashboard described in the Build dashboards section of this manual. To change which elements are displayed in a page, add different modules to your view.

Splunk's default CSS is defined in default.css, which is located here:

$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/

You can make changes to the CSS for your entire app, for a specific view, or for any HTML you have added to your view. If you want to update a given style or class for your app, look for it in default.css. This file is thoroughly commented and organized to serve as a reference for Splunk Web's default classes.

You can also use a web inspection tool to find the class you want to change. Splunk recommends using Firebug in Firefox. Firebug lets you inspect the elements of a page and pinpoint the classes whose style you want to change. Using Firebug, you can also try out different CSS settings before making any changes.

Configure CSS for an app

Each app's directory can contain an application.css file that defines the CSS for the entire app. The application.css file has a higher priority than any of Splunk's other CSS files – anything defined in application.css overwrites the default settings. Each module has its own CSS file that defines its layout and other properties. Within application.css you can overwrite CSS specifications for several modules simultaneously.

1. Create application.css in the following location:

$SPLUNK_HOME/etc/apps/<appname>/appserver/static/

2. Look for the style to override in default.css or by using a web inspection tool (such as Firebug).

3. Add an entry to your application.css indicating the class you want to change and the style you want to set.

4. Save your file. Restart Splunk Web, then refresh the browser page in which you are you viewing your app. The CSS changes are picked up on refresh.

Note: For subsequent changes to application.css, you do not have to restart Splunk Web. You can just refresh the browser page in which you are viewing your app.

Configure CSS for a view

You can include any CSS file in a view by referencing the CSS file in the <view> tag at the beginning of the view's XML. Place the CSS file in the app's static directory:

$SPLUNK_HOME/etc/apps/<appname>/appserver/static/

For example, add the following to a dashboard's view XML file to import the mystyles.css style sheet:

<view template="dashboard.html" stylesheet="mystyles.css">

Or you can add the view name before any class you want to style in the CSS file.

If you've added a web resource, import the CSS file into your HTML.

Add images

To add images, place them in the ../appserver/static/ directory alongside the application.css file. You can reference them directly in the CSS file.

The following example adds a new header, myHeader.png, and a new logo, myLogo.png. These files are in the folloing location:

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static

If you want to reference an image file in a different directory, the path is relative to the ../appserver/static directory.

.appHeaderWrapper {
    background: url(myHeader.png) repeat-x;
}

.appLogo {
    background: url(myLogo.png) no-repeat 0 0;
}


Example

The samples app provided with your Splunk installation overwrites the built-in CSS with the following styles from its application.css:

/*
 * Top app banner section
 */
.AccountBar {
    background-image: url(/static/app/samples/samples_header.png);
    background-repeat: no-repeat;
    background-color: #79a60b;
    height: 140px;
}

.AccountBar .appLogo,
.AccountBar p.appName {
    display: none;
}

.AccountBar .accountBarItems {
    background-color: #000;
    opacity: .5;
    filter: alpha(opacity=50);
}

/*
 * view menu system
 */
.AppBar {
    font-family: Arial Black, Arial, sans-serif;
    font-size: 18px;
    font-variant: small-caps;
}

.AppBar a {
    color: #f3df00 !important;
}

.AppBar a:hover {
    color: #6ad7ff !important;
}

/*
 * Body content
 */
body {
    background-image: url(/static/app/samples/body_bg.png);
    background-repeat: repeat-x repeat-y;
}
PREVIOUS
Add Web resources to your view
  NEXT
Translate Splunk

This documentation applies to the following versions of Splunk® Enterprise: 4.3, 4.3.1, 4.3.2, 4.3.3, 4.3.4, 4.3.5, 4.3.6, 4.3.7


Comments

Davewood, thanks for pointing out the error in the docs. For new application.css files, you do have to restart Splunk Web, and then refresh the browser, to pick up the changes. Subsequent updates to application.css only require a refresh of the browser. I've updated the docs.

Vgenovese, Splunker
March 16, 2012

This document is incorrect - you need to restart splunkweb for a new CSS file to be picked up. Any subsequent changes to the CSS don't need

Davewood
February 27, 2012

Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters