Applying Themes to Portals


You can apply themes to a WebFOCUS portal to customize its look and feel. Themes can be applied to new portals inside the New Portal dialog box or to existing portals inside the Edit Portal dialog box. A theme affects the look of the entire set of elements of the portal, including colors, opacity, and typeface styles.

There are four themes that WebFOCUS offers:

  • Designer 2018
  • Light
  • Midnight
  • Vivid

Additionally, you can create your unique custom theme and apply it to a portal.

Procedure: How to Apply a Theme to a Portal

  1. Right-click a portal that you want to modify, and then click Edit.

    The Edit Portal dialog box opens.

  2. Select a theme of your choice from the Themes drop-down list, as shown in the following image.

    Note: The same setting can be configured for a new portal inside the New Portal dialog box.

  3. Click Save.

    The selected theme is applied to the portal.

Procedure: How to Create a Custom Portal Theme

  1. Sign in to WebFOCUS as an administrator.
  2. 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 action 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 required 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 theme CSS file that you copied, and then click Edit.

    The Text Editor opens in the new browser tab.

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

    In this example, we changed the sidebar, banner, and background colors, as shown in the following images.

  9. Save and close the Text Editor.
  10. Apply the new custom theme to a page, as described in How to Apply a Theme to a Portal.
  11. Run your portal to view the new theme.

    An example of a new theme applied to a porta is shown in the following image.

    Note: You can control access to themes, both standard, and custom, by configuring the List And Read security rule for the theme folder. To learn more about security rules, see the WebFOCUS Security and Administration technical content.