Applying Themes And Styles to Pages

While customizing your page, you can apply themes and styles to various page elements. The general theme of the page is defined by the Theme setting, which you can configure in the Properties panel, on the page level. A theme affects the look of the entire set of elements on the page, including colors, opacity, and typeface styles. Themes also dictate the color scheme for the Styles setting, which you can configure in the Properties panel, on the section and container levels.

There are three themes that WebFOCUS Designer offers:

• Designer 2018
• Light
• Midnight

Once you select a theme, you can further modify it by configuring styles. You can also save your unique combination of a theme and styles as a custom theme.

Procedure: How to Apply a Theme to a Page

1. In WebFOCUS Designer, click the Page toolbar to select it, and then click the Properties button .

   The Properties panel opens.

2. Click the Style tab.

   The style properties appear.

3. Under the Page Style section, from the Theme property drop-down list, select the theme that you want to use.

   The page refreshes with the new theme, as shown in the following image.

   

4. Save your changes.

Procedure: How to Apply Styles to Sections

1. In WebFOCUS Designer, click the canvas area.
2. Click the Properties button and then click the Style tab.

   The Style properties appear.

3. Click a style that you want to use.

   The page refreshes and applies the style to the section, as shown in the following image.

   

4. Optionally, add more sections and apply styles to them.
5. Click the new section and apply a style to it, as described in step 3.

   The page refreshes and applies the new style. You can apply different styles to different sections, as shown in the following image.

   

6. Save your changes.

Procedure: How to Apply Styles to Containers

1. In WebFOCUS Designer, add content or containers to a page.
2. Click a container, click the Properties button , and then click the Style tab.

   The Style properties appear.

3. Click a style that you want to use.

   The page refreshes and applies the style to the container, as shown in the following image.

   

4. Optionally apply styles to other containers on the canvas.

   Note: To apply the same style to multiple containers, you can multi-select containers by holding the Ctrl key, and then clicking a style button.

5. Save your changes.

Procedure: How to Create a Custom Theme

1. Sign in to WebFOCUS as an administrator.
2. On the Home Page, from the Resources tree, expand the Global Resources folder, and then expand the Themes folder.
3. Click the Custom folder, and then click Folder in the actions bar.

   The New Folder dialog box opens.

4. Populate the Title field with the name of your custom theme, and click OK.

   The custom theme folder is created. Your theme CSS file will reside in this folder. If you know which CSS classes should be used for your theme, you can create a new text file, add your code, and save this file as a Cascading Style Sheet. Alternatively, you can modify an existing theme CSS file. In this example, we copy and modify the theme CSS file for the Light theme.

5. Expand the Standard folder, and then expand the Light folder.
6. Copy the theme CSS file, and paste it inside your new custom theme folder.

   The following image shows the correct hierarchy of the custom theme file.

   

   Note: Do not modify the name of the theme CSS file. It is imperative that it stays the same for all themes. The name of the folder in which the file resides, is the theme name that is available in WebFOCUS Designer.

7. Right-click the newly copied theme CSS file, and then click Edit.

   The Text Editor window opens.

8. Modify the code to achieve the desired look of the theme.

   In this example, the background color has been changed from white #fff to yellow #ffff00, as shown in the following image.

   

9. Save and close the Text Editor.
10. In WebFOCUS Designer, apply the new custom theme to a page.

    An example of a new theme applied to a page, as shown in the following image.

    

11. Save your changes.