I have the following requirement: Our company has several different labels, and thus different styles for their web applications. So, i need to apply a different CSS for different customers. I know which initial style i need to apply, because i can add a bookmark to the URL like #CSSNAME when i start the application. On application apnPreOpen i can check the bookmark, but then i want to apply a specific CSS before anything loads.

I was looking in calling an external javascript event, and change the stylesheet href link, but that might be problematic since there is no id or title added to the sylesheet link when you generate the link to the default CSS in the main.jsp..

Any ideas how i can solve this?

It might be an idea to add an API later to do this, but i need this quite urgent for a presentation i need to do.

Thanks, Michiel

asked 09 Nov '12, 08:09

Michiel%20A's gravatar image

Michiel A
accept rate: 13%

Hi Michiel,
As you said, currently we do not have an api for this. But you can still achieve this by using an externalMethod on your postOpen event.

First, define an externalMethod with javascript signature "applyCss(string)"

Then define a js function which calls an already defined method of fs application:

function applyCss(fileName) {

Dont forget to include this script on main.jsp. Also keep in mind that this loadCss method does not remove other css files and just appends new css file to the header, so its better you dont set a custom css for your app and handle all on postOpen.

Now you can invoke this em with the specific css file name (using bookmark value) on postOpen event.

Here is the tutorial for externalMethods for more information:


answered 09 Nov '12, 09:22

oskansavli's gravatar image

oskansavli ♦♦
accept rate: 45%

Hi Oskan,

I figured out a little different way in which i can switch CSS, also after i start the application. I use this javascript function:

function changeCSS(cssFileName, cssLinkIndex) {
    var link = document.getElementsByTagName("link").item(cssLinkIndex);
    link.setAttribute("href", cssFileName);

cssFileName will be the link to the css, like apps/Aplication_name/css/css_name.css
The cssLinkIndex will be the index number of the link you want to replace. Since (at this time) the custom application CSS file is the 4th one, the link index is 3.

Calling the changeCSS function (from external method) will replace the application css and will cause the css to reload. This can be used in apnPreOpen, but also in the application like a theme changer.

Thanks, Michiel

EDIT: i noticed that calling this on apnPreOpen or apnPostOpen will crash Internet Explorer 8/9. I am lookimh for a solution, but if anybody has an idea....


answered 09 Nov '12, 13:29

Michiel%20A's gravatar image

Michiel A
accept rate: 13%

edited 12 Nov '12, 03:28

It worked for me on IE8/9 using in postOpen event.

(12 Nov '12, 02:22) oskansavli ♦♦
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 09 Nov '12, 08:09

Seen: 3,330 times

Last updated: 12 Nov '12, 03:28

© Copyright Gerger 2017