In this section, you will learn how to use custom CSS and JS to customize the look and feel of Splunk dashboards. In the previous topics and chapter, we used CSS and JS to customize the functionality of the dashboard. In this section, we will modify the look and feel (aesthetics) of the Splunk dashboard.
The Splunk dashboard has its predefined stylesheets, which are automatically applied on any new dashboards created in Splunk. You will now learn how to override the default stylesheet behavior with your own custom CSS file.
The following steps are required to use custom CSS file on any dashboard XML page:
layout.css
) at $SPLUNK_HOME$etcappsapp_nameappserverstatic
.<dashboard stylesheet="layout.css">
If the dashboard has a form
tag, then modify it as follows:
<form stylesheet="layout.css">
layout.css
) stylesheet.layout.css
does not have a definition of any custom modification, the dashboard loads as it is. Now, we will see how to customize different elements of the dashboard using this custom stylesheet:layout.css
and replace the color as per your requirement, and there, you have the panel color background of your choice:.dashboard-panel,.dashboard-cell { background: #D52121 !important; }
The preceding code snippet will change the dashboard panel background to red (D52121)
. The !important
value is required to override Splunk's default style with the one we specified. The following screenshot shows a panel that has no results to display and is customized by the preceding CSS code:
.dashboard-row { color: #4D0303; } .panel-head h3,.dashboard-header h2, p.description { color: #745B5B; }
Depending on what element of the dashboard is to be customized, the respective CSS element is modified in this custom CSS.
The important issue that arises here is how to know which stylesheet is applied and to which segment of the dashboard so as to be able to modify any segment of the dashboard. Let's understand this with the help of an example figure:
The preceding example figure is a sample dashboard highlighting the different elements of it. All the elements seen on the dashboard can be formatted as per our requirement, that is, color, font, size, and so on.
So, to change any specific element as required, how can we identify what CSS needs to be added in the preceding custom layout.css
file? The browser's debugging functionality is generally accessible by pressing the F12 button.
Let me explain how to identify the corresponding CSS file and modify it as per the requirement. The debugging console is available by pressing the F12 button in most of the browsers, such as Mozilla Firefox, Google Chrome, and Internet Explorer.
Suppose we are interested in changing the aesthetics of the title of the dashboard. When the dashboard is open in the browser, press F12, and the debugging console similar to the one in the following screenshot will appear.
Note that the following example figure is explained using the Mozilla Firefox browser. The debugging console looks pretty much the same for other browsers as well:
The lower part of the browser, which shows the HTML code and CSS, is part of the browser's debugging console. We are interested in changing the aesthetics of the title, as highlighted in the preceding figure. The following are the steps to implement it:
So, .dashboard-header h2
is the style applied on the title of the dashboard, and we can modify it by overriding the preceding default properties in our custom CSS file as follows:
The preceding example figures show that font-size
and font-weight
are modified and two new styles, color
and font-style
, have been added to customize the title as per our requirement.
Note that the existing styles that are modified have !important
, whereas the ones that are newly added are missing this postfix. The reason is that in CSS, !important
is used to override wherever added. So, this postfix is added to only those that have a pre-existing style, and new styles need not have this postfix.
In many cases, the modified custom CSS code is not applied on the dashboard until the Splunk server is restarted and browser cache is cleared.
layout.css
will be similar to the one shown in the following figure. The color
value is changed to red
from the default black
color. The size is increased from 24px
to 44px
. The font weight
value is increased to 300
and the font-style
value is set to italic
. The following is the output of these changes:Similarly, depending on the requirement, any of the elements of the Splunk dashboard can be modified as per the requirement using custom CSS.
3.15.218.254