topic Re: Unable to customize dashboard with CSS in Dashboards & Visualizations

Unable to customize dashboard with CSS

clincg — Thu, 26 Aug 2010 02:01:27 GMT

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?

Re: Unable to customize dashboard with CSS

southeringtonp — Thu, 26 Aug 2010 02:09:52 GMT

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.

Re: Unable to customize dashboard with CSS

clincg — Thu, 26 Aug 2010 02:23:16 GMT

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.

Re: Unable to customize dashboard with CSS

southeringtonp — Thu, 26 Aug 2010 02:51:45 GMT

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.

Re: Unable to customize dashboard with CSS

clincg — Thu, 26 Aug 2010 04:00:53 GMT

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

Re: Unable to customize dashboard with CSS

clincg — Thu, 26 Aug 2010 08:05:39 GMT

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.

Re: Unable to customize dashboard with CSS

IT_Bullgod — Sun, 03 Oct 2010 08:22:58 GMT

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.

Re: Unable to customize dashboard with CSS

gkanapathy — Sun, 03 Oct 2010 23:21:31 GMT

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_customization

Re: Unable to customize dashboard with CSS

sansay — Fri, 28 Oct 2011 17:30:11 GMT

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.

Re: Unable to customize dashboard with CSS

helge — Fri, 07 Dec 2012 22:59:29 GMT

This also applies to renaming a CSS file.