topic Re: I can't Overlay an Image Like Splunk Dashboard Sample in Dashboards & Visualizations

I can't Overlay an Image Like Splunk Dashboard Sample

danielgp89 — Mon, 28 Sep 2020 20:41:50 GMT

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

Re: I can't Overlay an Image Like Splunk Dashboard Sample

bowesmana — Tue, 29 Sep 2020 00:36:34 GMT

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

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'

Re: I can't Overlay an Image Like Splunk Dashboard Sample

niketn — Tue, 29 Sep 2020 18:14:59 GMT

@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-dashboards-with-inline-css.html
The above also tells you about option to test CSS stuff directly through Simple XML by using <html> panels.

Re: I can't Overlay an Image Like Splunk Dashboard Sample

danielgp89 — Tue, 06 Oct 2020 21:00:29 GMT

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

Re: I can't Overlay an Image Like Splunk Dashboard Sample

niketn — Wed, 07 Oct 2020 03:22:07 GMT

@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!