All Apps and Add-ons

Image in the top left of Splunk View

sumanth_isac
Path Finder

Hi i have created an app and included a logo(.png file) for that.

The logo can be seen in Splunk > Home.

But i also want it when i click on that app, like we get the logo in top left of the splunk window in Sideview utls app, Google maps app etc.

Can we do that on our own app, ie to get logo my own app in the top left of the splunk window.

Tags (3)
0 Karma
1 Solution

Ayn
Legend

In your app's appserver/static/application.css:

.appLogo {
    height: <somethingappropriate>px; 
    width: <somethingappropriate>px;
    background-image: url(yourpic.png);
    background-repeat: no-repeat;
}

Your image should also reside in appserver/static.

View solution in original post

Ayn
Legend

In your app's appserver/static/application.css:

.appLogo {
    height: <somethingappropriate>px; 
    width: <somethingappropriate>px;
    background-image: url(yourpic.png);
    background-repeat: no-repeat;
}

Your image should also reside in appserver/static.

skender27
Contributor

Ok. I found the proble.
I had copied everything in the appserver/static (also the images iteself).
While I had to put them into /static and the .css file under /appserver/static

0 Karma

skender27
Contributor

Hi,

Here is what I have:
/opt/splunk/etc/apps//appserver/static
[splunk@splunk static]$ ls
appIcon_2x.png application.css appLogo_2x.png

and here is the application.css part of the content:
.appLogo {
height: 80px;
width: 308px;
background-image: url(appLogo_2x.png);
background-repeat: no-repeat;
}

I tried also with double quotes, but it doesn't work... The dimesnsions are the one suggested by the Splunk docs about customizing apps and appearance...
But I just do not understand what is the bug....

Any suggstions?
Thanks,
Skender kollcaku

0 Karma

Ayn
Legend

No double quotes necessary I think, but it doesn't hurt either.

0 Karma

Ayn
Legend

That's because your image URL is wrong. Like I said your image should reside in the appserver/static directory but the URL you supply should not be anything else than just the filename. So if you have the file appIcon.png, then that's the only thing you should put in the background-image url.

sumanth_isac
Path Finder

Hi Ayn, thank you got it. What you should change in your code is background-image: url("yourpic.png");
Double quotes.
It will work like a charm.

0 Karma

sumanth_isac
Path Finder

Hey Ayn,
I did this

.appLogo {
height: 36px;
width: 150px;
background-image:url(/opt/splunk/etc/apps/dataflow/appserver/static/appIcon.png);
background-repeat: no-repeat;
}

splunk logo has gone but i m not able to see my image? its showing only blank space

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...