Web UI Framework localization - localizing UI branding

You can localize the UI branding according to the standards of you location.

The Web UI Framework allows you to customize UI branding in two ways:

  • You can customize the Look and Feel of the UI by means of CSS files.
  • You can customize the UI layout by using the Web UI Framework Extensibility Workbench.

Localizing theme

The Look and Feel (which include themes and images) of the UI in the Web UI Framework is CSS file-driven. You can add, override, or modify these CSS files. The default theme CSS files provided by platform are present in: 

<INSTALL_DIR>/repository/eardata/platform_uifwk/<version>/war/platform/css

where <version> is the Sterling Application Platform version being consumed by the application.

To override one or more entries in the platform.css file for a locale, you need to provide them in a file with the same name as the original file (platform.css), and then copy it to the localized directory:

<INSTALL_DIR>/repository/eardata/platform_uifwk/<version>/war/localization/<locale
>/platform/css

where <locale> is in the format <language_code>/<country_code>/<variant>. For example, en/US/EST.

The ext provided themes are present in the ext-all.css file in the directory:

<INSTALL_DIR>/repository/eardata/platform_uifwk/<version>/war/ext/resources/css

You can follow a similar process to localize the themes in the ext-all.css file by creating your own ext-all.css file, providing your entries, and then copying it to the localized directory:

<INSTALL_DIR>/repository/eardata/platform_uifwk/<version>/war/localization/locale/ext/
resources/css

Localizing icons

You can add your new images and/or icons to the <INSTALL_DIR>/repository/eardata/platform_uifwk/<version>/war/platform/<custom_path> directory, where <custom_path> is the user-defined directory structure where the locale-specific images and/or icons are provided. For example, localeIcons/platformIcons.

For these new images and/or icons to be displayed in the application, you need to add an entry for them in the localized CSS file, which may be the platform.css or ext-all.css file. For more details, refer to the Localizing Themes section.

Customizing UI layout

You can customize the UI layout by using the Web UI Framework Extensibility Workbench.