Splunk Developer's Guide - Second Edition

Customizing Splunk dashboards using CSS

Now that we have covered the different types of JavaScript modules, let's start customizing our Overview dashboard. We already converted a SimpleXML dashboard to an HTML dashboard, but now we want to add some specific styling. We start by creating a dashboard CSS file in the appserver/static folder of our app. In this file, we will override specific Splunk CSS styles, as well as add a few of our own later on, specifically for a D3 visualization. Inside the dashboard.css file, add this CSS code:

.dashboard-row .dashboard-panel  {
  border: 1px dashed black;
}

This CSS will add a dashed border, 1 pixel in width, to each panel in the dashboard, overriding the native Splunk style. Now that we have a CSS file, we ...