Splunk® Enterprise

Developing Views and Apps for Splunk Web

Download manual as PDF

Download topic as PDF

Customize dashboard styling and behavior

Customize dashboard appearance and behavior using custom .css and .js files. You can customize a specific dashboard within an app or all dashboards in a particular app.

Including custom JavaScript files can cause dashboard rendering issues. You might see a warning about custom scripts when you open a dashboard in Edit mode.

Customize styling and behavior for one dashboard

Create custom files

To customize a specific dashboard, start by creating one or more .css or .js files to define styling and behavior.

Depending on the app to which the dashboard belongs, place these files in the app's appserver/static directory, located here.

$SPLUNK_HOME/etc/apps/<app_name>/appserver/static

For example, to customize styling and behavior for a dashboard in Search and Reporting, use this directory path.

$SPLUNK_HOME/etc/apps/search/appserver/static

Add custom files to the dashboard

When custom files are in the app's appserver/static directory, add them to the dashboard. Use the following syntax.

<dashboard stylesheet="<style_filename>.css" script="<script_filename>.js">


You can use several custom files for a dashboard. For multiple .css or .js files, use the following syntax.

<dashboard stylesheet="<style_filename1>.css, <style_filename2>.css" script="<script_filename1>.js, <script_filename2>.js">

Note: Forms have the <form> root element in Simple XML instead of <dashboard>. Use <form stylesheet="..."> if you are adding a custom file to a form.

Add custom files from a different app to a dashboard

You can add custom files from one app's appserver/static directory to another app's dashboard. Use this syntax to indicate the other app context for custom files. 

<dashboard stylesheet="<app_name>:<style_filename>.css" script="<app_name>:<script_filename>.js">

For example, to refer to files located in the Search and Reporting app context, use this syntax. 

<dashboard stylesheet="search:my_custom_styles.css" script="search:my_custom_script.js">

Note: Ensure that custom files exist in the indicated app's appserver/static directory. Dependency checking and warning messages are not supported when files are not found.

Customize styling and behavior for all dashboards in an app

Dashboards automatically load dashboard.js and dashboard.css from the appserver/static directory. To customize styling and behavior for all dashboards in an app, create one or both of the following files.

  • dashboard.js
  • dashboard.css

Place the files in the following directory.
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static


Retrieved from "https://docs.splunk.com/index.php?title=Documentation:Splunk:AdvancedDev:UseCSS:Honeybuzz&oldid=964049"
PREVIOUS
Customize the login page 		  NEXT
UI internationalization

This documentation applies to the following versions of Splunk® Enterprise: 6.5.0, 6.5.1, 6.5.1612 (Splunk Cloud only), 6.5.2, 6.5.3, 6.5.4, 6.5.5, 6.5.6, 6.5.7, 6.5.8, 6.5.9, 6.5.10, 6.6.0, 6.6.1, 6.6.2, 6.6.3, 6.6.4, 6.6.5, 6.6.6, 6.6.7, 6.6.8, 6.6.9, 6.6.10, 6.6.11, 6.6.12, 7.0.0, 7.0.1, 7.0.2, 7.0.3, 7.0.4, 7.0.5, 7.0.6, 7.0.7, 7.0.8, 7.0.9, 7.1.0, 7.1.1, 7.1.2, 7.1.3, 7.1.4, 7.1.5, 7.1.6, 7.1.7, 7.2.0, 7.2.1, 7.2.2, 7.2.3, 7.2.4, 7.2.5, 7.2.6

Comments

Hello, if there is no appserver/static directory in the app i have create do I have to create this folder in order to add css stylesheet ?

Loicmgn
August 7, 2018

Hi Fiona,
I have no idea why, but it turns out this issue is limited to Chrome. The documented method works fine for Firefox & IE, but Chrome fails to collect the css file with a 404 error.

StorageMatt
June 28, 2017

Hi StorageMatt,
Sorry that you are having trouble! I am not sure what might be causing this issue.

For CSS troubleshooting or tips, we recommend posting on our “Answers” community forum.

http://answers.splunk.com


If you prefer, you can also contact Support to get more in-depth troubleshooting advice: https://www.splunk.com/content/splunkcom/en_us/about-us/contact.html#tabs/customer-support

Frobinson splunk, Splunker
June 28, 2017

Hi all, I've been trying now for 3 straight days to get CSS working in a simple XML dashboard with no luck so far. I'm running version 6.5.2 on a devTest licence.
I've got the .css and .js files in 'C:\Program Files\Splunk\etc\apps\search\appserver\static'. I've got the following lines in the form (and dashboard produces the same nothingness):
<form stylesheet="landingPage.css" script="landingPage.js">

landingPage.css content is:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 200px 10px rgba(254, 140, 186, 0.5);
}

.bob {
color: green;
}

I've refreshed ({SPLUNKWEBHOME}/en-US/debug/refresh), I've restarted the splunkd service, I've restarted the PC it's all running on, and I'm STILL not seeing any effect :/

Any ideas anyone?

StorageMatt
June 28, 2017

Thanks for your feedback, @Mykol j. Sounds like you are building a form (which has the <form> root element instead of <dashboard>). I will mention this nuance in the docs here. Thanks!

Frobinson splunk, Splunker
February 2, 2017

dashboard stylesheet="<style_filename>.css" -- does not work with me.

I had to use <form stylesheet="style_filename.css".

recommend adding this nuance to this documentation, it would have saved me a couple hours of frustration...

Mykol j
January 20, 2017

Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters