My original experience with CSS was a very short journey through the basics of what CSS does and can do. I actually didn't see the point in all of it though. I saw the basic elements and structure of HTML to be just fine for what I was doing and and felt no need to worry about CSS. As the years went on though, I saw that most companies like to control the look, layout, and color scheme of their sites to the tiniest degree, with no exception on the font and color scheme that they specifically felt characterizes their company values.
Although I'm not a designer, I needed to start being aware of how to manipulate the format and structure of dashboards and pages that I was creating, and the more I learned about the things you can do with CSS the more I wanted to use it.
We are going to look at customizing the style of our Splunk App to suit our needs and share some ideas on how to improve the visual appeal of our Splunk App. We are also going to move away a little from the default Splunk color scheme and display. In this chapter, we will do the following:
- Discuss CSS templates and themes, and how they can be used within your Splunk App dashboard
- Look at the different ways that CSS can be used within our HTML code and implement examples into our Stock Market Splunk App
- Work with standard CSS libraries that are available to us within our Splunk installation to make changes to our dashboards
- Look at some external CSS libraries and how we can utilize their functionalities to change the way our dashboard looks
CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed in your application. CSS can save you a lot of work as it can control the layout of multiple web pages all at once, as we can store style sheets externally as CSS files. With external styles sheet files we can change the look of an entire website by changing just one file.
I think we have a great place to start working with CSS. Earlier in this book, as part of our Stock Market Splunk App, we created a raw version of our historical overview of our data to demonstrate the most minimalistic version of our HTML dashboard. We can use this dashboard to implement imported themes as well as create our own CSS to suit our own requirements, which may be needed if setting up a Splunk App or dashboard that is to adhere to specific company standards or schemes.
Customizing your Splunk App is simple when using CSS, but you need to be careful when using a template, as your overriding specific Splunk Themes could result in your dashboard looking and operating in a manner that may firstly be unattractive to your users and secondly may render specific functionality useless.
For now, we are going to use our raw dashboard as there is not much added in the way of functionality that an external template or theme will cause any problems for. Searching on the Internet will give you endless options in the way of CSS themes and templates that have already been created for you to download free of change and implement into your own websites. The company you are working for may also have their own CSS Theme that needs to be used within your Splunk App.
In the following pages, we are going to make use of a free CSS theme that we will download from http://bootswatch.com/ , specifically a theme called United. Let's get started with this simple change. Log back into your development environment and follow these next steps:
- We have worked with the static directory previously. This is where we need to start to make these changes, so move into this directory:
cd $SPLUNK_HOME/etc/apps/stock_market/appserver/static/ - We are going to download the bootstrap.min.css file from the following URL: https://bootswatch.com/united/.
- We now need to let our dashboard know that it needs to use this new theme. Move back to our
htmldirectory, and we can add this external CSS file to our raw dashboard:cd $SPLUNK_HOME/etc/apps/stock_market/default/data/ui/html/ - Open the
raw_stock_market_historical_overview_html.htmlfile with your code or text editor. We are going to make a minor change to our code. - In the head of our HTML code, move just below the default CSS files that Splunk uses to set up our dashboard code, and add the following line:
10 <link rel="stylesheet" type="text/css" href=" {{SPLUNKWEB_URL_PREFIX}}/static/app/stock_market/ bootstrap.min.css" /> - All we are doing here is asking for the new United CSS theme to be loaded into our HTML page.
- Save your changes and refresh your Splunk cache to let these changes take effect.
You would have seen the theme on the Bootswatch website and it looks pretty cool. For our dashboard, so far there is not too much involved so adding our new theme only adds some minor changes to our raw dashboard compared to what it was previously. I think this theme will look pretty cool when we start to add more elements to the page. So we will continue to work with this theme for the remainder of this chapter but we will add in a number of customizations in line with this theme to make it our own.
When you select one of the other dashboards in our Stock Market Splunk App, you will note that the theme of the dashboard is back to the original Splunk theme, as we have only added this theme to our raw dashboard.
Tip
When you use Splunk, you still need to make sure that you give credit for the work that the developers at Splunk have been doing. Make sure that you include the Splunk or Splunk Powered logos within your apps to ensure that you give the correct credit when it's due. We will be correcting this shortly with our raw dashboard, and if you need more information on Splunk branding policies, consult the Splunk website.