XPages Tip: Setting the Body Class

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

BodyClass

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>
Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: