Dashboards & Visualizations

I can't Overlay an Image Like Splunk Dashboard Sample

Path Finder

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

Labels (1)
0 Karma

Legend

@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!!!"
0 Karma

Path Finder

Hello @niketnilay @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

 

0 Karma

Legend

@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!!!"
0 Karma

Influencer

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'

 

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!