- Splunk Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- I can't Overlay an Image Like Splunk Dashboard Sam...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I can't Overlay an Image Like Splunk Dashboard Sample
It's been a very very long time since I want to accomplish this goal.
I want to set an image in to my dashboard like the Image Overlay Dashboard Sample.
I already created a new app and created the appserver/static folders
But I have a few questions that the Dashboard Sample doesn´t say.
1.- In which path do I put the .css file?
2.- In which path do I put the image?
3.- Does the image only can be in png format or can be in jpg
4.- In the .css file which is the exact way to target the image path? Example: the path where is the image is:
apps\app_name\appserver\static\image.png
in the ccs file is defined like this:
image_overlay_panel .image{
background: transparent 50% 50% no-repeat url('C:\Program Files\Splunk\etc\apps\app_name\appserver\static\image.png');
position:absolute;
top: 0px;
left: 0px;
width: inherit;
height: inherit;
Can you help me please
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@danielgp89 I think you have got the CSS file right and issue is finding the path for image. Which should be the same as your CSS if you are using the relative path.
background: transparent 50% 50% no-repeat url('/static/app/app_name/image.png');
If you have have placed the image file under your app's appserver/static folder you can test whether image got picked up or not by changing the browser URL like the following:
https://<YourSplunkServer:portnumber>/en-US/static/app/app_name/image.png
If the image shows up the path is correct. If not you may need to bump, refresh and restart Splunk. You may also need to clear internet browser history.
You can refer to the following Clarafication blog to understand static files better: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...
The above also tells you about option to test CSS stuff directly through Simple XML by using <html> panels.
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello @niketn @bowesmana , hope you are doing well.
Thanks for your reply.
The issue was in the Internet Browser. I need to delete all the cookies and history for the new CSS get refresh. Even when I restart splunk, the browser was the problem, it seems it get stuck in the browser memory the wrong parms.
Thanks a lot for your reply and time.
Best Regards
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@danielgp89 as suggested even browser history needs to be cleaned up. If you are in your dev instance you can remove caching features for faster static file changes (not for production environments). Refer to Splunk Documentation for web.conf config: https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomVizTutorial
Do accept/up vote the answer if it helped!
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
css goes in appserver/static
Image goes in appserver/static
Image can be in whatever form the browser will support
Image paths are like this, for example within an HTML panel
<img src="/static/app/YouAppName/ImageName"/>Hope this helps
I think you can put the image in folders underneath appserver/static, but then just have to modify your path accordingly to add the extra component under 'YourAppName'
.conf24 | Registration Open!
ICYMI - Check out the latest releases of Splunk Edge Processor
Introducing the 2024 SplunkTrust!
