Splunk® Enterprise

Developing Views and Apps for Splunk Web

Download manual as PDF

This documentation does not apply to the most recent version of Splunk. Click here for the latest version.
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.

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">

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



PREVIOUS
Customize the login page
  NEXT
UI internationalization

This documentation applies to the following versions of Splunk® Enterprise: 6.0, 6.0.1, 6.0.2, 6.0.3, 6.0.4, 6.0.5, 6.0.6, 6.0.7, 6.0.8, 6.0.9, 6.0.10, 6.0.11, 6.0.12, 6.0.13, 6.0.14, 6.0.15, 6.1, 6.1.1, 6.1.2, 6.1.3, 6.1.4, 6.1.5, 6.1.6, 6.1.7, 6.1.8, 6.1.9, 6.1.10, 6.1.11, 6.1.12, 6.1.13, 6.1.14, 6.2.0, 6.2.1, 6.2.2, 6.2.3, 6.2.4, 6.2.5, 6.2.6, 6.2.7, 6.2.8, 6.2.9, 6.2.10, 6.2.11, 6.2.12, 6.2.13, 6.2.14, 6.2.15, 6.3.0, 6.3.1, 6.3.2, 6.3.3, 6.3.4, 6.3.5, 6.3.6, 6.3.7, 6.3.8, 6.3.9, 6.3.10, 6.3.11, 6.3.12, 6.3.13, 6.3.14, 6.4.0, 6.4.1, 6.4.2, 6.4.3, 6.4.4, 6.4.5, 6.4.6, 6.4.7, 6.4.8, 6.4.9, 6.4.10, 6.4.11


Comments

Hi Moiseroth,
Thanks for your comment. We cover a few options for clearing the cache and refreshing after adding new static assets here:
http://docs.splunk.com/Documentation/Splunk/6.4.6/AdvancedDev/CustomizationOptions#Clear_client_and_server_assets_caches_after_customization

Thanks!

Frobinson splunk, Splunker
March 10, 2017

Sometime you need to restart web interface to reload new .css files
This won't restart the entire splunk, just webinterface.
$SPLUNK_HOME/bin/splunk restart splunkweb

Moisesroth
March 9, 2017

Thanks for your question!

There is some guidance in this topic about using one app’s custom files in another app’s dashboard.
See the "Add custom files from a different app to a dashboard" sub-topic above.
If this doesn't address your question, can you let me know what details I can provide? Thanks!

Frobinson splunk, Splunker
November 19, 2015

Hey,

is it possible to inject a css file from one app to another? As Example -> $SPLUNK_HOME/etc/apps/myApp/appserver/static/dashboard.css -> $SPLUNK_HOME/etc/apps/search/appserver/static/dashboard.css

Means myApp/dashboard.css is included in template from search/dashboard

Kaibln
November 19, 2015

Hi @Skender27, thanks for your question. As this topic is currently under revision, I would suggest you try asking this question in our community forum: http://answers.splunk.com/

Hope this helps!

Frobinson splunk, Splunker
August 3, 2015

Hi,

When I modify the dashaboard source, how do I add more than a stylesheet in the same tag <form>?

Thanks,
Skender

Skender27
August 3, 2015

Hello!
Thank you for your feedback on this topic. We are working on updating this information. Please check back for updates in the near future.

Frobinson splunk, Splunker
June 12, 2015

Yes, looks like this was dropped in 6.0. Could we get updated docs? On top of the page it says that it applies to 6.1.3 when obviously this is not the case. This is the second time I lose an hour trying to use a deprecated feature.

Icegras
September 12, 2014

Hello,<br /><br />That is not right for search application in Splunk 6. I mean, there are an application.css file in the application but it's not loaded. <br /><br />regards

Support0
September 8, 2014

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