Thursday, January 26, 2012

Runtime optimized JavaScript and CSS - workaround for multiple stylesheets

Update: This workaround is only needed if you use "folders" in the image resource name.
E.g. backgrounds\home.png.

If you have multiple local stylesheets on a page, the CSS files are combined into a single file.

This changes the url to the stylesheet (adds xsp/.ibmmodres/.css after the path to the db).

If you have an image reference like url(image.png), the image can no longer be loaded, as the url is relative to the path of the stylesheet.

To work around this issue, add ../../../ to the image reference.

E.g.
url(../../../image.png)

4 comments:

Giuseppe Grasso said...

that's strange, on my server images are addressable either as [...]/database.NSF/xsp/.ibmmodres/.css/image.png
or
[...]/database.NSF/image.png

Tommy Valand said...

Seems you are correct. The app I was having problems with used "folders" in the image name. E.g. backgrounds\home.png.

So the workaround is only needed if you use "folders" in the image name.

Thanks for the heads up :)

Raghu said...

Hey,

used this feature. But am facing problem in loading the file.

We have two servers for development & when i moved the xpage application from one server to other server, then the xsp/.ibmmodres/.css url is not loading & application failing. Is it the access issue to xsp/.ibmmodres/.css folders?

Tommy Valand said...

Hard to say. I haven't had any issues like this, so I can't be of much help.

My best suggestion is to post the question on StackOverflow.com. Tag it with XPages. There might be other people that follow the site that have encountered this.