Dashboards & Visualizations

Step by Step guide for customising UI on a Dashboard


Hello. I am trying to follow the following guide


Howver, i am not a Web Dev, a lot of the terminology is completely foreign to me, is anyone able to assist in customizing a dashboard i've created? i simply want to change the colours of the back ground from white to black and some other small changes. A step by step guide would be great, but any assistance at all would be better.


Tags (3)

Path Finder


This can help you, here is example about App, but you can try with dashboard:

Using custom CSS
The look of the Splunk application is controlled via CSS. One common element to change is the application icon in the application bar. Follow these steps to do just that:
1. First, create a file named application.css. This file will be loaded on every dashboard of the application containing it. The CSS is listed later in this section.
2. Next, create a file named appLogo.png. This file can be called anything, as we will reference it explicitly in our CSS file. Borrowing CSS from the search app, we will make our file 155 x 43 pixels
3. For each file, follow the same steps as for uploading the launcher icon:
1. Navigate to Manager | Apps.
2. Click on Edit properties next to our app, Implementing Splunk App One.
3. Click on Upload asset and select the file.
4. Click on Save.
Our CSS references a few classes in the application header bar:
.appHeaderWrapper h1 {
display: none;
.appLogo {
height: 43px;
width: 155px;
padding-right: 5px;
float: left;
background: url(appLogo.png) no-repeat 0 0;
.appHeaderWrapper {
background: #612f00;
Let's step through these classes:
• .appHeaderWrapper h1: By default, the name of the app appears as text in the upper-left corner. This definition hides that text.
• .appLogo: This sets the background of the upper-left block to our custom file. The height and width should match the dimensions of our logo.
• .appHeaderWrapper: This sets the background color of the top bar.


This is not a Splunk question, really, it's a CSS question. My suggestion is to use your search engine of choice, learn enough CSS so that you can understand the terminology, and then come back to the examples.

(You should also list all of the changes you want here. Since you're not a web dev, you may not realize that things you think are "small changes" are really not small.)

Alternatively, just mess around with the settings in the CSS file listed in the documentation and see what happens, if you're a "learning by doing" sort of person.

Get Updates on the Splunk Community!

Dashboard Studio Challenge - Learn New Tricks, Showcase Your Skills, and Win Prizes!

Reimagine what you can do with your dashboards. Dashboard Studio is Splunk’s newest dashboard builder to ...

Introducing Edge Processor: Next Gen Data Transformation

We get it - not only can it take a lot of time, money and resources to get data into Splunk, but it also takes ...

Take the 2021 Splunk Career Survey for $50 in Amazon Cash

Help us learn about how Splunk has impacted your career by taking the 2021 Splunk Career Survey. Last year’s ...