In the last part of this mini series I showed you how to add basic resources to a theme document but I also mentioned that when you use themes you need to keep a cheat sheet handy because the class names are not listed in the styles property tab for any control.

There is, however, another feature of theme documents that can make things easier by automatically applying style classes to certain controls.

Lets say you have written some CSS that you want to use on all the 'Pager' controls in your application. You could manually add the style names to the styleClass property each time you add a pager to your application or you can use the theme document by adding a control section that looks like this

 Pager
 
 outerStyleClass
 myPagerContainer
 
 
 styleClass
 myPager
 
 

The name of the control your are specifing the properties for is in the name tag. There are a lot of controls and even sub controls that you can include in here from the simple controls like 'link' or 'text' or 'button' to the more advanced ones like 'PagerControl.Pager.First' or 'DataTable.ViewPanel'. next we define the property that we want to manage using a tag and inside that tag we specify the name and value. In most cases the name of the property that we want to manage will be 'styleClass' but as you can see in my example about there may be other properties like 'outerStyleClass' or 'selectedTabStyleClass' ( which you'll find in a tabbed panel control).

If you are extending a built in theme like oneui that the theme document may already have a section for the control you are setting up your default properties for. Under normal circumstances extended themes are merged in with your theme but you can override this by adding an override attribute to the control tag like this

The control override will ensure that your control property definitions take precidence and none of the property definitions from the theme you are extending will bleed through into your application.

So what happens if you manually add a value to the styleClass property in your XPage? Well under normal circumstances the value manually specified overrides anything that may appear in the theme document for that control. So if you have a control property for buttons setup so that all buttons in your application look the same but you need to put in a special button using a different style you still can. This behaviour, however, can also be overridden in the theme document by adding a 'mode' attribute to a property tag like this

 ViewRoot
 
 styleClass
 tundra 
 
 

here I am using 'mode="concat" to make sure that the Dojo style call of 'tundra' is added to every Xpage. The control name 'ViewRoot' is equivilent to the tag in the generated HTML.

In the next part I'll show you how to create special controls and how to apply them in the design of your XPage application.

Using Themes In XPages Part One