Customize CSS

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;
}

• Was this topic useful?
• Post a comment