Solved: CSS File Upload Help

alan20854 · ‎08-19-2016

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?

Raghav2384 · ‎08-19-2016

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 · ‎08-19-2016

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

CSS File Upload Help

Developer Spotlight with Paul Stout

State of Splunk Careers 2024: Maximizing Career Outcomes and the Continued Value of ...

Data-Driven Success: Splunk & Financial Services