Dashboards & Visualizations

CSS File Upload Help

alan20854
Path Finder

I am trying to upload a CSS file to style a dashboard in Search and Reporting. I looked at the documentation, and it says to use this directory path: $SPLUNK_HOME/etc/apps/search/appserver/static

Where do I navigate to to do this/how do I use that directory path?

Tags (3)
0 Karma
1 Solution

Raghav2384
Motivator

Hello @alan20854

Docs are referring to the OS path where splunk is installed. Here's a common directory structure

On Linux: /opt/splunk is typically you SPlunk Home Path or popularly called as $SPLUNK-HOME

On Windows: C:\Program Files\Splunk is you Splunk Home unless installed in a different directory.

Now, As you know, everything you see on SPlunk GUI is an app. (Example: search app, launcher app etc). If you want to use the cosmetics of css for a particular app, log on to the box where splunk is installed, navigate to the Splunk path. I will pick linux

cd /opt/splunk/etc/apps/search/appserver/static/ and drop all your fancy images or css files here. Please note, you should have os access to add this css file.Also, a restart of splunkd is required for the changes to take effect (For the first time i beleive).

OR, If css is not huge and simple, you can use inline by editing the simple xml, adding like this

<panel>
      <html>
        <style type="text/css">

          .single-value .single-result {
     font-size: 30px !important;
 }
         .single-value:before {
    font-family: "Splunk Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 30px;

}
        </style>
</html>
</panel>

Hope this helps

Thanks,
Raghav

View solution in original post

Raghav2384
Motivator

Hello @alan20854

Docs are referring to the OS path where splunk is installed. Here's a common directory structure

On Linux: /opt/splunk is typically you SPlunk Home Path or popularly called as $SPLUNK-HOME

On Windows: C:\Program Files\Splunk is you Splunk Home unless installed in a different directory.

Now, As you know, everything you see on SPlunk GUI is an app. (Example: search app, launcher app etc). If you want to use the cosmetics of css for a particular app, log on to the box where splunk is installed, navigate to the Splunk path. I will pick linux

cd /opt/splunk/etc/apps/search/appserver/static/ and drop all your fancy images or css files here. Please note, you should have os access to add this css file.Also, a restart of splunkd is required for the changes to take effect (For the first time i beleive).

OR, If css is not huge and simple, you can use inline by editing the simple xml, adding like this

<panel>
      <html>
        <style type="text/css">

          .single-value .single-result {
     font-size: 30px !important;
 }
         .single-value:before {
    font-family: "Splunk Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 30px;

}
        </style>
</html>
</panel>

Hope this helps

Thanks,
Raghav

Get Updates on the Splunk Community!

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...

What You Read The Most: Splunk Lantern’s Most Popular Articles!

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

See your relevant APM services, dashboards, and alerts in one place with the updated ...

As a Splunk Observability user, you have a lot of data you have to manage, prioritize, and troubleshoot on a ...