5Theme Management

This chapter contains the following:

Use the Appearance work area to configure the general look and feel of your application, and the default layout and display settings of the home page. To open this work area, on the Navigator, select Configuration > Appearance. The Appearance work area has 2 tabs: Themes and Home Page Layout. Use the Themes page to configure the default home page layout, and to change the branding logo, background colors, icon styles, and so on. You can apply an existing theme to your application pages, or create your own theme and apply it. Use the Home Page Layout page to configure the display settings of the home page.

Themes and Default Home Page Layout

Use the Themes page of the Appearance work area to:

  • Set the default home page layout as Panel, Banner, or News Feed. The home page with the:

    • Panel or banner layout contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout.

    • News feed layout mainly contains the Apps section and a series of updates with important information.

  • Create and edit saved themes, which means themes that aren't predefined. For example, you can change the following look and feel aspects of your application pages:

    • Logo

    • Background image

    • Panel image and style

    • Size and style of the icons on the springboard

    • Style of the cards, which appear on a page in a grid view. These cards display a summary of a single record, with attributes on the front side and optional back side. You can specify whether all cards should display with a dark-colored or a light-colored finish for users.

    • Shape of buttons, menus, and tabs

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

Tip: While making changes on the Themes page, you can click Apply any time to preview your changes.

Display Settings of the Home Page

Use the Home Page Layout page of the Appearance work area to configure the display settings of the home page.

  • For panel and banner layouts, you can specify the default content to be displayed on the home page panel and banner, and the display photo on the main panel of the home page.

  • For the news feed layout, you can rename the home page sections, show or hide them, and reorder them.

Use the Themes tab of the Appearance work area to create themes.

Before You Start

Activate a sandbox.

Create Themes

Follow these steps:

  1. On the Navigator, select Configuration > Appearance.

  2. From the Themes list, select your base theme.

  3. From the Default Home Page Layout list, select Panel, Banner, or News Feed.

    • Panel or banner layout contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout.

    • News feed layout mainly contains the Apps section with icons to open work areas and a series of updates with important information.

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

  5. On the Actions menu, select Save As.

  6. Enter a theme name.

  7. Optionally, deselect Apply this theme if you don't want to apply the theme to the application immediately.

  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. However, the theme is saved, and you can apply it to your application later.

Use the Themes page to manage your themes. To open the Themes page, on the Navigator, select Configuration > Appearance.

You can edit saved themes, apply themes to your application pages, and delete saved themes. You can't edit or delete predefined themes.

Before You Start

Activate a sandbox.

Apply Themes

From the Themes list, select a theme, and click Apply. If the selected theme is a predefined one, 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

Follow these steps:

  1. On the Navigator, select Configuration > Appearance.

  2. From the Themes list, select your base theme.

  3. Set the default layout of the home page, and configure the various appearance settings for your application, as required. For example, select a branding logo and specify color schemes.

  4. Click Apply. If the base theme you have selected is 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.

    • 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.

Change the Logo and Background Image

Use the Themes page to define the:

  • Branding logo, which appears above all application pages. You can use a logo of any size, but the recommended width is lesser than 200 px and height is lesser than 50 px.

  • Watermark, which appears in the background of all application pages. Use an image that's as close to 1024 by 768 pixels as possible.

To select a logo and a background image, use one of the options:

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

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

  • URL: Enter a full URL for the logo or the watermark.

You configure the various appearance settings for your application using the Themes tab of the Appearance work area.

These tables summarize the appearance settings that you can configure while creating and editing your themes and their default values.

General Settings

Setting Description Values Default Value

Default Home Layout

The default layout of the home page.

  • Panel

  • Banner

  • News Feed

When you select a Panel or Banner layout, the home page contains a springboard with icons that you can use to open work areas. Whereas, when you select the News feed layout, your home page mainly contains the Apps section and a series of updates with important information.

Panel

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

Predefined

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

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

URL

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

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

URL

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

Predefined

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

Unchecked

Background Image Position

The position of the background image for all application pages.

  • Center

  • Start

Center

Global Region

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

Color palette

Transparent

Global Region Background Color

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

Color palette

Transparent

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

2E444C

Enable color gradient

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

  • Checked

  • Unchecked

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

Left to right

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

8CD3FF

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

Predefined

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.

Light

Navigation Icons

Setting Description Values Default Value

Icon Type

The type of navigation icons on the home page.

  • Solid

  • Outlined

Solid

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.

Extra large

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

2E444C

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

FFFFFF

Label Color

The color of the label text of the navigation icons.

Color palette

2E444C

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.

Circle

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

Light

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

10

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

Multicolor

Page Settings

Setting Description Values Default Value

Heading color

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

Color palette

333333

Link Color

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

Color palette

0A6DAA

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

047BC4

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

C74200

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.

Dark

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

309FDB

Button Settings

Setting Description Values Default Value

Label

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

Color palette

000000

Border

The color of the button borders on all application pages.

Color palette

C4CED7

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

Checked

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

  • Start Color: F1F3F3

  • End Color: E4E8EA

Background

The background color for buttons on all application pages.

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

Color palette

F1F3F3

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.

Small

This example demonstrates how to change a logo and the color schemes of an application using the Themes tab of the Appearance work area. Users 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.

The following 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.

Before You Start

Activate a sandbox.

Change the Logo and Color Schemes

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

Follow these steps:
  1. On the Navigator, select Configuration > Appearance. On the Appearance work area, click the Themes tab.

  2. From the Themes list, select Default.

  3. Select the default home layout as Banner.

    Note: When you select a Panel or Banner layout, the home page contains a springboard with icons that you can use to open work areas. Also, based on setup, the home page shows either company announcements or social networking conversations. This information appears in a panel for the panel layout, and in a banner for the banner layout. When you select the News feed layout, your home page mainly contains the Apps section and a series of updates with important information.

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

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

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

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

  8. 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 user interface.

    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.

    For the home page with the:

    • 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

    Light

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

  9. 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.

  10. 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.

  11. 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.

    Tip: While making changes on the Themes page, you can click Apply any time to preview your changes.

  12. On the Actions menu, select Save As.

  13. Enter the theme name as MyCompany.

  14. Make sure that Apply this theme is selected.

  15. Click OK.

FAQs for Theme Management

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.