3.4 Configuring User Interface Settings

SSPR includes a flexible theming mechanism that allows for maximum customization of look and branding of the SSPR application. You can customize SSPR by modifying CSS files. SSPR uses style.css, the default CSS file for standard browser displays, and mobileStyle.css for mobile devices. These files are included in the SSPR/public/resources/ directory. It is recommended to not modify these files.

SSPR also includes another set of CSS files from a theme directory. By default, the location of this is SSPR/public/resources/themes/default. Because of their position in the page loading sequence, settings in these files override the settings in the default CSS files. This is the place to make your customization.

You can control SSPR themes through the Interface Theme setting (Settings > User Interface > Look & Feel > Interface Theme). This setting controls the themes under SSPR /public/resources/themes/. SSPR includes different sample themes also.

The following are two important setting options:

  • Embedded: When you select this option, the theme CSS files are stored as part of the SSPR configuration, not as part of the file system. There are two settings where the CSS file contents can be placed: Settings > User Interface > Embedded CSS Stylesheet and Embedded Mobile CSS Stylesheet. This allows an administrator to include customized CSS styles without modifying the file system.

  • Custom: When you select this option, you can set a custom location storing CSS theme files. There are two settings where the CSS file contents can be placed: Settings > User Interface > Custom CSS Stylesheet Location and Custom Mobile CSS Stylesheet Location. These settings control the actual URLs of the custom theme. They can be relative URLs for files on the SSPR server or they can be absolute URLs to reference CSS files on any other accessible Web server.

SSPR can allow multiple themes to be used. You can select the theme by adding the theme=themename parameter to the url. For example, when linking to the SSPR Forgotten Password module such as:

/sspr/public/ForgottenPassword?theme=myCustomTheme

SSPR will use theme files from the /public/resources/themes/myCustomTheme directory for the current user's session. You can place any number of directories under /public/resources/themes and make them available to work in this way.

Along with themes, SSPR allows you to do the following configurations:

  • Change the look and feel of the SSPR user interface.

    SSPR comes with a couple of standard themes. Each theme is an extension or modification of the default theme.

  • Determine whether to display or hide certain options, buttons, and messages on the user interface.

  • Customize the password guide text and determine the language of it.

To configure user interface settings

  1. In Configuration Editor, click Settings > User Interface > Look & Feel.

  2. On the right pane of Configuration Editor, Configure the following settings:

    Field

    Description

    Interface Theme

    Select a theme from the list the SSPR interfaces list.

    If you select Embedded, the system uses Embedded CSS style sheet and Embedded Mobile CSS style sheet to manage the custom CSS tags. If you select Custom, the system uses Custom CSS Location and Custom Mobile CSS Location.

    Custom CSS Stylesheet Location

    Specify the location and name of the custom style sheet. To implement this setting, you must set Embedded as theme under User Interface > Theme. If this is a relative URL, system appends it to the context path.

    Custom Mobile CSS Stylesheet Location

    Specify the location and name of the mobile style sheet. To implement this setting, you must set Embedded as theme under User Interface > Theme. If this is a relative URL, system appends it to the context path.

    Embedded CSS Stylesheet

    Specify the contents of the custom CSS style sheet.

    To implement this setting, you must set Embedded as theme under User Interface > Theme. The contents of this setting can be served from the URL of /public/resources/themes/embed/ssprStyle.css.

    Embedded Mobile CSS Stylesheet

    Specify the contents of the custom mobile CSS style sheet.

    To implement this setting, you must set Embedded as theme under User Interface > Theme. The contents of this setting can be served from the URL of /public/resources/themes/embed/ssprMobileStyle.css.

    Embedded JavaScript

    Provide a java script to include a particular content in all pages inside an html tag near the bottom of the page.

    Custom Resource Bundle

    Click Upload File to upload the customized zip file that contains static HTTP resources that an application should retrieve from the HTTP path, /public/resources/ to be added to the configuration.

    The maximum limit for the file size is 10 MB. The file should be of the type html, text, images, and so on. No server side processing will be performed when serving these files.

  3. On the left pane click UI Features.

  4. On the right pane, configure the following settings:

    Field

    Description

    Enable Showing Masked Fields

    Enable this setting if you want to allow users to toggle the show/ Hide button wherever required. This setting applies to all HTML masked password fields, regardless of the actual data type.

    Mask Password Fields

    Enable this setting to hide the input fields with a standard password masking.

    Mask Response Fields

    Enable this setting to mask the challenge/ response answers with standard password masking. This setting applies to both setup responses and forgotten password response entry screens.

    Show Cancel Button

    Select this check box to display the Cancel button to user wherever applicable.

    When users click Cancel, the system sends users to the forward URL (or logout URL if the password has been modified). The Cancel button does not appear on the Change Password screen if:

    • The password is expired

    • JavaScript is not enabled in the browser

    Show Success Pages

    Select this check box to enable SSPR to display a success messages when an activity completes successfully.

    Show Login Page Options

    Select this check to display the Forgotten Password and other options on the Login page.

    Show Logout Button

    Select this check box to display the Log Out button to an authenticated user.

    Show Home Button

    Select this check box to display the Home button to an authenticated user.

    Show Idle Timeout Counter

    Select this check box to display the user's remaining idle time. When that time reaches zero, the system redirects the user to the logout page.

  5. Click the Save icon.