Setting up external style sheets in Splunkapps

When it comes to CSS, external style sheets are the implementation type that you would want to be aiming for when developing with HTML dashboards. An external style sheet will be made available in one central location and reusable across all your code within your environment, and if hosted on a web server, would be available across multiple environments and locations.

In our previous example, we set up some internal style definitions to set up how our menu will look and operate, and it seems like the perfect opportunity to move these style definitions into an external CSS file. Log back into your development environment and we will get started with setting up an external style sheet to be used in our dashboard code:

  1. We have been working with our static files and directories recently, and this is where we are going to set up our external CSS file. So move into our static directory at the following location:
    cd $SPLUNK_HOME/etc/apps/stock_market/appserver/static/
  2. Create a new file with your code or text editor and call it stock_market_rules.css.
  3. We can now transfer the rules that we created to set up our menu for our raw dashboard. We can start by adding in the body element and the unordered list that is set up under the side class name:
          1 body { 
      2     margin: 0; 
      3 } 
      4  
      5 ul.side { 
      6     list-style-type: none; 
      7     margin: 0; 
      8     padding: 0; 
      9     width: 25%; 
      10     position: fixed; 
      11     overflow: auto; 
      12     background-color: #e6f2ff; 
      13 }
  4. Now enter the remaining lines of our side class style definition that refer to the list elements:
          14 li.side a { 
      15     display: block; 
      16     color: #000; 
      17     padding: 8px 0 8px 16px; 
      18     text-decoration: none; 
      19     color: red; 
      20 } 
      21  
      22 li.side a.active { 
      23     background-color: #4CAF50; 
      24     color: white; 
      25 } 
      26  
      27 li.side a:hover:not(.active) { 
      28     background-color: #555; 
      29     color: white; 
      30 }
  5. Save this file.
  6. Now open the raw_stock_market_historical_overview_html.html file again. We now need to add a reference to the new external CSS file that we have just created. We will add this to the header of the HTML. You may remember that at the start of this chapter we added our first external CSS file that set up the United theme for our dashboard. We will add our new external CSS file just below that by adding in the following line of code:
          12      <link rel="stylesheet" type="text/css" href="
              {{SPLUNKWEB_URL_PREFIX}}/static/app/stock_market/
              stock_market_rules.css" />
  7. Make note of the location that we are using when specifying the external CSS file as it is not the exact directory location of the file, but is understandable by our Splunk installation.
  8. We no longer have a need for the internal style definitions that we set up previously, so all we need to do now is delete all the internal style definitions. This should be all the code in between the style opening and closing tags, from approximately line 13 to 55.
  9. Once again, save your changes and reload your Splunk cache. You should not see any further change as the CSS that we previously loaded internally is now being loaded from our external CSS file.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.210.17