Dashboards & Visualizations

Step by Step guide for customising UI on a Dashboard

Engager

Hello. I am trying to follow the following guide

http://docs.splunk.com/Documentation/Splunk/6.1.1/AdvancedDev/UseCSS#Configure_CSS_for_a_view

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.

Thanks

Tags (3)

Path Finder

Hi,

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.

Motivator

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.