Unable to customize dashboard with CSS

[clincg]

Hi - I'm trying to customize the look of my dashboard using customized CSS files described in http://www.splunk.com/base/Documentation/4.1.4/Developer/UseCSS. I followed the instruction and put "mycss.css" file to the $SPLUNK_HOME/etc/apps//appserver/static/ directory and added stylesheet="mycss.css" to the view tag of the advanced xml file.

However, when I try to load the dashboard, it looks like "mycss.css" is being ignored and none of the customizations in the file is being displayed. The css file is not showing up in Firebug's CSS tab.

Is there any way I can check and see if the dashboard is able to read my css file?

[sansay]

You do need to restart splunkweb the first time you add a stylesheet. Otherwise the changes won't appear. After that, just refreshing the page will reflect any changes you make to your stylesheet.
And this should really be indicated in the Splunk documentation. I spent hours trying to figure out if I was writing wrong code in my new stylesheet, or if it was in the wrong location on the splunk server.
Please Splunk people update the help docs.

[IT_Bullgod]

You do not need to restart splunkweb. Typically the old rendering of the page is cached in the browser and all that's needed is a page refresh. That should be all you need if the only changes are CSS modifications, or changes to simple XML.

[gkanapathy]

Changees to simple XML (and complex XML) do require a require a refresh of the app home page, e.g. http://localhost:8000/en-US/app/myappname/. There are also REST endpoints to trigger refreshes, and a "bump" REST endpoint to force browsers to reload resources even if the user does not clear/reload the cache: http://www.splunk.com/base/Documentation/4.1.5/Developer/CustomizationOptions#Useful_URIs_for_custom...

[clincg · Accepted solution]

Finally figured it out - after adding a new CSS file, you will have to RESTART SPLUNKWEB, then splunk will read the new css.

The documentation said you don't have to restart splunk, but didn't mention splunkweb has to be restarted.

[helge]

This also applies to renaming a CSS file.

[southeringtonp]

Did you intentionally leave the app name out of the path?

It should look more like:
     $SPLUNK_HOME/etc/apps/YOURAPPHERE/appserver/static/mycss.css

There are two Firefox extensions that are a big help with this sort of thing -- Firebug and CSS Reloader.

Once you've installed Firebug, hit F12 to bring up the controls and click on the CSS tab. Just below the tabs you'll have a little blue/grey bar that shows the name of one of your CSS files. Hit the down arrow next to that and you can see all of the stylesheets that have been loaded. Choose the stylesheet you want, and it will show you the CSS body.

CSS Reloader makes it easier to make changes and see the result on the fly, without having to wait for the whole page to reload. Once you've installed the add-on, hit F9 to re-apply the stylesheet.

[clincg]

I do see the "# stylesheet: mycss.css" when I use the showsource=1, just that they do not have any effects on the display.

[southeringtonp]

When you go to your dashboard, try adding ?showsource=1 to the URL.

Do you see the stylesheet listed under properties?
...
* stylesheet: eventsearch.css
* template: dashboard.html
... etc. ...

If it's missing, maybe you have more than one version of the file floating around? If you've edited the file via the manager you could have an additional copy in local or default that's overriding it.

Also, I don't think Splunk will load the CSS across apps. If your browser url is under the search app, but the dashboard is under YOURAPPHERE, it may not find the stylesheet.

[clincg]

yeah, the app name got truncated when I paste the directory. I did put it in $SPLUNK_HOME/etc/apps/YOURAPPHERE/appserver/static/. I'm already using Firebug and the css tab is not showing the mycss.css file is being loaded.