Go back

Add CSS to Splunk dashboard

The file should be located in 

%SPLUNK_HOME%/etc/apps/<APPNAME>/appserver/static/

If the file is called dashboard.css, the file will be automatically applied to all dashboards within this application. If you give it a custom name, you need to include it explicitly in the stylesheet attribute in the XML of your dashboard like the following

<form stylesheet="mycustomstyle.css">

Currently the base of my dashboard.css looks like the stylesheet of this webpage, to make it clear that I am in my own application.

@import url('https://fonts.googleapis.com/css?family=Raleway');
body, html{
    background-color: white;
    font-family: "Raleway";
    height: 100%;
}
header{
    background-color: rgb(102,153,255);
    border: 0px;
    background-image: url('./images/Bar.GIF');
    background-repeat: repeat-x;
    background-position: bottom;
    padding: 0px 0px 16px 0px;
}
.dashboard-body{
    background-color: white;
    height: 100%;
}
.dashboard{
    background-color: white;
}
footer{
    margin-top: 0px;
    padding-bottom: 50px;
    font-size: small;
    color: rgb(200, 200, 200);
    background-image: url('./images/Bottom.GIF');
    background-repeat: repeat-x;
    background-position: bottom;
}
h1, h2, a{
    color: rgb(102, 153, 255);
}

Note that when a new stylesheet is added, Splunkweb needs a restart. If you simply update the stylesheet, run the following command:

http://SPLUNKHOST/en-US/_bump
Splunk tutorial dashboard CSS
Go back