If you need to set a class on the body tag of an XPage, you can do so via a page property. In this post I’ll show how to set it and the effect that it has on an XPage and Custom Control.
Default Body Class
If you create a blank XPage and display it in a browser, you’ll see that the body tag gets two classes by default:
<body class="xspView tundra">
Dojo generally looks for a theme name in the body class and tundra is the Dojo theme that XPages uses by default.
If you want to change this, you can do it application-wide via a theme or you can change the class of the body tag on a single page.
Adding a Body Class
You can change the body class by selecting the xp:view tag, going to All Properties > styling > styleClass
This changes the body tag sent to the page to be this:
<body class="myNewClass xspView tundra">
Note 1: I’ve seen other cases where it removed existing body classes and only used the one specified in the page property. I would guess this has to do with the theme in use, but I haven’t tested it further. Just look at the page output before and after to see the effect.
Note 2: If this messes up styling of standard XPages controls, you can add multiple classes — just separate each one with a space like you would when adding multiple classes to any HTML element.
Setting the styleClass of a Custom Control
The same property is available on a custom control. However, as you might expect, the effect is different, since the page only has 1 body tag.
If you set the property on a custom control, it leaves the page’s body tag alone but rather adds a div with that class to surround the contents of the custom control.
<body class="xspView tundra"> ... <div class="myClass"> </div>
