When developing XPage applications you have two options for adding CSS style sheets to your code. You can attach them directly to the XPage or Custom Control resources section or you can create a theme document and reference them from there.

Adding the style sheet directly to the Xpage or Custom Control does have some advantages. The list of classes will appear in the styles section for all the controls on that page which will make selecting them a little easier and the 'design' perspective for the XPage will try and apply the styles so you get a better idea of how the page will look when it's rendered in the browser. It's not perfect but it can help.

Creating a theme document, however, allows you to build different sets of style sheets so the person deploying your application can easily change the look and feel of the application by selecting which theme to use. As an example you could have different color based themes. The disadvantage is that the list of classes in the CSS file(s) won't display in the styles section for each control so you need to have some sort of cheat sheet to help you remember them and the design perspective won't render the controls with the css.

A theme document is just an XML file within the notes database. You'll find them in the Resources -> Themes section of the designer client. The basic structure of a theme document looks like this :

text/css
stylesheet.css

The first thing to note is the opening tag. As you can see you can decide to extend one of the builtin XPages themes. When the 'extends=' attribute is added to the theme tag the Xpages renderer will first process and add all the resources from that theme before processing your theme resources. The built in themes are 'webstandard', 'oneui', and 'notes'. If your not extending one of the built in themes then you can leave this attribute out completely.

Inside the theme tags you have resource tags. The resources can be style sheets as in the example above but it's also possible to add other resources, you just need to change the content-type as required by the resource type. You can have as many resource sections as you need for your theme.

The resource tag can also contain a 'rendered' attribute like this

In this example the rendered attribute is running some server side javascript to determine which browser is being used. If it is Internet Explorer versions 0 thru 6 then the resource is rendered to the web browser, if your using higher version of IE or a different web browser then the resource does not get sent to the users web browser. This is a great way of adding special stylesheets that contain hacks for some of the behaviours of CSS in earlier versions of IE.

In the next part of this mini series I'll show you how to automatically add certain style classes to controls using a theme document.

Using Themes In XPages Part Two