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 need to include it on the page. In order to override the Splunk CSS, you have to place the CSS include after the bootstrap CSS included with Splunk. This is as simple as placing the code line following this paragraph before the closing head tag ...