Creating a custom theme for your corporate brand

In Control Desk Service Portal, administrators can customize the Self Service Center user interface to reflect a corporate brand.

About this task

To make the Self Service Center in the Service Portal user interface reflect your corporate brand, you can modify the cascading style sheet (CSS) to customize background images and colors, and you can change text to match your company's preferences.

In the Self Service Theme Management window, the Current Theme field displays the theme that is currently applied. Additional theme options that are available and any custom themes that you create are displayed in the My Themes list.

As you make changes, your updates are displayed in the left pane of the Customizing Self Service Center page. As you work, you can clear the fields to revert to the default colors or text.

To customize the user interface, log in to Service Portal as an administrator and complete the following steps.

Procedure

  1. From the settings menu settings image, select Customize Theme. The Self Service Theme Management page opens in a new browser tab.
  2. To add a new theme, specify a name for the theme and click new theme.
  3. Select from the following options to create a custom theme:
    Option Description
    General Select this option to customize the following CSS elements and strings of the Self Service Center page:
    • Style
      • Product name: text color and font size
      • Header logo: image, image height, image width, and image position
      • Header banner: height and background color
      • Menu options on the navigation bar: background color and text color
      • Selected menu: background color and text color
      • Page: background color, background image, CSS options for image position, scale, and repeat properties
      • Page: text color
    • Labels
      • Product name
      • Menu options on the navigation bar
    Login Select this option to customize the following CSS elements and text strings of the Login page:
    • Style
      • Position of the login module on the page
      • Login header: text color and text size
      • Login page text color
      • Sign In button: background color and text color
    • Labels
      • Login header text
      • Login introduction text
      • Text on the Sign In button
    Home Select this option to customize the following CSS elements and text strings of the Home page:
    • Style
      • Search box: color of the border
      • Report issue: background color and text color
      • My tickets: background color and text color
      • Request service: background color and text color
      • Chat icon background color
      • Home section: header text color and border color
      • Home section list item: title text color, body text color, and status text color
      • Home navigation tabs: border color and text color
      • Home active navigation tab: text color and background color
      • View all links text color
    • Labels
      • Search box placeholder text
      • Report issue: title text and detail text
      • My tickets: title text and detail text
      • Request service: title text and detail text
      • Chat icon background color
    My tickets Select this option to customize the following CSS elements and text strings of the My tickets page:
    • Style
      • Table header: background color and text color
    • Labels
      • Text for the table header of the My tickets list
    Request service Select this option to customize the following CSS elements and text strings of the Request service page:
    • Style
      • Catalog search bar border color
      • Catalog header text color
      • Catalog container: background color and opacity
    • Labels
      • Search box placeholder text
      • Catalog title text
    Advanced Select this option to specify a replacement value for an existing translation key that you want to replace.
    Note: Use this option only if you have a good understanding of text string features in the product code and the ability to locate text strings in the code.
    Options that you select are displayed in a preview pane on the left side of the Customizing Self Service Center page.
  4. When your customization is complete, click Save.
  5. To return to the Self Service Theme Management window, click Exit.
  6. To apply the theme that you created to the user interface, click Set as current theme. The changes are applied to the Self Service Center user interface.
Parent topic: Customizing the Control Desk Service Portal user interface

Feedback