How to apply custom CSS to a dashboard?

[jsven7]

Can someone please explain from level 0 how to get a dashboard to execute some CSS code? Checked Answers and documentation none is helping me make contact with the ground.

[jeffland · Accepted solution]

CSS is not exactly run, it's applied to your existing html elements... but excuse my nitpicking. To see it in action, take any dashboard you already have and want to change, and edit its XML directly. Change the first line from

<dashboard>
  <label>Title of the Dashboard</label>

to

<dashboard  stylesheet="my_style.css">
  <label>Title of the Dashboard</label>

(If you have inputs on that dashboard, it will say "form" instead of "dashboard".)
Now place a file called my_style.css in the appserver/static folder of the app this dashboard is in (you'll have to create the folders if they're not there already; if the dashboard is in the search app, that means %SPLUNK_HOME%/etc/apps/search/appserver/static/my_style.css) and give it the following content:

.dashboard-header > h2 {
    font-size: 70px;
}

Restart your splunk instance (to pick up the new file) and check your dashboard to see that the title of the dashboard is now styled according to your css. Feel free to come back with any further questions!
Oh, by the way, the docs would have been these.

[rlacher1]

Changing <dashboard style="my_style.css"> to <form style="my_style.css"> fixed my issue. Thanks as well.

[Michael]

OMG, you gotta love the consistency of the documentation!

I've read in a dozen places about using: dashboard stylesheet="blah.css"

I tried it 100 different ways in various places, all failing.

Then I read RLacher's comment above here about using: form style="blah.css"

and THAT didn't work.

On a whim, I tried: form stylesheet="blah.css"

AND IT WORKED!

Go figure.

And comments like: "I cold not explain it better than the documentation itself" can go take a hike...

[jsven7]

Thanks @jeffland appreciate the explanation.

[asimagu]

I could not explain it better than the documentation itself

put your .css file under $SPLUnk_HOME/etc/apps//appserver/static/.css

and make sure the sourcecode of your dashboard shows something like

<dashboard stylesheet="<your_custom_css>.css" >

http://docs.splunk.com/Documentation/Splunk/6.3.1/AdvancedDev/UseCSS

Read some doc, dude!

[jsven7]

I read this doc. For some reason I can't get to $SPLUNK_HOME/etc/apps/search/appserver/static. When I try to go there from a window it opens up a browser and then opens a Bing search.

[jplumsdaine22]

You're using windows? Then you want

%SPLUNK_HOME%\etc\apps\search\appserver\static

SPLUNK_HOME will be where ever you installed splunk. For example the full path might be:

C:\Program Files\Splunk\etc\apps\search\appserver\static

Most people here will assume you're running on linux unless you specify otherwise

[jeffland]

Your folder is probably not yet created.
Do not navigate there with your browser, use a console or a file commander (such as WinSCP).