5Themes

This chapter contains the following:

You can configure the look and feel of your application using the Themes page of the Appearance work area. By default, you get the Default theme for your application, which includes news feed as the default layout for your home page. The Themes list on the Themes page has a set of predefined themes:

  • Default

  • Redwood

  • A few other themes, which we refer to as the predefined classic themes

Just like Default, the Redwood theme has news feed as the default home page layout. And the other settings for the Redwood theme, such as logo and cover image match with those for the Default theme. The predefined classic themes have panel, banner, or news feed as the default layout for the home page.

You can create your own theme based on a predefined theme and save it. Such themes are available as saved themes in your Themes list. We are calling the saved themes that are based on predefined classic themes, as the saved classic themes.

You can change your application theme from Default to a saved theme, or any of the predefined themes. For a saved theme that's based on Default or Redwood, you can change only the logo, cover image, or both. But if you switch to any predefined or saved classic theme, you can set the default layout for your home page as panel, banner, or news feed, and configure the various look and feel aspects of your application. Here are a few settings you can change for classic themes:

  • Logo

  • Background image

  • Panel image and style

  • Size and style of the work area icons

  • Style of the cards, which appear on a page in a grid view

  • Shape of buttons, menus, and tabs

  • Colors for the background, global region, headings, page links, and buttons

Note: Your theme changes don't apply to the Sign In page of your application.

Use the Themes page of the Appearance work area (Navigator > Configuration > Appearance) to manage your themes. You can edit saved themes, apply themes to your application pages, and delete saved themes. But you can't edit or delete any predefined themes.

Note: You must first activate a sandbox that has the Appearance tool in it.

Apply Themes

From the Themes list, select a theme, and click Apply.

Note: If you select a predefined theme, then save it as a new theme, and then edit and apply the theme, as required.

Apply the Default Theme

On the Actions menu, select Apply Default. The Default theme is applied to your application.

Edit Themes

  1. From the Themes list, select a theme that you want to edit.

  2. Configure the appearance settings for your application, as required.

  3. Click Apply.

  4. Do either of these tasks based on the theme you selected:

    • If you have selected a predefined theme, then enter a theme name, and click OK to create another theme with your modifications. This new theme is then applied to your application.

    • If you have selected a saved theme, then your theme changes are directly applied to your application.

Delete Themes

From the Themes list, select a saved theme that you want to delete, and then on the Actions menu, select Delete.

Use the Themes page of the Appearance work area to configure themes based on the Default or Redwood theme. You can change the logo, cover image, or both, and save it as your own theme. The cover image displays in the background of the Things to Finish section of your home page.

  1. Activate a sandbox that has the Appearance tool in it.

  2. Click Navigator > Configuration > Appearance.

  3. From the Themes list, select Default or Redwood. If available, you can choose to select a saved theme that's based on Default or Redwood.

  4. In the Logo and Cover Image fields, select the type of location where the images are stored, and do any of these tasks based on what you select:

    • File: Browse and select a file from your computer.

    • Predefined: Select a file from the list of predefined images.

    • URL: Enter a full URL for the logo.

    • None: You don't need to do anything.

    Here are a few best practices for configuring the logo and cover image:

    • Make sure that the file names for your images don't have any spaces in them.

    • Use a logo of width lesser than 200 px and height lesser than 50 px.

    • Upload a monochrome version of your logo that's optimized for a dark background. The logo also needs to be on a transparent background. The Redwood theme is optimized for a monochrome version of your organization logo to maximize readability and accessibility, and to minimize unintentional color blending.

    • Use a cover image of size 2600x290 px.

    • After you upload a cover image, its colors are processed, and a Redwood color overlay is applied on the processed image. So your cover image will look slightly different from the original image you uploaded. The coloring process maximizes readability and accessibility, and minimizes unintentional color blending.

  5. On the Actions menu, click Save As.

  6. Enter a theme name.

    Note: You must enter a unique name that doesn't match with the name of any existing theme in your application.
  7. If you don't want to apply the theme to the application immediately, deselect the Apply this theme check box.

  8. Click OK. If you have selected the Apply this theme check box, then your theme is saved and set as the current theme. If you haven't selected the check box, your theme isn't applied to the application. But the theme is saved, and you can apply it to your application later.

You can select any predefined or saved classic theme as your base theme from your themes list, change the various appearance settings of the theme, and save it as your own classic theme.

  1. Activate a sandbox that has the Appearance tool in it.

  2. Click Navigator > Configuration > Appearance.

  3. From the Themes list, select any classic theme, for example, Sky Blue.

  4. From the Default Home Page Layout list, select Panel, Banner, or News feed.

    • The home page with news feed layout mainly contains the Apps section with work area icons arranged in tabs, and a few other sections for things to finish, announcements, and analytics.

    • The home page with panel or banner layout mainly contains the page control to navigate to the infolets, the work area icons (standalone or in groups), and the panel or banner displaying information, such as company announcements.

  5. Configure the various appearance settings for your application, as required. For example, select a logo and specify the various color schemes.

  6. On the Actions menu, select Save As.

  7. Enter a theme name.

    Note: You must enter a unique name that doesn't match with the name of any existing theme in your application.
  8. If you don't want to apply the theme to the application immediately, deselect the Apply this theme check box.

  9. Click OK. If you have selected the Apply this theme check box, then your theme is saved and set as the current theme. If you haven't selected the check box, your theme isn't applied to the application. But the theme is saved, and you can apply it to your application later.

Let's take a look at the various appearance settings that you can configure for your application while creating and editing classic themes.

Note: The images you use for your application must not have any spaces in their file names.

General Settings

Setting Description Values

Default Home Layout

The default layout of the home page.

  • Panel

  • Banner

  • News feed

Based on your selected layout, the look and feel of the home page changes.

  • If you select news feed layout, your home page mainly contains the Apps section with work area icons arranged in tabs, and a few other sections for things to finish, announcements, and analytics.

  • If you select panel or banner layout, your home page mainly contains the page control to navigate to the infolets, the work area icons (standalone or in groups), and the panel or banner displaying information, such as company announcements.

Logo

The type of location where your logo for the global header is stored. You can browse and select your logo from that location.

  • File

  • Predefined

  • URL

Configure bookmark icon for desktop

Selecting this check box displays the Desktop Icon list for you to choose a bookmark icon for your desktop.

  • Checked

  • Unchecked

Desktop Icon

The bookmark icon that appears on your desktop.

This list is available only if you selected the Configure bookmark icon for desktop check box.

  • URL

  • File

Configure shortcut icon for mobile

Selecting this check box displays the Mobile Icon list for you to choose a shortcut icon for your mobile device.

  • Checked

  • Unchecked

Mobile Icon

The shortcut icon that appears on your mobile device.

This list is available only if you selected the Configure shortcut icon for mobile check box.

  • URL

  • File

Background Image

The type of location where your background image of all application pages is stored.

You can browse and select the image from that location.

  • None

  • File

  • Predefined

  • URL

Repeat Image

Selecting this check box repeats the specified background image to display it both vertically and horizontally in the background of all application pages.

  • Checked

  • Unchecked

Background Image Position

The position of the background image for all application pages.

  • Center

  • Start

Global Region

The background color of the global header, which is the uppermost region in the UI.

Color palette

Global Region Background Color

The background color of the global header, which is the uppermost region in the UI.

Color palette

Global Text and Icon Color

The color of the text that appear in general and with icons in the global header. This excludes the company logo.

Color palette

Enable color gradient

Selecting this check box enables color gradient for global text and icons. This excludes the company logo.

  • Checked

  • Unchecked

Gradient Type

The gradient type for global text and icon colors. This excludes the company logo.

This field is available only if you enabled color gradient.

  • Top to bottom

  • Left to right

  • Top left to bottom right

  • Top right to bottom left

Start Color and End Color

The start and end colors of the gradient for global text and icon colors.

This field is available only if you enabled color gradient.

Color palette

Cover Image

The type of location where your cover image, which displays in the background of the home page panel or banner, is stored. You can browse and select the image from that location.

  • None

  • File

  • Predefined

  • URL

Based on the home page layout, this image appears at different locations on the home page.

  • Panel layout: This image appears on the main panel. The recommended image size is 344x622 px.

  • Banner layout: This image appears on the banner. The recommended image size is 2600x290 px.

  • News feed layout: This image appears in the Things to Finish section. The recommended image size is 2600x290 px.

Panel Style

Specifies the style for the main panel or banner on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

  • Light: Overlays a portion of the home page panel or banner with a semi-transparent white layer and makes the text on top of it black.

  • Dark: Overlays a portion of the home page panel or banner with a semi-transparent black layer and makes the text on top of it white.

Navigation Icons

Setting Description Values

Icon Type

The type of navigation icons on the home page.

  • Solid

  • Outlined

Size

The size of the navigation icons on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

  • Extra large: Sets the size of the icons to 96px.

  • Large: Sets the size of the icons to 72px.

  • Medium: Sets the size of the icons to 64px.

  • Small: Sets the size of the icons to 48px.

Image Color

The image color of the navigation icon on the home page.

This field is available only if you selected the default home page layout as Panel or Banner.

Color palette

Group Indicator Icon

The color of the three dots that appear on certain icons on the home page to indicate that these icons are group icons.

Color palette

Label Color

The color of the label text of the navigation icons.

Color palette

Background Shape

The shape that displays behind the navigation icons.

  • None

  • Circle

  • Square

  • Rounded square

  • Transparent square

The Transparent square option is available only if you selected the default home page layout as News Feed.

Background Card Color

The background color of the navigation icons on the News Feed home page.

This field is available only if you selected:

  • The default home page layout as News Feed.

  • The background shape for navigation icons as Transparent square.

  • Light

  • Dark

Background Card Opacity

The background opacity of the navigation icons on the News Feed home page.

This field is available only if you selected:

  • The default home page layout as News Feed.

  • The background shape for navigation icons as Transparent square.

Any value between 1 and 99

Background Color

The color of the shape that displays behind the navigation icons.

This field isn't displayed if you have selected None or Transparent square as the background shape for the navigation icons.

Color palette

Page Settings

Setting Description Values

Heading color

The text color of the headers and subheaders of application pages.

Color palette

Link Color

The color of the links that appear on the application pages.

Color palette

Selection Color

The color of the highlighted or selected UI element on all work areas related to employees, for example Personal Information, Benefits, and Absences. These UI elements are boxes, and each box represents an option, for example a specific part of your personal profile to update. This color applies to the border of the box and the selected check box (if any) inside the box.

Color palette

Highlight Color

The color used to highlight application items that need attention. For example, the part of the Notifications icon on the global header that displays the number of new notifications in your list.

Color palette

Card Style

The style of cards displayed on the application pages having a grid view.

  • Dark: Displays the cards with a white or light grey background color and dark text.

  • Light: Displays the cards with a dark grey background color and light text.

Landing Page Icons for Employees

The icon color of the landing pages for all work areas related to employees, for example Personal Information, Benefits, and Absences.

Color palette

Button Settings

Setting Description Values

Label

The color of the label text of the buttons on all application pages.

Color palette

Border

The color of the button borders on all application pages.

Color palette

Enable color gradient

Selecting this check box enables color gradient for buttons on all application pages.

This check box is available only if you selected the default home page layout as Panel or Banner.

  • Checked

  • Unchecked

Start Color and End Color

The start and end colors of the gradient for buttons on all application pages.

This field is available only if you enabled color gradient.

Color palette

Background

The background color for buttons on all application pages.

This field isn't available if you enable color gradient for buttons.

Color palette

Corner Rounding

The extent to which the corners of the buttons on all application pages are rounded.

  • None: Removes corner rounding from all buttons, which means applies a rectangular shape to all buttons.

  • Small: Applies a very small curve to the corners of all buttons.

  • Medium: Applies a moderate curve to the corners of all buttons.

  • Large: Applies a large curve to the corners of all buttons, thereby making a pill shape.

Use this example to configure the logo and the color schemes of an application that has a classic theme applied to it. You see the logo in the global header.

Note: Changes made to the logo using Page Composer overwrite the changes done using the Appearance work area.

This table summarizes the key decisions for this scenario.

Decisions to Consider In This Example

What's the name of the new theme?

MyCompany

Which existing theme are you going to base this theme on?

Default

Which default home page layout are you going to use?

Banner

Which image are you going to use as the new logo?

MyCompany.png

Tip: You can use a logo of any size, but the recommended width is lesser than 200 px and height is lesser than 50 px.

Which image are you going to use as your application's bookmark icon for desktop?

MyDesktopIcon.png

Tip: For best results, use a square-shaped icon with each side measuring lesser than 16 px.

Which image are you going to use as your application's shortcut icon for mobile devices?

MyMobileIcon.png

Tip: For best results, use a square-shaped icon with each side measuring more than 57 px and lesser than 144 px.

Which background image are you going to use?

WatermarkOracle.png

Tip: For best results, use an image size that's as close to 1024 by 768 pixels as possible.

Change the Logo and Color Schemes

Use the Themes page to specify the look and feel aspects of the various UI elements, such as navigation icons and buttons. The fields available for you to change these appearance settings may vary based on what you select for some fields. For example, if you have News feed as the default home page layout, you won't find the Group Indicator Color field for selection because this field isn't applicable for the news feed home page layout.

Here's how you change the logo and color schemes.
  1. Activate a sandbox that has the Appearance tool in it.

  2. Click Navigator > Configuration > Appearance.

  3. From the Themes list, select Sky Blue.

  4. From the Default Home Page Layout list, select Banner.

    Note: The home page with a banner layout mainly contains the page control to navigate to the infolets, the work area icons (standalone or in groups), and the banner displaying information, such as company announcements.

  5. From the Logo list, select File as the type of location where your logo is stored. Browse and select MyCompany.png.

  6. Select the Configure bookmark icon for desktop check box, and from the Desktop Icon list, select File. Browse and select MyDesktopIcon.png.

  7. Select the Configure shortcut icon for mobile check box, and from the Mobile Icon list, select File. Browse and select MyMobileIcon.png.

  8. From the Background Image list, select File as the type of location where your background image is stored. Browse and select WatermarkOracle.png.

  9. To specify the general appearance of the application, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Global Region Background Color

    A9A9A9 (Dark Gray)

    This field specifies the background color of the global header, which is the uppermost region in the UI.

    Global Text and Icon Color

    4169E1 (Royal Blue)

    This field specifies the color of the text that appear in general and with icons in the global header.

    Enable color gradient

    Select the check box, specify the gradient type as Top to bottom, and start and end colors of the gradient as follows:

    • Start Color: 00BFFF (Deep Sky Blue)

    • End Color: 4169E1 (Royal Blue)

    Cover Image

    Select File as the type of location where your cover image is stored. Browse and select MyCover.png. This image will appear on the banner.

    For the home page with the banner layout, the recommended image size if 2600x290 px.

    Panel Style

    Light

    This field specifies the style of the main panel on the home page.

  10. To specify the appearance of the navigation icons, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Icon Type

    Solid

    Size

    Small

    Image Color

    Multicolor

    Group Indicator Color

    D02090 (Violet Red)

    This field specifies the color of the three dots that appear on certain icons on the springboard to indicate that these icons are group icons.

    Label Color

    000000 (Black)

    This field specifies the color of the label text of the navigation icons.

    Background Shape

    Circle

    Background Color

    Multicolor

    This field isn't displayed if you have selected None as the background shape.

  11. To specify the appearance of the application pages, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Heading Color

    8B008B (Dark Magenta)

    This field specifies the color of the header text on the application pages.

    Link Color

    0000FF (Blue)

    This field specifies the color of the links that appear on the application pages.

    Selection Color

    FFB6C1 (Light Pink)

    This field specifies the color of a selected or highlighted UI element on a page.

    Highlight Color

    FFB6C1 (Yellow)

    Card Style

    Light

    This field specifies the style of cards displayed on application pages having a grid view.

    Landing Page Icons for Employees

    Blue

    This field specifies the icon color of the landing pages for all work areas related to employees, for example Personal Information, Benefits, and Absences.

  12. To specify the appearance of the buttons, enter the values as shown in this table, or select the colors from the color palette.

    Field Value

    Label

    000000 (Black)

    This field specifies the color of the label text of the buttons.

    Border

    000000 (Black)

    This field specifies the color of the button borders.

    Enable color gradient

    Select the check box and specify the start and end colors of the gradient as follows:

    • Start Color: 4169E1 (Royal Blue)

    • End Color: 00BFFF (Deep sky Blue)

    Corner Rounding

    Small

    This field specifies the extent to which the button corners are rounded. For example, None indicates that the button corners aren't rounded and Small indicates that the button corners are slightly rounded.

  13. On the Actions menu, select Save As, and enter the theme name as MyCompany.

  14. Make sure that the Apply this theme check box is selected.

  15. Click OK.

FAQs for Themes

What happens to my theme if changes that affect themes are made using Page Composer?

Application changes made using Page Composer overwrite the changes made using the Appearance work area.

Caution: Before using the Appearance work area to change the look of your application, you must undo any changes affecting the theme done using Page Composer. Otherwise, the changes that you make using the Appearance work area may not show up in your application as you wanted.