Setting custom background properties

Apply background and border styles to design elements, for example, color and image properties for backgrounds and border style and width properties for borders.

About this task

To set background and border properties, do the following steps

Procedure

  1. Select the design element in the XPages editor.
  2. In the Properties view, click the Background tab.
  3. If you are setting custom styles for a view or a section control, you can click the diagram to select an area of the control. 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.
  4. In the Background section, do the following steps:
    1. In the Color field, click the color picker button, select a background color in the dialog box, and then click OK. To reset the background color to its original state (transparent), click the button with the two arrows.
    2. In the Image URL field, type a URL to an image in the application. The URL needs to be in the form url(imagename), the same as if added by clicking the Launch image chooser dialog button. Click OK. This adds the image to the background of the design element.
    3. In the Repeat field, select how and if the background image repeats. Choices include the following:
      • Repeat: repeats the image both horizontally and vertically
      • Repeat-x: repeats the image horizontally
      • Repeat-y: repeats the image vertically
      • No-repeat: image displays only once (does not repeat)
    4. In the Attachment field, specify how you want the image to appear on the user's screen. Choices include the following:
      • Scroll: the image scrolls with the screen
      • Fixed: the image stays fixed on the background, even when scrolling
    5. In the Position field, select the position of the background of the UI control. Choices include Top left, Top center, Top right, Center left, Center center, Center right, Bottom left, Bottom Center and Bottom right.
  5. In the Border section, do the following steps:
    1. In the Color field, click the color picker button, select a background color in the dialog box, and then click OK. To reset the background color to its original state (transparent), click the button with the two arrows.
    2. In the Style field, select the border style from the list.
    3. In the Width field, select the border width from the list.
  6. Click File > Save to save your changes.