Related Answers
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/staticdirectory. 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.jsdashboard.css
Place the files in the following directory.
$SPLUNK_HOME/etc/apps/<app_name>/appserver/static
|
PREVIOUS Add Web resources to your view |
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
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
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!
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
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!
Hi,
When I modify the dashaboard source, how do I add more than a stylesheet in the same tag <form>?
Thanks,
Skender
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.
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.
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
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!