Themes

How to use theme colors, logos, and wallpaper to reflect organizational branding.

You use themes to reflect the desired branding for your organization. Branding elements that are controlled by themes include:

  • Colors used in numerous elements in the UKG Pro Workforce Management user interface (UI), such as the main menu, navigation bar, buttons, icons, label text, and table headers.

  • The Home page background, which can be specified using a color, or as an imported image that is used as wallpaper.

  • A logo that is displayed on the navigation bar at the top of every page in the UKG Pro Workforce Management UI and on reports. You can use different logos for the UI and reports.

You can create new themes or customize existing themes. Only one theme is active at a time.

Note: Themes that you configure and activate in UKG Pro Workforce Management are used by both web and mobile applications. This includes any logos or wallpaper that you specify as part of the theme. See Work with Logos and Adding wallpaper to the Home page background for more information.

Standard Themes

Standard themes are the themes that are installed with UKG Pro Workforce Management. Standard themes are named:

  • Custom
  • Default
  • English Violet
  • Legacy Blue
  • Midnight

The Branding theme in previous releases has been renamed Custom. When you first log in to UKG Pro Workforce Management, the Custom theme is the active theme. The Custom theme shares the same settings as the Default theme, which is based on UKG Pro Workforce Management branding. If you made any changes to the Branding theme in a previous release, those changes are captured in the Custom theme during upgrade and are reflected in the UKG Pro Workforce Management UI. The Custom theme remains the active theme until you make another theme active. See Activate a Theme for more information.

The Custom theme is the only standard theme you can modify directly (that is, without first saving it with a new name). However, you can use it and any standard theme as the starting point for your own customizedtheme, with the logo, wallpaper, and colors you want. See Customize a Theme for more information.

Activate a Theme

Activating a theme is the process that makes a theme available to all system users. There is always one, and only one, active theme.

Note: Before activating a theme, consider previewing it. See Preview a Theme for more information.

To activate a theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme you want to make active.
  2. Click Tap the Activate button.

    The theme you select becomes active immediately. Note, however, that you might have to refresh your browser for the changes to become visible.

Create a Theme

To create a theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), click tap the Create button.

    The Create Themes page appears.
  2. In the Name field, enter the name for your new theme.
  3. In the Theme Colors section:
    1. In the Main Color field:
      • Optionally change the color. See Change Theme Colors for more information.
      • Select Display as Gradient if you want the color you select to be rendered as a gradient instead of as a solid color.
        Note: To see the effect this option has, expand the Generated Colors section and view the Background 1 color in the Navigation Bar Colors section.
    2. In the Accent Color field, optionally change the color. See Change Theme Colors for more information.
    Note: If you choose an accent color that does not comply with Web Content Accessibility Guidelines (WCAG) contrast ratio standards, the system displays a message recommending an accent color of the same hue to ensure accessibility.

    The system uses the main and accent colors you choose to generate complimentary colors for other elements in the UI like menus, buttons, text, and icons. These colors are displayed in Generated Colors.
  4. Expand Generated Colors to review the colors derived from the main and accent colors you chose.
  5. To change anything other than the main and accent colors, you must first save the new theme and then edit it. See Edit a Theme for more information.
    System generated colors comply with WCAG contrast ratio standards to ensure accessibility. Carefully consider any color changes you make.

Customize a Theme

The procedure for customizing a theme varies based on whether you are using a standard theme or another customized theme as your starting point.

Start with a standard theme

If you are starting with a standard theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the standard theme you want to use as the source for your customized theme.
  2. Click Tap the Edit button.
    Note: You cannot edit the theme settings on the Save as New page, but you can scroll through the page to get a sense colors that are currently configured.

    After you save the theme, use preview to see how the colors are displayed in the UI. See Preview a Theme for more information.
  3. On the Save as New page:
    1. In the Name field, enter a name for your customized theme.

      The Save as a new named entity radio button is selected by default.

    2. Click Tap the Save button.

      The Themes page appears; the newly created customized theme is displayed in the table. Themes are sorted alphabetically.
  4. Select your customized theme and click the Edit button.
  5. Customize the settings as desired. See Edit a Theme for more information.

Start with a customized theme

If you are starting with another customized theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the customized theme you want to use as the source for your customized theme.
  2. Click Tap the Edit button.
    Note: You cannot edit the theme settings on the Edit page, but you can scroll through the page to get a sense colors that are currently configured.

    After you save your changes, use preview to see how the colors are displayed in the UI. See Preview a Theme for more information.
  3. On the Edit page:
    1. Select the Save as a new named entity radio button.
    2. In the Name field, enter a name for your customized theme.
    3. Click Tap the Save button.

      The Themes page appears; the newly created customized theme is displayed in the table. Themes are sorted alphabetically.
  4. Customize the settings as desired. See Edit a Theme for more information.

Edit a Theme

You can edit only the Custom theme and any customized themes you have created. You cannot directly edit any other standard themes (Default, English Violet, Legacy Blue, or Midnight).

To edit a theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme you want to edit.
  2. Click Tap the Edit button.
  3. See these sections to learn about different ways to customize a theme:

Delete a Theme

You cannot delete the active theme or any standard themes.

To delete a theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme you want to delete.

    You can delete only one theme at a time.
  2. Click Tap the Delete button.
  3. Click Tap Yes on the Warning message to delete the theme; otherwise, Click Tap No.

    The system displays a success message at the top of the page.

Preview a Theme

You can preview existing themes, and you can preview themes you are in the process of creating. You cannot preview a theme you are editing until you save your changes. You might want to preview a theme:

  • To understand the look and feel of a theme you are considering modifying or using as the source for a customized theme.
  • To see how changes you are considering will be reflected in the UI.

Consider previewing a theme before making it active.

Using preview

You can preview an existing theme directly from the Branding page; you can also preview a theme while you are creating it. You cannot preview a theme while you are editing it.

What happens when you preview

When you preview a theme, your UKG Pro Workforce Management session enters a preview mode. A banner is displayed across the top of the Branding page that provides the name of the theme being previewed and instructions on refreshing your browser and exiting preview mode. This banner is displayed on any page to which you subsequently navigate (the Home page, for example).

The currently active theme remains in force while you are in preview mode. Changes associated with the preview theme are visible only in your session. Other users of the system are unaffected.

Some changes are immediately apparent, but you should always refresh your browser to ensure that all features associated with the preview theme (its logo and wallpaper, for example) are displayed.

How to preview an existing theme

To preview an existing theme:

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme you want to preview.
  2. Click Tap the Preview button.

    The Branding page displays colors associated with the theme you are previewing. Refresh the browser to ensure all features of the preview theme are displayed.
  3. Optionally, navigate to other pages in the system.
  4. To exit preview mode, navigate back to the Branding page (if necessary) and click tap the Exit Preview button.
  5. Refresh your browser to restore the active theme's settings in your session.

How to preview a theme while creating it

To preview a theme while you are creating it:

  1. On the Create Themes page ( Application Setup > Common Setup > Branding), click tap the Preview button.

    The Branding page displays the colors generated by the system based on the main and accent colors you selected. Refresh the browser to ensure all features of the preview theme are displayed.
  2. Optionally, navigate to other pages in the system.
  3. To exit preview mode, navigate back to the Create Themes page (if necessary) and click tap the Exit Preview button.
  4. Refresh your browser to restore the active theme's settings in your session.

Work with Logos

The system displays the logos you specify for a theme in two places:

  • In the navigation bar, where it is placed to the right of the Home button.
  • In reports. By default, the system uses the logo specified in the active theme for reports. If you wish, you can designate that the logo specified in a different theme be used for all reports, even if that theme is not active.

Adding a logo to a theme

Note: When you upload a logo, the change to the theme is saved automatically.
  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme to which you want to add a logo.
  2. Click Tap the Edit button.
  3. Navigate to the Logo section.
  4. Click Tap the Choose File button, and select the file you want to use.
  5. If you change your mind, click tap the Reset button; otherwise, click tap the Upload button.

    A status bar indicates when the upload operation is complete.
  6. Optionally, select the Use this logo for all reports regardless of the active theme. Once selected, UKG Pro Workforce Management uses this logo for all reports, even if the theme in which it is specified is not active.
  7. Click Tap the Save button. (Save is enabled only if you select Use this logo for all reports regardless of the active theme.)

Copying logos

You can copy the logo from any theme to one or more customized themes. Copying logos replaces the logos on the themes you select.

Note: If the theme to which you are copying the logo has a reports logo specified for it, the reports logo will be overwritten, regardless of whether or not the theme is active. You cannot copy a logo to a standard theme.
  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme whose logo you want to copy to other themes.
  2. Click Tap the Copy Logo button.
  3. In the Copy Logo slider, select the themes to which you want to copy the logo. Use Select All to select all customized themes with one click tap . The system displays a note when a theme's report logo will be overwritten.
  4. Review the list of themes, and clear the check box if you do not want that theme's logo replaced.
  5. Click Tap the Apply button.

    The Themes page is refreshed and a success banner appears at the top of the page.

Specify the Home Page Background

About color and wallpaper

By default, UKG Pro WFMuses a color for the Home page background. If you choose, you can use an image as the Home page wallpaper. When wallpaper is displayed, no color is visible on the Home page background.

Choosing the right image for wallpaper

When choosing an image for wallpaper, keep these considerations in mind:

  • Files must be in GIF, JPG, or PNG format.
  • For best results, files should not exceed these dimensions:

    Platform

    Width (pixels)

    Height (pixels)

    Size (MB)

    Web application

    1280

    540

    1

    Mobile

    320

    800

    1

    The web application is optimized for a resolution of 1280 x 720 pixels. The recommended maximum height of 540 pixels accommodates the space occupied by the application's header. Images that exceed height and width recommendations are scaled to fit an aspect ratio of 2.37, which might result in distortion that can occur if the image is stretched or compressed to meet this requirement. Similarly, mobile applications are optimized for a resolution of 320 x 800 pixels. Consider using abstract images to reduce the impact of cropping or image distortion that results from image resizing.

    Images that exceed 1 MB in size are not uploaded.

    Note: Consider the majority of your user base (web or mobile) and ensure that the wallpaper you choose meets the suggested guidelines. The application will perform the resizing needed on the image you provide to provide the best experience for both web and mobile users.

Changing the color of the Home page background

    1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme whose Home page you want to modify.
    2. Click Tap the Edit button.
    3. Navigate to the Home Page Background section.
    4. Choose the color you want for the Home page background. See Change Theme Colors for more information.
    5. In Background type to use, select Color.
    6. Click Tap Save.
  2. Adding wallpaper to the Home page background
    Note: When you upload wallpaper, the change to the theme is saved automatically.
    1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme whose Home page you want to modify.
    2. Click Tap the Edit button.
    3. Navigate to the Home Page Background section.
    4. Click Tap the Choose File button, and select the file you want to use.
    5. If you change your mind, click tap the Reset button; otherwise, click tap the Upload button.

      A status bar indicates when the upload operation is complete.

    6. In Background type to use, select Wallpaper.
    7. Click Tap Save.

Change Theme Colors

Caution: System generated colors comply with WCAG contrast ratio standards to ensure accessibility. Carefully consider any color changes you make.

Changing a color

  1. On the Themes page ( Application Setup > Common Setup > Branding), select the theme whose colors you want to change.
  2. Click Tap the Edit button.
  3. Locate the theme element whose colors you want to change. (These theme elements and their default colors are described following this procedure.)
  4. Click Tap the rectangle that displays the current color.
  5. Use your browser's color picker to select the color you want, or manually enter the desired color code values. Use the selector button to change the color code type (HEX, RGB, or HSL).
  6. Click Tap the Save button when you are done.

Elements you can change

You can change colors for these elements on the Edit Theme page:

Note: In the following sections, HEX values are used to describe colors. Colors can be specified using HEX, RGB, or HSL code values, or selected using a color picker. The style of color picker varies based on your browser.

Main Menu

Colors

The main menu is the panel that displays along the left side of the window and is used to navigate to various product components.

  • Background— The background color of the main menu. The default color is white (#FFFFFF).
  • Text— The color of the main menu entries. The default color is a dark gray (#2A2C2F).
  • Text Background Hover— The color of a menu entry when your mouse hovers over it. The default color is light gray (#F4F4F4).
  • Text Background Selected— The color of a menu entry when you select it. The default color is medium gray (#F3F4F5).

Navigation Bar

Colors

The navigation bar appears across the top of all pages. It displays the page title, and can contain a number of icons such as Main Menu , Home Page , Help , Search , and Notifications . You can optionally include a logo in the navigation bar.

  • Background 1— The background color of the navigation bar. The default color is a dark teal (#087c79).
  • Background 2— The color used to create a gradient in combination with Background Color 1. The default color is a darker teal (#005151) than that used for Background Color 1.
    Note: To create a gradient effect in the navigation bar, the system uses the colors specified in Background 1 and Background 2. Background 1 provides the color of the center of the navigation bar; Background 2 provides the color for the left and right edges.

    If you want your navigation bar to be rendered as a solid color, use the same color code for both background color fields.

  • Header Text— The color of the text used in the navigation bar. The default color is white (#FFFFFF).
  • Icons— The color of icons displayed in the navigation bar. The default color is white (#FFFFFF).
  • Icons Hover— The color of an icon when your mouse hovers over it. The default color is light gray (#B4B8BC).
  • Icons Selected— The color of an icon after you select it. The default color is light gray (#B4B8BC).
  • Icons Disabled— The color of disabled icons. The default color is light teal (#385F63).
  • Notifications Count— The color of the number of notifications available as displayed on the left side of the Notifications icon. The default color is dark orange (#C5430F).

Page Elements

Colors

Specifies colors you want the system to use for buttons, icons, hover text, labels, text, and more.

  • Buttons and Icons Enabled— The color used for enabled buttons and icons. The default color is a medium blue (#0176B2).
  • Buttons and Icons Hover— The color displayed when the mouse pointer hovers over a button or icon. The default color is a dark blue (#005C89).
  • Buttons and Icons Active— The color used for an active (selected) button or icon. The default color is a dark blue (#004E73).
  • Labels— The color of labels displayed on a page. The default color is a dark gray (#707064).
  • Disabled (Text and Field Background)— The color of disabled labels, text, and field background. The default color is light gray (#B7B7B7).
  • Text— The color of page text. The default color is light black (#2C2C2C).
  • Text Accent— The color used for the background of important or critical indicators and icons. One use is for the shading of the current day on the calendars and schedules. The default color is light magenta (#C423AE).
  • Background— The color of the page background. By default, the color is white (#FFFFFF).
  • Fields Stroke— The color used for most basic form elements like dropdowns, text fields, and the date picker. The default color is a medium gray (#898989).

Table Header

Colors

Specifies colors you want the system to use for table header background and text, and more.

  • Background— The color used the background in table headers. The default color is white (#FFFFFF).
  • Hover Background— The color displayed when the mouse pointer hovers over the table header. The default color is a light gray (#F4F4F4).
  • Active Background— The color used for the active table. The default color is a light gray(#EFEFEF).
  • Disabled Background— The header color for disabled tables. By default the color is a dark gray (#B7B7B7).
  • Text— The color of table header text. The default color is light black (#2C2C2C).
  • Text Accent— The color used for the background of important or critical indicators and icons. One use is for the shading of the current day on the calendars and schedules. The default color is light magenta (#C423AE).

Messaging Elements

Colors

Specifies the background and indicator colors you want the system to use for information, success, error, warning, and system messages.

  • Information Background— The color used for the background in information messages. The default color is light blue (#F4F6FF).
  • Information Indicator Enabled— The color used for an enabled information indicator. The default color is a dark blue (#3D5DFF).
  • Success Background— The color used for the background in success messages. The default color is a light green (#EDF6F4).
  • Success Indicator Enabled— The color used for an enabled success message indicator. By default the color is a dark green (#008060).
  • Error Background— The color used for the background in error messages. The default color is a light pink (#FDF2F3).
  • Error Indicator Enabled— The color used for an enabled error message indicator. By default the color is a dark red (#DC0C22).
  • Warning Background— The color used for the background in warning messages. The default color is a light tan (#FCF6ED).
  • Warning Indicator Enabled— The color used for an enabled warning message indicator. By default the color is light brown (#A35C00).
  • System Background— The color used for the background in system messages. By default the color is a light purple (#F8F2FD).
  • System Indicator Enabled— The color used for an enabled system message indicator. By default the color is a bright purple (#9C41DD).
  • Neutral Background— The color used for the background in neutral messages. By default the color is a light gray (#F4F4F4).
  • Neutral Indicator Enabled— The color used for an enabled neutral indicator. By default the color is a dark gray (#707070).

Timecard Elements

Colors

Specifies the background and indicator colors you want the system to use for employee and manager approvals and sign-offs.

  • Employee Approval Background— The color used for the background in employee-approved timecard entries. The default color is a light tan (#FFF3DE).
  • Employee Approval Indicator— The color used for indicators in employee-approved timecard entries. The default color is a light brown (#9A6400).
  • Manager Approval Background— The color used for the background in manager-approved timecard entries. The default color is a light purple (#F8F2FD).
  • Manager Approval Indicator— The color used for indicators in manager-approved timecard entries. By default the color is a dark purple (#9C41DD).
  • Manager and Employee Approval Background— The color used for the background in timecard entries approved by both the manager and employee. The default color is a light green (#DDFBEA).
  • Manager and Employee Approval Indicator Color— The color used for indicators in timecard entries approved by both the manager and employee. By default the color is a dark green (#0F813F).
  • Sign-Off Background— The color used for the background in signed-off timecard entries. The default color is a light gray(#F4F4F4).
  • Sign-Off Indicator— The color used for indicators in signed-off timecard entries. By default the color is a dark gray (#6F6F6F).