Custom CSS

Custom CSS

There are any number of changes you can make to Splunk Web's appearance just by customizing the CSS. Customize CSS to 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 in $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. We recommend using Firebug in Firefox. Firebug lets you inspect the elements of a page and pinpoint the classes whose style you want to change. You can also try out different CSS settings before making any changes.

Configure CSS for an app

Each app's directory can contain one 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, so anything defined in application.css overwrites the default settings. Each module has its own CSS file that defines its layout and other properties, you can overwrite several modules at a time in application.css.

1. Create application.css in $SPLUNK_HOME/etc/apps/<appname>/appserver/static/.

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

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

4. Save your file. You can refresh your app by hitting the Splunk logo in the upper lefthand corner to see any changes you've made -- you don't have to restart Splunk.

Configure CSS for a view

You can include any CSS file in your view by referencing the CSS file at the beginning of your view's XML, within the <view> tag. The CSS file should be in the app's static directory within $SPLUNK_HOME/etc/apps/<appname>/appserver/static/. For example, add the following to a dashboard's view XML file to import the foo style sheet:

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

This imports the file foo.css from $SPLUNK_HOME/etc/apps/<app_name>/appserver/static

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

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

Add images

To add any images, place them in the ../appserver/static/ directory alongside your application.css file. You can reference them directly from your CSS. For example:

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

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

This example adds in a new header called myHeader.png and a new logo called myLogo.png. These files live in $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.

Example

The samples app overwrites the built-in CSS with the following 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