Modify the topic header widget display

  • Release version: Australia
  • Updated March 12, 2026
  • 2 minutes to read

    • The topic header widget displays the topic and its child topics, including all the connected content associated with the topics. You can configure the instance options to control the appearance of the topic header widget, such as the topic description and the topic banner and icon.

    Before you begin

    Role required: sp_admin or admin

    About this task

    You can configure the topic header widget display using the following steps. To edit the banner image, page header, or description, see Create and associate topics.

    Procedure

    1. Navigate to All > Self-Service > Employee Center.
      The Employee Center home page is displayed.
    2. Click a topic on the primary navigation bar.
      The topic page is displayed.
    3. Press and hold the control key, right-click the topic widget, and then select Instance Options.
      Topic widget instance options. The HR topic is shown as an example.
    4. Configure the instance options.
      Table 1. Instance options for topic header
      Instance option Description
      Include Description Description of the topic. Select this check box to show the description for the topic. This check box is selected by default.
      Primary Display This setting applies to all the topics. The choices are:
      • Text Only: Select to display only the topic name.
      • Icon: Select to display an icon beside the topic name.
      • Banner: Select to display a banner in the background with the topic name.

      Default value: Icon
      Secondary Display Provides the flexibility to apply this setting only to a select few topics. This setting overrides the primary display setting. The choices are:
      • Text Only: Select to display only the topic name.
      • Icon: Select to display an icon beside the topic name.
      • Banner: Select to display a banner in the background with the topic name.

      Default value: Banner
      Select list of topics Search for and select the topics to which you want to apply the secondary display setting.
      Banner Background Color Background color for the banner. The choices are:
      • Brand Primary
      • Brand Primary Darker
      • Brand Primary Lightest
      • Custom, Enter a hex code

      Default value: Brand Primary
      Banner Background Color Hexcode Specify a hex code for the banner background color. Enter a value in this field only if you select Custom, Enter a hex code in the Banner Background Color field.
      Banner Image Position How you want to position the banner in the widget. The choices are:
      • Left Top
      • Left Center
      • Left Bottom
      • Center Top
      • Center Center
      • Center Bottom
      • Right Top
      • Right Center
      • Right Bottom

      Default value: Center Center
      Banner Image Display The choices are:
      • Scale to fit: Scales the image to fit the entire widget.
      • Original size: Displays the original image in the widget.

      Default value: Scale to fit
      Banner Text Overlay Color Overlay color for the banner text. The choices are:
      • Overlay Dark
      • Overlay Light

      Default value: Overlay Dark
      Banner Text Overlay Opacity Opacity of the banner text overlay. The choices are:
      • 0
      • 0.1
      • 0.2
      • 0.3
      • 0.4
      • 0.5
      • 0.6
      • 0.7
      • 0.8
      • 0.9
      • 1

      Select 0 for full transparency and 1 for no transparency.

      Default value: 0.5
      Icon Background Color Background color for the icon. The choices are:
      • Background Primary
      • Background Secondary
      • Background Tertiary
      • Custom, Enter a hex code

      Default value: Background Primary
      Icon Background Color Hexcode Specify a hex code for the icon background color. Enter a value in this field only if you select Custom, Enter a hex code in the Icon Background Color field.
    5. Click Save.