Working with custom styles

Create your own custom styles for XPages and controls.

About this task

You can set custom styles for the font size and color, font alignment, background colors, images, border styles, margins and padding, and more. You can also export custom style attributes to a style sheet as a style class to reuse across XPages.

To apply custom styles, select the XPage or control in the XPages editor, and click the Style tab in the Properties view. You can click the Font, Background, and Margins tabs to set custom style properties.

If you are setting custom styles for a view or a section control, you can click the Font, Background, and Margins tabs and then click an area of the diagram to select a particular area of the control to set a style for. For example, for a section control, you can select the entire section or the section header. For a view control, you can select the entire view or the data table.

Note: You can also click a view column or view column header in the Design tab of the editor and then set its properties.

See the following topics for more information about setting and exporting custom styles.

Procedure

  1. To apply style classes from a style sheet that you have recently used in the application, expand the Recently used styles category and select a class. After you select a class, it appears in the Class field.
  2. To apply style classes from style sheets that you have created or imported and then added to the XPage, expand the Style sheets on page category and select a class. After you select a class, it appears in the Class field.
  3. To compute the style class, click the diamond beside the Class field and write a script that returns a string. For example, here is a formula that uses one class or another depending on the user name:
    if(session.getCommonUserName() == "anonymous") 	
     return "CaptionFigColumn"; 
    
    else 
     return "Note"
  4. Click File > Save to save your changes.