Dashboards & Visualizations

Custom CSS file not found

Teddles
Explorer

Hi all,

I'm having trouble getting Splunk to pick up a custom CSS file for a dashboard in the Search & Reporting app. I've put the file in the following location as per the instructions in the docs: apps\search\appserver\static and had the administrator restart Splunk.

I can now navigate to the file in my browser at the following location: https://(servername)/en-GB/static/app/search/custom_styles.css and it displays the contents as expected in the browser however when I try to load it in the dashboard using this code <form stylesheet="custom_styles.css">, it's not working. I used Inspect in Chrome to check for errors and found a 404 Not Found error with the following path: https://(servername)/en-GB/static/@f7123456f0c/app/search/custom_styles.css

The string @f7123456f0c refers to the splunkd instance as far as I can tell, and I'm at a loss as to why it's adding that in and whether or not this is the cause of the issue. Any insights or advice on how to fix this would be much appreciated.

Thanks

0 Karma
1 Solution

niketn
Legend

If you have access to Application Manager, can you try uploading CSS file through UI? If you are using the "Search and Reporting" app, as per your example, following should be the path

http://(servername)/en-US/manager/launcher/apps/local/search?action=edit

From "Upload Asset", browse your custom_styles.css file and save.

(PS: If you also have access to Add Data functionality through Splunk UI, you can actually use Settings > Data Inputs > Files & directories > New to open file browser on Splunk instance and browse to the css file location to validate the file)

Static files not only requires reboot of Splunk instance it might also require clearing of browser history. So please also try both the steps.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

If you have access to Application Manager, can you try uploading CSS file through UI? If you are using the "Search and Reporting" app, as per your example, following should be the path

http://(servername)/en-US/manager/launcher/apps/local/search?action=edit

From "Upload Asset", browse your custom_styles.css file and save.

(PS: If you also have access to Add Data functionality through Splunk UI, you can actually use Settings > Data Inputs > Files & directories > New to open file browser on Splunk instance and browse to the css file location to validate the file)

Static files not only requires reboot of Splunk instance it might also require clearing of browser history. So please also try both the steps.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Teddles
Explorer

Clearing the server cache + browser cache did it, thank you for your help.

0 Karma

rroberts
Splunk Employee
Splunk Employee

I think it has to do with the ..."Static assets for apps are cached on the client and server side. If you update an item in the /appserver/static directory, you can see changes by clearing both the client and server caches. See...

http://docs.splunk.com/Documentation/SplunkCloud/6.5.1/AdvancedDev/CustomizationOptions

"http://docs.splunk.com/Documentation/SplunkCloud/6.5.1/AdvancedDev/CustomizationOptions"

0 Karma

Teddles
Explorer

That did it, thank you. I've been able to consistently reflect changes in the custom_styles.css file now by using a combination of clearing the server cache and my browser cache.

0 Karma
Get Updates on the Splunk Community!

More Control Over Your Monitoring Costs with Archived Metrics!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...

New in Observability Cloud - Explicit Bucket Histograms

Splunk introduces native support for histograms as a metric data type within Observability Cloud with Explicit ...

Updated Team Landing Page in Splunk Observability

We’re making some changes to the team landing page in Splunk Observability, based on your feedback. The ...