PUBLIC

Document Version: 1H 2021 – 2021-08-06

Theme Manager
© 2021 SAP SE or an SAP affiliate company. All rights reserved.

THE BEST RUN

Change History

Learn about changes to the documentation for Theme Manager in recent releases.

1H 2021

Type of Change Description More Info

Changed We updated information about theme Theme Settings: Landing Page Tiles
settings for the home page to specify
[page 36]
which ones apply to the latest home page
and which ones apply to the legacy home Theme Settings Used by the Home Page
page only. [page 61]

Frequently Asked Questions about

Theming [page 60]

Theme Settings: V12 Tiles [page 37]

2H 2020

Type of Change Description More Info

None We did not update this document.

Theme Manager
2 PUBLIC Change History
SAP SuccessFactors Themes

SAP SuccessFactors themes allow you to control the look-and-feel of the SAP SuccessFactors system and how it
appears to different users. You can select one of the predefined base themes or create your own custom themes.

If you choose to select one of our predefined base themes, we recommend selecting one of the "Belize" color
schemes to make your SAP SuccessFactors system consistent with other SAP solutions and sites, such as the
Support Launchpad.

If you choose to create your own custom theme, you can use theme settings to control many elements of the user
interface, such as colors, backgrounds, shadows, icons, and logos. Custom themes enable you to make the SAP
SuccessFactors system reflect your brand.

You can apply different themes to different groups of employees. For example, you can select or create different
themes for people in different departments, divisions, or locations. Or, if you use SAP SuccessFactors Learning, you
can apply different themes to learning sites in your extended enterprise.

If you do not select or create a new default theme, the default SAP SuccessFactors theme is applied, for all groups.

SAP Fiori Belize Styling and Base Themes [page 6]

The SAP SuccessFactors HXM Suite now uses the latest SAP Fiori style, known as the "Belize".

Theme Sharing [page 13]

The Theme Sharing is a feature that allows you to migrate themes from one company instance system to
another.

How to Enable and Configure Theme Manager

Allowing Access to the Theme Manager

Give people access to the Theme Manager by granting them the Company System and Logo Settings permission.

Procedure

1. Go to role-based permissions and select the role you want to edit.

2. Go to Administrator Permissions Manage System Properties and select Company System and Logo
Settings.
3. Choose Done.
4. Choose Save Changes.

Theme Manager
SAP SuccessFactors Themes PUBLIC 3
The Theme Manager

You can customize the look and feel of SAP SuccessFactors with the Theme Mananger.

The Theme Manager makes it easy to support your company branding and visual style.

The Theme Manager provides the following functions:

● Tools for creating and saving new themes

● A simple method for setting the default theme
● A search bar for searching for themes by name
● A Quick Filter for locked and unlocked themes
● Quick access to actions such as duplicate and delete
● Quick access to Save and Cancel buttons

Accessing Theme Manager

Open Theme Manager to select, create, edit, and manage themes in your instance.

Prerequisites

You have Company System and Logo Settings permission.

Procedure

Go to Admin Center Theme Manager .

You can also access Theme Manager by entering the name either from Action Search or from Tools Search box from
Admin Center.

Themes for Internal Employee Groups

You can configure your themes in provisioning to use specific criteria so that you can assign to different groups of
users within your organization.

Internal User Groups

You can organize themes so you can assign them to different internal employee user groups using the following
criteria:

Theme Manager
4 PUBLIC SAP SuccessFactors Themes
● Division
● Department
● Location

If you decide to group employees within your organization by location, you can create custom themes that are
visible to employees in specific geographical location. See Assigning Your Theme to Internal Employee Groups
[page 9] topic for more information.

1. Configuring Themes For Internal Employee Groups [page 5]

You can configure your themes in provisioning to use specific criteria so that you can assign to different
groups of users within your organization.

Related Information

Configuring Themes For Internal Employee Groups [page 5]

Assigning Your Theme to Internal Employee Groups [page 9]

Configuring Themes For Internal Employee Groups

You can configure your themes in provisioning to use specific criteria so that you can assign to different groups of
users within your organization.

Context

 Restriction

If you do not have provisioning access, contact SAP SuccessFactors.

Procedure

1. Go to Provisioning Select Company Company Settings .

You are directed to your company instance provisioning page

2. Locate the Version 12 UI framework (Revolution) from your company provisioning page.
3. Select any of the following:

○ division
○ department
○ location

Theme Manager
SAP SuccessFactors Themes PUBLIC 5
4. Select Save Features to finish.

 Restriction

You cannot select multiple criteria, such as location and division.

Task overview: Themes for Internal Employee Groups [page 4]

Related Information

Themes for Internal Employee Groups [page 4]

SAP Fiori Belize Styling and Base Themes

The SAP SuccessFactors HXM Suite now uses the latest SAP Fiori style, known as the "Belize".

● If you are using one of the pre-configured base themes in Theme Manager instead of your own branded custom
theme, we recommend that you apply the Belize color scheme to your instance to make it consistent with other
SAP solutions and other SAP sites, such as the Support Launchpad.
To do this, go to Theme Manager and select one of two new Belize base themes, light or dark.
● If you are using a branded custom theme, your custom theme settings in Theme Manager are not affected by
this change. However, you may still notice very subtle changes in UI styling on some pages, such as in icon
fonts or the roundness of corners.
● If you are not using Theme Manager at all to control theming of your instance, the Belize theme is now the
default base theme for new SAP SuccessFactors instances. It replaces the previous default SAP Fiori standard,
known as "Blue Crystal."

 Note

If, for some reason, you want to roll back these changes to the user interface, this can be done in Provisioning.
Please contact us to have SAP Belize theme setting disabled.

Theme Manager
6 PUBLIC SAP SuccessFactors Themes
Using Theme Manager

Selecting a Default Theme

Select a default theme, which is visible to every group to which you have not assigned a unique theme. You can
select any of the predefined "base themes" delivered with the application, or you can select a custom theme that
you have already created.

Procedure

1. Go to Admin Center Theme Manager .

2. Select the radio button next to the desired theme, in the Default column.
3. Click Save to save your changes.

 Tip

You may need to log out and log back in to view the new default theme applied to your instance.

Creating a Theme

If you don't want to use one of the predefined base themes, create a new theme to change the look of the SAP
SuccessFactors application.

Prerequisites

● Role-based permissions for Theme Manager set.

Procedure

1. Go to Admin Center Theme Manager

You are now in the Manage Themes page.

2. There are two methods you can use to create a theme:

Theme Manager
SAP SuccessFactors Themes PUBLIC 7
 How to Create a Theme Steps

Create Theme from scratch 1. From the Manage Themes page, select Create a New
theme.

 Caution
Create a New theme is a required field, you cannot
save your new theme unless this field is filled out.

2. Go to Getting Started Theme description to en­

ter in the name of your theme.
3. Go to Theme description to enter in description of your
theme.
4. Go to Theme identifier to enter in a unique name for
your theme.

 Note
Theme identifier is an optional field that is automat­
ically generated when you create your theme.

5. Configure you theme settings.

6. Select Save to finish.

 Caution
You can use the Try it out option to preview changes to
your new theme, but this option does not save changes
you make. We recommend that you save your theme.

Based on an existing theme 1. From the Manage Themes page, locate the theme you
want to copy.
2. Mouse-over the name of your theme so that the Try it
out and Duplicate links appear.
3. Select Duplicate link that opens your copied theme in
Edit Theme mode.

4. Go to Getting Started Theme description to en­

ter in the name of your theme.
5. Go to Theme description to enter in description of your
theme.
6. Go to Theme identifier to enter in a unique name for
your theme.

 Note
Theme identifier is an optional field that is automat­
ically generated when you create your theme.

7. Configure you theme settings.

8. Select Save to finish.

Theme Manager
8 PUBLIC SAP SuccessFactors Themes
 How to Create a Theme Steps

 Caution
You can use the Try it out option to preview changes to
your theme, but this option does not save changes you
make. We recommend that you save your theme.

Editing a Theme

You can edit any theme that you have either created from scratch or duplicated from an already existing theme
from the Manage Themes page.

Procedure

1. Go to Admin Center Theme Manager .

2. Select the name of the theme you want to edit.

 Restriction

You cannot edit the predefined base themes delivered with the application, but you can duplicate them and
use them as the basis for new custom themes. Refer to the Creating a Theme [page 7] topic for more
information.

3. Use theme settings to define your theme, just as you would when creating a new theme.
4. Select Save to save your changes.

Assigning Your Theme to Internal Employee Groups

Assign themes to groups of users so that users in different locations, divisions, or departments see different
themes.

Prerequisites

● New Theme
● Internal employee groups configured.

 Restriction

To configure internal employee groups, requires provisioning access. If you do not have provisioning access,
contact SAP SuccessFactors.

Theme Manager
SAP SuccessFactors Themes PUBLIC 9
Procedure

1. Go to Admin Center Theme Manager .

2. Locate the theme you want.
3. Go to the Visible to dropdown menu of your theme to select your employee groups.

 Tip

The default theme appears to all users that are not members of groups with an assigned theme.

4. Select Save to finish.

Related Information

Themes for Internal Employee Groups [page 4]

Verifying Your Theme Settings and Changes

Previewing and Testing Theme Settings Before Saving Them

When you have made changes to your theme, you can use the Try it out feature within Theme Manager to preview
and test your theme.

Prerequisites

● Theme Manager

Procedure

1. Go to Admin Center Theme Manager and locate the theme you want to test.
2. Mouse-over the name of your theme so that the Try it out and Duplicate links appear.
3. Select Try it out.

For the duration of your session, your instance adopts the theme you are trying out.
4. Navigate the system and see how the theme looks.
5. When ready to reset back to your default theme that can be done in one of two ways:

Theme Manager
10 PUBLIC SAP SuccessFactors Themes
 Resetting Your Theme Steps

Log out 1. When you are ready to revert back to your default
theme, log out of your instance.
2. Log back into your instance.

 Note
Your instance Theme now displays your default
theme. You can verify by going to Theme Manager

Revert option 1. When you are ready to revert back to your default

theme, go to Admin Center Theme Manager

2. Locate the theme you tested.
3. Mouse-over the name of your theme so that the Revert
and Duplicate links appear.
4. Select Revert that resets your instance back to your se­
lected default theme.

 Tip

You can select another theme to try out. The system automatically reverts out of the current theme and
adopts the new one.

Verifying Your Login Styles Theme Settings

You can test your Login Styles theme settings by using the Preview loging option.

Prerequisites

● New theme
● That you have updated Login Styles to your theme

Procedure

1. Go to Admin Center Theme Manager and locate your theme you want.
2. Select your theme.

You are now in the Edit Theme page for your theme.
3. Go to Login Styles to update.
4. Select Save to finish your Login Styles update.
5. Select Preview login .

Theme Manager
SAP SuccessFactors Themes PUBLIC 11
 You can now preview the simulated login page in a new window.

 Note

Theme Manager is still available either as another tab in your browser or another window.

6. When you are finished, exit the simulated login page and locate your browser window to go back to Theme
Manager.
7. Make any additional changes, if needed, otherwise select Cancel or Save to finish.

Tips for Finding the Correct Theme Setting

Most trouble with theming is related to difficulty in finding the correct theme setting associated with a particular UI
element. These tips help you determine the relevant theme setting for a given element of the user interface.

Tips for Finding Correct Theme Setting

Theme Setting Tips Theme Setting Tips Information

Identifying Correct Theme Setting By Name You can use expand/collapse icons to view available theme settings and
find one that may apply to the UI element you want. Here are several
tips:

● If you want to change the color of some text in the UI, look at all of
the theme settings related to that text.

 Tip
If you are trying to change the color of some text in the UI, look
at all the theme settings related to text. Is it text on a home
page tile? Does it appear in a header of some kind? Does the
color appear by default or only when you hover your cursor over
the text? You may be able to narrow down the possibilities to a
few settings.

● Some theme settings are intuitive, such as Menus or Background.

Others may use terminology that isn't familiar to you such as
Portlets, or Landing page tiles.

Identifying Correct Theme Setting By Matching Col­ You can identify theme settings by matching colors that is in the UI ele­
ors in UI ment itself or search for other UI element that have the same color..

When in Theme Preview screen of your theme, locate a color that

matches the color of your theme setting UI element. Your theme may
use the same or similar colors in several places, and more than one
theme element may match same color.

 Example
Color used for Header text color may be the same for Portlets and
for Tables.

Theme Manager
12 PUBLIC SAP SuccessFactors Themes
Theme Setting Tips Theme Setting Tips Information

Using Temporary Themes You can create a temporary troubleshooting theme so that you can alter
and view during your current logon session without impacting the theme
visible to users.

It's recommended that you use the Troubleshooting Theme Using Bright
Colors. See Troubleshooting Theme Using Bright Colors [page 62] for
more information on how to import and save an already existing trouble­
shooting theme that uses bright colors.

Test Your Theme You can test your theme a number of ways once it's opened in edit mode.
When you have located the setting you want to test, here are a number
of tips:

● Note the current value of your theme setting for future reference or
copy over to a text file on your hard drive so you can restore.

 Example
If you are testing Fine Tune Portlets Header text color
setting and it is currently set as a dark gray color, note the cur­
rent hexadecimal color code: #3C3C3C

● Refer to steps as outlined in Previewing and Testing Theme Settings

Before Saving Them [page 10] on how to try out and save your
changes.

Related Information

Troubleshooting Theme Using Bright Colors [page 62]

Theme Sharing

The Theme Sharing is a feature that allows you to migrate themes from one company instance system to another.

Migrating Themes for Testing or Troubleshooting

You can test your theme using your preview system and move it over to your production system. If you find a theme
that is not working as expected in production and want to test it in your preview system.

You can export the Cascading Style Sheet (CSS) code into a text editor and import to another instance.

Theme Manager
SAP SuccessFactors Themes PUBLIC 13
1. Exporting Your Theme [page 14]
2. Importing Your Theme [page 14]

Exporting Your Theme

Procedure

1. Go to the instance that you want to migrate from.

2. Go to Admin Center Theme Manager .

3. Select the theme you want to export

When you have selected your theme, you are in the Edit Theme page for your theme.

4. Go to Theme Configurations Theme Sharing Export Theme .

When selected, Export Theme opens the Export Theme dialog box that contains instructions and Cascading
Style Sheet (CSS) code.
5. Select Select All to copy your Copy the Cascading Style Sheet (CSS) code from the text box
6. Paste that Copy the Cascading Style Sheet (CSS) code from the text box into a text editor.
7. Save your text file on your local drive.
8. To export your logos and other images:
a. Download your logos and images to your local hard drive where you saved the Cascading Style Sheet (CSS)
code from the text box
9. Select Close to exit Theme Sharing.

Task overview: Theme Sharing [page 13]

Next: Importing Your Theme [page 14]

Importing Your Theme

Procedure

1. Open the instance that you want to import the theme to.

2. Go to Admin Center Theme Manager .

3. Select Create a new theme.

Theme Manager
14 PUBLIC SAP SuccessFactors Themes
4. Go to Theme Configurations Theme Name to enter your theme name.

5. Go to Theme Configurations Theme Sharing Import Theme .

When selected, Import Theme opens the Import Theme dialog box that contains instructions and text box to
copy your Cascading Style Sheet (CSS) code.
6. Copy the Cascading Style Sheet (CSS) code from your saved text file into the empty text box.
7. Select Import.
8. To import your logo, background images, and header background:

Theme Configuration Section Imports

Theme Section Steps

Logo 1. Go to Manage Themes Theme Configurations Fine Tune

Logo Upload a logo .

2. Select Choose File to browse for your logo file
3. Select the Upload link to finish the upload.

Background Images 1. Manage Themes Theme Configurations Fine Tune

Background Upload an image .

2. Select Choose File to browse for your background image.
3. Select Upload link to finish your upload.

Header Background 1. Manage Themes Theme Configurations Fine Tune

Background Header background .

2. Select Choose File to browse for your Header background.
3. Select Upload link to finish your upload.

9. Go to Manage Themes Theme Configurations and select Save to finish.

Next Steps

Test the theme that you imported.

Task overview: Theme Sharing [page 13]

Previous: Exporting Your Theme [page 14]

Related Information

Previewing and Testing Theme Settings Before Saving Them [page 10]

Theme Manager
SAP SuccessFactors Themes PUBLIC 15
Theme Setting Details

You can customize your theme by changing colors, size, logos, and footers using Theme Manager once a theme has
been created

Using Manage Themes and Theme Preview

Manage Themes page organized between the Getting Started navigation pane and Theme Preview. Getting Started
is where you can customize your theme settings and you can preview your changes within Theme Preview.

Getting Started Theme settings organized by Theme Configuration Category and by Theme Configuration Section
that belong under each category. The theme configuration categories:

● Quick Theme
● Fine Tune
● Login Styles
● External User Styles
● Theme Sharing

Most theme setting configuration sections are under Fine Tune Theme Configuration Category.

Theme Settings: Quick Theme

You can make quick changes to your theme without having to customize a lot of UI elements using Quick Theme
such as your background and accent colors, and shadows for your text and containers.

Quick Theme Settings

These are UI elements that Quick Theme controls:

● Page background color

● Accent color scheme based on
● Use text shadows
● Container shadow
● Use downloadable fonts
● Use advanced styles in older browsers

Theme Manager
16 PUBLIC Theme Setting Details
Quick Theme Legend

Under the Troubleshooting Theme Legend for Quick Themes section contains a legend that includes a screenshot
with a corresponding table that identifies UI elements available in Theme Preview. See related links for more
information

Related Information

More Quick Theme Settings [page 19]

Setting the Page Background Color for a Theme [page 17]
Configuring Accent Color Schemes in Quick Themes [page 18]
Troubleshooting Theme Legend for Quick Themes [page 68]

Setting the Page Background Color for a Theme

You can use the color picker or type in the hexadecimal value to set the overall solid background color. The Page
background color appears behind any pictures you add to the background.

Procedure

1. Go to Admin Center Theme Manager .

You are in Manage Themes page.

2. From Manage Themes page, select the theme you want.

Selecting your theme opens the Edit Theme page.

3. From the Edit Theme page, go to Quick Themes Page background color .
4. Go to the color picker icon and select your Page background color by doing any of the following:

○ Choose the color you want with your mouse

○ Enter the RGB or HSV values for your color
○ Enter the Hex Codes for your color
5. Select the Apply button to exit the color picker to apply your changes.
6. To finish, you can either:

○ Preview your changes, by selecting the Try it out option.

○ Select Save to finish.

Theme Manager
Theme Setting Details PUBLIC 17
Related Information

Theme Settings: Quick Theme [page 16]

More Quick Theme Settings [page 19]

Configuring Accent Color Schemes in Quick Themes

When you select and apply a color, SAP SuccessFactors automatically generates accent colors based on your
selection. Accent colors can be assigned for portlet headers, primary buttons, menu highlights, navigation labels,
and table background colors.

Procedure

1. Go to Admin Center Theme Manager .

You are in Manage Themes page.

2. From Manage Themes page, select the theme you want.

Selecting your theme opens the Edit Theme page.

3. From the Edit Theme page, go to Quick Themes Accent color scheme based on .
4. Go to the color picker icon and select your Page background color by doing any of the following:

○ Choose the color you want with your mouse

○ Enter the RGB or HSV values for your color
○ Enter the Hex Codes for your color
5. Select the Generate button to generate your accent colors.

You can see the different possible accent colors below the color picker that uses hexadecimal values.

 Tip

Quick facts about Accent Color Bar:

○ Uses 10 shades of your selected base color, is created at varying degrees of opacity.
○ Top row emulates opacity over a white background.
○ Opacity values start at 100%, 75%, 50%, 25% in the top row.
○ Bottom row opacity begins at 85% rather than 100% and is first.

Selected Accent Colors Bar

Theme Manager
18 PUBLIC Theme Setting Details
6. Select the Apply button to exit the color picker to apply your changes.
7. To finish, you can either:

○ Preview your changes, by selecting the Try it out option.

○ Select Save to finish.

Related Information

Theme Settings: Quick Theme [page 16]

More Quick Theme Settings [page 19]

More Quick Theme Settings

Quick Theme allows you to be able to add shadows to your text, containers, enable downloadable fonts and use
advanced styles for older browsers.

Adding Shadows For Text

You can enable use of text shadow by selecting Yes under Use text shadows section.

Screenshot depicts Two images: Text Shadowing Turned on and With One Turned Off

Container Shadow

Container shadow controls whether containers have shadows and the darkness of them. You can select these
options from the menu:

Theme Manager
Theme Setting Details PUBLIC 19
● None
● Dark
● Light

Use downloadable fonts

Unless directed by an SAP SuccessFactors representative, select Yes.

Use advanced styles in older browsers

Use advanced styles in older browsers allow you to use modern visual styles such as rounded corners and shadow
effects on older browsers like Internet Explorer 7 and 8.

Related Information

Theme Settings: Quick Theme [page 16]

Setting the Page Background Color for a Theme [page 17]
Configuring Accent Color Schemes in Quick Themes [page 18]

Theme Settings: Fine Tune

You can customize different elements of your theme using the Fine Tune tool when you select your theme from the
Manage Themes page.

Fine Tune Features

Fine Tune is available from the left navigation pane from the Edit Theme page that contain different elements or
places in your theme you want to customize. See related links to find out more about each fine tune feature.

Theme Settings: Background [page 22]

You can configure and customize how the background behind the placemat appear to users from
Background section of Fine Tune.

Theme Settings: Header Background [page 25]

You can change how the header background looks in your theme by changing the color, uploading images,
and how your image is displayed.

Theme Settings: Logo [page 27]

Theme Manager
20 PUBLIC Theme Setting Details
 You change fine tune logo settings to control how your logo appears in your theme.

Theme Settings: Placemat [page 29]

Change fine tune placemat settings to control the look of users' workspace, in front of the background
settings.

Theme Settings: Landing Page Theme [page 30]

Change the landing page theme setting to assign a different theme to landing pages.

Theme Settings: Module Picker [page 31]

Change fine tune module picker settings to control users' main workspace.

Theme Settings: Menus [page 32]

Change fine tune menu settings to control the account navigation menu.

Theme Settings: Global Navigation [page 33]

Change the global navigation settings to control the navigation that is, by default, horizontal across the
workspace in each module.

Theme Settings: Portlets [page 34]

Change the portlet settings to control the small boxes of text that appear mostly in Employee Central and
People Profile.

Theme Settings: Landing Page Tiles [page 36]

Change the landing page tile settings to control tiles on landing pages, such as the legacy home page.

Theme Settings: V12 Tiles [page 37]

Change the V12 tile settings to control tiles on the V12 Home Page.

Theme Settings: Primary Buttons [page 39]

Change primary button settings to control how the most important buttons on the user interface appear to
users.

Theme Settings: Highlight Elements [page 41]

Change highlight element settings to control how important, highlighted information is passed to users on
the user interface.

Theme Settings: Tables [page 42]

Change table settings to control how tabular data is presented to the user - especially to highlight
interaction with the table.

Theme Settings: Diagrams [page 44]

Change diagram settings to control how graphic data is presented to the user - especially to highlight out of
tolerance values.

Theme Settings: Footer [page 45]

Change footer settings to control how the legal boilerplate appears at the bottom of each page.

Theme Manager
Theme Setting Details PUBLIC 21
Theme Settings: Background

You can configure and customize how the background behind the placemat appear to users from Background
section of Fine Tune.

Background

Background settings control these three areas as part of your theme background:

● Setting up image for your theme

● How your image displays in the background of your theme and background lighting

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Header Background [page 25]

Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]
Configuring Your Background Image Display [page 23]
About Background Image Settings [page 23]

Theme Manager
22 PUBLIC Theme Setting Details
About Background Image Settings

You can set up the background image a number of different ways: using a textured image, URL, upload your own
image, or not at all.

Setting up Image For Your Theme

Here are the different options for setting up your image you want to use as your theme background:

Background Image Settings

Selection Description

Select texture image Used if you want a textured image as your background. There
is a list of different textured images from the dropdown menu

Enter URL for image You can enter URL of an image you want to use as your back­
ground. If you host a background image on your intranet, you
can use that URL.

 Restriction
The URL must be reachable by SAP SuccessFactors de­
fined by a change management process for that image.
You do not want your intranet site administrator change
the image without understanding how it impacts your
theme.

Upload an image Select Upload an image to upload an image. Click Choose File
to browse for and upload the image.

No image Select No image if you do not want to use an image.

Configuring Your Background Image Display

You can set your background image to repeat when the size of the window is larger than the size of the image, and
background gradient to create spotlight effect.

Procedure

1. Go to Admin Center Theme Manager Manage Themes and select the theme you want to customize.

2. To locate Image display settings, go to Fine Tune Background Image display .

Theme Manager
Theme Setting Details PUBLIC 23
3. To set up your Background image options:

Image Display Settings Steps

Repeat Go to Fine Tune Background Image display Repeat and select any
option from the dropdown menu:
○ Select Repeat to create a tiled effect.
○ Select Repeat X to repeat horizontally.
○ Select Repeat Y to repeat vertically.
○ Select No Repeat to show background color if resizing window beyond the
size of the image.

Position To select the vertical and horizontal starting position of the image, go to

Fine Tune Background Image display Position .

The first dropdown is for horizontal positioning of your image, you can select
any of the following:
○ Left
○ Center
○ Right

The next dropdown menu is for vertical positioning of your image, you can se­
lect any of the following:
○ Top
○ Center
○ Bottom

 Example
If you select Left and Top, your image repeats from the top left corner of
the window.

Lighting To configure background gradient to create a spotlight effect, for your image,

go to Fine Tune Background Lighting with either of these two op­

tions:
○ If you do not want background gradient, select None
○ if you want background gradient, select Fading from center.

4. To finish, you can either:

○ Preview your changes, by selecting the Try it out option.

○ Select Save to finish.

Theme Manager
24 PUBLIC Theme Setting Details
Theme Settings: Header Background

You can change how the header background looks in your theme by changing the color, uploading images, and how
your image is displayed.

Procedure

1. Go to Admin Center Theme Manager Manage Themes and select the theme you want to customize.

2. To locate Header background settings, go to Fine Tune Header background .

3. To set up your Header background options:

Header background Steps

Default Select Default if you want to use as your default background

header.

Solid Color Select Solid Color for your Header Background appear as a
solid color.

Upload an image Select Upload an image to upload an image. Click Choose

File to browse for and upload the image. To upload:
1. Select Choose File and browse to your image file.
2. Select Upload link.
3. Select Save to finish.

 Tip
When you use the Upload an image, image display op­
tions appear

4. When you have selected the Upload an image, option you can set up how you want your image displayed for
your header background as outlined in this table:

Image Display Settings Steps

Repeat Go to Fine Tune Header background Upload an image

Image display Repeat

○ Select Repeat to create a tiled effect.
○ Select Repeat X to repeat horizontally.
○ Select Repeat Y to repeat vertically.
○ Select No Repeat to show background color if resizing
window beyond the size of the image.

Theme Manager
Theme Setting Details PUBLIC 25
 Image Display Settings Steps

Position To select the vertical and horizontal starting position of the

image, go to Fine Tune Header background Upload an

image Image display Position

The first dropdown is for horizontal positioning of your im­

age, you can select any of the following:
○ Left
○ Center
○ Right

The next dropdown menu is for vertical positioning of your

image, you can select any of the following:
○ Top
○ Center
○ Bottom

 Example
If you select Left and Top, your image repeats from the
top left corner of the window.

Header background color Use the color selector or enter in the hexadecimal value to
set the overall solid header background color.

Width Type To control the width of your header background, you can ei­
ther select:
○ Full browser body width so that the header background
as wide as the page.
○ Placemat width so that your header background is as
long as the placemat.

 Note
Any additional space to the left or right of the
header displays the page background color or your
image.

5. To finish, you can either:

○ Preview your changes, by selecting the Try it out option.

○ Select Save to finish.

Task overview: Theme Settings: Fine Tune [page 20]

Theme Manager
26 PUBLIC Theme Setting Details
Related Information

Theme Settings: Background [page 22]

Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Logo

You change fine tune logo settings to control how your logo appears in your theme.

Different Logo Settings

Logo settings control aspects of your theme logo:

● Setting up the actual logo for your theme.

● Logo background container
● How your logo displays in your theme that includes positioning and width.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]

Theme Manager
Theme Setting Details PUBLIC 27
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Configuring the Logo in a Custom Theme

Configure the logo used by a custom theme in Theme Manager.

Procedure

1. Go to Admin Center Theme Manager Manage Themes and select the theme you want to customize.

2. Go to Fine Tune Logo and choose the logo you want to use.

Settings Purpose

Use default logo Select this setting to use the default logo configured for the sys­
tem as the logo displayed in the custom theme.

Upload a logo Select this setting to upload a different logo image to display in the
custom theme.

3. Go to Fine Tune Logo Logo background container and configure the logo background.

Settings Purpose

None Select this setting if you don't want to set a background

color for the logo.

Background Color Select this setting to choose a background color for the logo.

4. Go to Fine Tune Logo Logo position and choose an option.

○ Left
○ Right

 Caution

We're phasing out support for centered logos, so don't choose the Center option. SAP Fiori design
standards prefer logos that are left- or right-aligned.

Theme Manager
28 PUBLIC Theme Setting Details
5. Go to Fine Tune Logo Logo width to select the width of the logo.

Theme Settings: Placemat

Change fine tune placemat settings to control the look of users' workspace, in front of the background settings.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Placemat Settings

Setting Purpose

Page Title Color Select to change the My Forms title.

Background Color The color of the workspace where users interact with the user interface. This is
separate from the background of the application. The background of the appli­
cation is the frame around the workspace. If you set Background Opacity to
zero, then you do not see the background color.

Background Opacity Set the transparency to more than 0% if you want to see the background color.
Set to 0% to hide the background color.

Background Type You can choose Dark or Light background type.

Border Color This is the color of the thin line surrounding the placemat.

Use Shadow If set to Yes, then the placemat has a slight shadow giving it the appearance it is
hovering over the background.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]

Theme Manager
Theme Setting Details PUBLIC 29
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Landing Page Theme

Change the landing page theme setting to assign a different theme to landing pages.

 Note

In Theme Manager, a "landing page" is a tile-based or card-based experience, such as the home page and the
next-gen Admin Center. You can apply different theme settings to landing pages than are used on other pages in
the application.

Landing Page Theme Settings

Setting Purpose

Landing page theme Select a theme for the home page if you want it to be different from the primary
theme.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]

Theme Manager
30 PUBLIC Theme Setting Details
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Module Picker

Change fine tune module picker settings to control users' main workspace.

 Note

Refer to Legend for Fine Tune Module Picker [page 72] to understand how Theme Configuration Element or
Module picker settings correspond with specific UI elements.

Module Picker Settings

Theme Configuration Element Setting Purpose

Label text color - default This is the color of the text if the user is not interacting with it.

Label text color - hover This is the color of the text in the module picker if the user has placed the
mouse pointer over the text without selecting it.

Label text color - active This is the color of the label if the user is not interacting with it.

 Note
This may not work if you are using an application that does not run on SAP
UI5

Background color - active This is the color of the active module in the module picker.

Background color - hover This controls the highlighting color when users place their mouse over a module
but do not click it.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]

Theme Manager
Theme Setting Details PUBLIC 31
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Menus

Change fine tune menu settings to control the account navigation menu.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Menu Settings

Setting Purpose

Text color - default This is the color of the text in the menu if the user is not interacting with it.

Text color - hover This is the color of the text in the menu if the user has placed the mouse pointer
over the text but not clicked.

Text color - active This is the color of the currently active text.

Menu item background color - default This is the default color of the menu background when the user is not interact­
ing with it.

Menu item background color - active This is the color of the active selection in the menu.

Background color - hover This controls the highlighting color when users place their mouse over a selec­
tion but do not click it.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Manager
32 PUBLIC Theme Setting Details
Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Global Navigation

Change the global navigation settings to control the navigation that is, by default, horizontal across the workspace
in each module.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Global Navigation Settings

Setting Purpose

Text color - default This is the color of the text in the global navigation if the user is not interacting
with it.

Label text color - hover This is the color of the text in the global navigation if the user has placed the
mouse pointer over the text but not clicked.

Label text color - current page This is the text color of the currently selected page.

When the Global Header contains no If a particular module does not need global navigation, and if you select Yes,
Secondary Navigation, display it at a shorter then the global page header compacts slightly to give the user more on-screen
height. space.

Parent topic: Theme Settings: Fine Tune [page 20]

Theme Manager
Theme Setting Details PUBLIC 33
Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: Portlets

Change the portlet settings to control the small boxes of text that appear mostly in Employee Central and People
Profile.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Global Navigation Settings

Setting Purpose

Header text color This is the color of the text in the banner at the top of the portlet.

Header link text color This is the color of the hyperlink text in the banner at the top of the portlet. This
is often an Edit link.

Header background color This is the color of the banner at the top of the portlet.

Body text color This is the color of plain text in the body of the portlet.

Body link text color This is the color of hyperlinks in the body of the portlet.

Theme Manager
34 PUBLIC Theme Setting Details
Setting Purpose

Sidebar text color This is the color of text that appears on the side of a interface element (for ex­
ample a table).

Sidebar link text color This is the color of hyperlink text that appears on the side of a interface element
(for example a table).

Sidebar background color This is the color of the space behind the sidebar menu items.

Dimmed Text Color This is the color of text in a portlet when you want it to be visually less important
to the reader.

Alert Text Color This is the color of text in a portlet when you want to make it the most visually
important text to the reader.

Callout Text Color This is the color of text in a portlet when you want to make it the visually impor­
tant text to the reader but not as important as alert text.

Custom 1 Text Color This is a custom text color for portlets. Most customers do not need it.

Custom 2 Text Color This is a custom text color for portlets. Most customers do not need it.

Header button icon This is the color of the icon in the portlet header. You can choose dark gray or
light gray.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Manager
Theme Setting Details PUBLIC 35
Theme Settings: Landing Page Tiles
Change the landing page tile settings to control tiles on landing pages, such as the legacy home page.

 Restriction

Landing page tiles theme settings are only used by the legacy home page. They aren't used by the latest home
page. You can apply theming to the latest home page using other theme settings, such as header and
background colors, but you can't apply theming to cards.

 Note

In Theme Manager, a "landing page" is a tile-based or card-based experience, such as the home page and the
next-gen Admin Center. You can apply different theme settings to landing pages than are used on other pages in
the application.

 Tip

Changes to landing page tile settings aren’t visible in Theme Preview. To preview them, save your changes and
use the Try it Out function instead.

Landing Page Tile Settings

Setting Purpose

Body background color This is the color of the background in the body of the tile.

Border color .

Border opacity .

Header text color This is the color of the text in the banner at the top of the tile.

Tile body text color This is the color of plain text in the body of the tile. For to-do tiles, it's the color
of the to-do count when it's not any of the Neutral, Alert, or Critical colors.

Icon color .

Neutral text color This is the color of the to-do count when a task is due anytime.

Alert text color This is the color of alert text, the most important text on a tile. For to-do tiles,
it's the color of the to-do count when a to-do is overdue, due today, or due to­
morrow.

Critical text color This is the color of the to-do count when a to-do item is due after tomorrow but
within a week.

Progress indicator color .

 Tip

For better readability, set the color contrast properly between the tile background and the tile texts. Avoid using
the same color for the background and foreground.

Theme Manager
36 PUBLIC Theme Setting Details
Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]

Theme Settings: V12 Tiles

Change the V12 tile settings to control tiles on the V12 Home Page.

 Caution

These theme settings are obsolete. They were used by a previous version of the home page that is no longer
supported.

Although they're still visible in the Theme Manager, they shouldn't be used.

V12 Tile Settings

Setting Purpose

Header text color For a standard V12 tile, this is the color of the text in the banner at the top of the
tile.

Header link text color For a standard V12 tile, this is the color of the hyperlink text in the banner at the
top of the tile. This is often an Edit link.

Header background color For a standard V12 tile, this is the color of the banner at the top of the tile.

Theme Manager
Theme Setting Details PUBLIC 37
Setting Purpose

Header icon scheme For a standard V12 tile, this is the color of the icon in the header. You can choose
dark gray or light gray.

Tile body text color For a standard V12 tile, this is the color of plain text in the body of the tile.

Link color For a standard V12 tile, this is the color of hyperlinks of text in the body of the
tile.

Body background color For a standard V12 tile, this is the color of the background in the body of the tile,
under the header.

Body icon scheme For a standard V12 tile, this is the color of any icons that appear as a watermark
in the body of the tile. You can choose dark gray or light gray.

Group text color For a standard V12 tile, this is the text color for a grouping mechanism inside the
tile. The groups are like sections of a tile and are often delineated by a bar with
text in it. This is the color of that text.

Group background color For a standard V12 tile, this is the background for a grouping mechanism inside
the tile. The groups are like sections of a tile and are often delineated by a bar
with text in it. This is the color of that bar.

Tile body highlight color For a standard V12 tile, this is the color of text that you want to highlight for the
reader. It is the most important text on the tile.

Accent header text color For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of the text in the banner at the top of the tile.

Accent header link text color For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of the hyperlink text in the banner at the top of the tile.
This is often an Edit link.

Accent header icon scheme For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of the icon in the header. You can choose dark gray or
light gray.

Accent body text color For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of the text in the body of the tile.

Accent link color For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of hyperlink text in the header.

Accent body background color For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of body of the tile.

Accent body icon scheme For the accent tile, which is a way to draw users' attention to this tile more than
others, this is the color of any icons that appear as a watermark in the body of
the tile. You can choose dark gray or light gray.

Theme Manager
38 PUBLIC Theme Setting Details
Setting Purpose

Alert text color This is the color of alert text, which is the most important text on a tile, the text
you most want your users to read.

Alert badge text color For a standard V12 tile, badges are little icons in the left side of the header. This
is the color of the text in that badge.

Alert badge background color For a standard V12 tile, badges are little icons in the left side of the header. This
is the background color of that badge.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]
Creating a Theme [page 7]

Theme Settings: Primary Buttons

Change primary button settings to control how the most important buttons on the user interface appear to users.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Theme Manager
Theme Setting Details PUBLIC 39
Change these settings in Theme Manager.

Primary Button Settings

Setting Purpose

Text color - default This is the color of the text on the primary buttons of the user interface when
users are not interacting with the button.

Text color - hover This is the color of the text on the primary buttons of the user interface when
users pause their mouse over the primary button but do not click the button.

Background color - default This is the color of the primary buttons on the user interface when users are not
interacting with the buttons.

Background color - hover This is the color of the primary buttons of the user interface when users pause
their mouse over the primary button but do not click the button.

Border color - default This is a way to provide depth to the primary buttons on the user interface when
users are not interacting with the buttons. The border appears at the bottom of
the button.

Border color - hover This is a way to provide depth to the primary buttons on the user interface when
users pause their mouse over the primary button but do not click the button.
The border appears at the bottom of the button.

Disabled text color This is the color of the text on the primary buttons of the user interface when
the buttons are disabled. Buttons are disabled when users cannot click them
under the current conditions of the process or the users' permissions.

Disabled background color This is the color of the primary buttons of the user interface when the buttons
are disabled. Buttons are disabled when users cannot click them under the cur­
rent conditions of the process or the users' permissions.

Disabled border color This is a way to provide depth to disabled primary buttons on the user interface.
Buttons are disabled when users cannot click them under the current condi­
tions of the process or the users' permissions. The border appears at the bot­
tom of the button.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]

Theme Manager
40 PUBLIC Theme Setting Details
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]
Creating a Theme [page 7]

Theme Settings: Highlight Elements

Change highlight element settings to control how important, highlighted information is passed to users on the user
interface.

 Caution

These theme settings are obsolete. They were used by a previous version of the home page that is no longer
supported.

Although they're still visible in the Theme Manager, they shouldn't be used.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Highlight Element Settings

Setting Purpose

Background color This is the background of the highlight tile: the center of the tile.

Text color This is the color of standard text inside the tile of information that you want to
highlight.

Link color This is the color of hyperlink text inside the tile of information that you want to
highlight.

Header button icon This is the color of the button in the highlight tile. The color is for the button
when users are not interacting with it. When users pause their mouse on the
button but do not click it, the colors reverse. For example, if you select Dark,
then when users pause their mouse over the button, it is Light.

Theme Manager
Theme Setting Details PUBLIC 41
Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]
Creating a Theme [page 7]

Theme Settings: Tables

Change table settings to control how tabular data is presented to the user - especially to highlight interaction with
the table.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Table Settings

Setting Purpose

Header text color This is the color of the text in the column headers that describes the data in the
column under it. For example, if the column contained a list of employees, the
header text would be “Employee”.

Theme Manager
42 PUBLIC Theme Setting Details
Setting Purpose

Header background color This is the color of the column headers. Select a color that helps emphasize that
it is a header - typically darker than the body.

Row background color - default This is the color of odd numbered rows. Select a lighter color or white. This
color is different from the alternative color to alternate the background of the
rows and enhance users' ability to scan the table horizontally.

Row background color - alternative This is the color of even numbered rows. Select a shaded color that is slightly
different from the default color. This color is different from the default color to
alternate the background of the rows and enhance users' ability to scan the ta­
ble horizontally.

Row background color - hover This is the background color of a row that users' pause their mouse over but do
not select. Choosing a good hover color allows readers to use their mouse
pointer like their index finger when scanning vertically in the table.

Row background color - selected This is the background color of a cell that users click.

Row background color - disabled This is the background color of a row that is disabled and the user cannot
change.

Cell background color - sorted This is the background color of odd numbered rows that are sorted. For exam­
ple, if you sort a list of employee names, the first, third, fifth (and so on) cells in
the employee column are this color. The even cells maintain the value of Row
background color - alternative.

Cell background color - selected and sorted This is the background color of any cell (odd or even) when its column is sorted
and a user selects the cell.

Parent topic: Theme Settings: Fine Tune [page 20]

Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]

Theme Manager
Theme Setting Details PUBLIC 43
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Diagrams [page 44]
Theme Settings: Footer [page 45]
Creating a Theme [page 7]

Theme Settings: Diagrams

Change diagram settings to control how graphic data is presented to the user - especially to highlight out of
tolerance values.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Diagram Settings

Setting Purpose

Primary Color This is the primary color of one-dimensional graphic data (for example, an un­
stacked bar chart).

Text Color This is the color of any text that is not the title. For example, the scale of the x-
axis or y-axis.

Title Color This is the color of the text for title of the chart.

Line Color This is the color of grid lines on a graph.

Background Color This is the color of the background of the graphs. It does not apply to boxes that
pop up from the graph when the user interacts.

Positive Threshold Color This is the color of data representation (a bar or a line for example) when it has
a positive value.

Neutral Threshold Color This is the color of data representation (a bar or a line for example) when it has
a neutral value.

Negative Threshold Color This is the color of data representation (a bar or a line for example) when it has
a negative value.

Color Scheme You can choose a number of colors to represent a scheme. For example, each
section of a pie chart is a different color in the scheme.

Parent topic: Theme Settings: Fine Tune [page 20]

Theme Manager
44 PUBLIC Theme Setting Details
Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Footer [page 45]
Creating a Theme [page 7]

Theme Settings: Footer

Change footer settings to control how the legal boilerplate appears at the bottom of each page.

 Note

Although you preview many of your changes in the Theme Preview, we recommend that you click Save to
actively save your work. Then, you can use the Try it Out function to navigate to any page and preview how your
theme appears to users.

Change these settings in Theme Manager.

Footer Settings

Setting Purpose

Text color This is the text of the legal boilerplate at the bottom of each page.

SuccessFactors Logo This is the color of the logo in the footer.

Parent topic: Theme Settings: Fine Tune [page 20]

Theme Manager
Theme Setting Details PUBLIC 45
Related Information

Theme Settings: Background [page 22]

Theme Settings: Header Background [page 25]
Theme Settings: Logo [page 27]
Theme Settings: Placemat [page 29]
Theme Settings: Landing Page Theme [page 30]
Theme Settings: Module Picker [page 31]
Theme Settings: Menus [page 32]
Theme Settings: Global Navigation [page 33]
Theme Settings: Portlets [page 34]
Theme Settings: Landing Page Tiles [page 36]
Theme Settings: V12 Tiles [page 37]
Theme Settings: Primary Buttons [page 39]
Theme Settings: Highlight Elements [page 41]
Theme Settings: Tables [page 42]
Theme Settings: Diagrams [page 44]
Creating a Theme [page 7]

Theme Settings: Login Styles

Use these settings to theme the default SAP SuccessFactors login page.

Login Styles

Login Styles settings control these areas as part of screen when you log into SAP SuccessFactors:

● Login background
● Login logo
● Login button
● Login footer

Theme Manager
46 PUBLIC Theme Setting Details
Theme Settings: Login Background

You can customize the background of your SAP SuccessFactors standard login page using the Login background.

Login background Settings

You can access Login background:

1. Go to Admin Center Theme Manager to select the theme you want.

2. Go to Getting Started Login Styles Login background .

Login background settings control these elements of your background to your SAP SuccessFactors login page:

● Setting up your background to your login page specific to your theme.

● About uploading and displaying background image for your login page of your theme.

Related Information

Creating a Theme [page 7]

About Login Background Settings

You can configure and customize how your SAP SuccessFactors login page appears with your theme.

Login Page Background Settings

Setting Purpose

Do not change settings You can select this option to use the default SAP SuccessFac­
tors login page.

Use this theme's settings You can select this option to use the same background settings
used within SAP SuccessFactors pages, as defined in that cur­
rent theme.

Use solid color You can select this option if you want a solid background for
your SAP SuccessFactors login page.

When the Use solid color option has been selected, the
Background color color picker appears. You can select color of
your choice here.

Theme Manager
Theme Setting Details PUBLIC 47
Configuring Your Login Background Image Display

You can set the image for your login background to repeat, its position and overlay options

Procedure

1. Got to Admin Center Theme Manager Manage Themes and select the theme you want to customize.

2. Go to Login Styles Login background .

3. Select Upload an image to upload your image.

When the Upload an image is selected, your image display options appear.
4. To customize your image display options for your login background:

Image display Settings Instructions

Repeat You can use this option to control how your login page background im­
age repeats when the size of the header is larger than the size of the
image.

Go to Login Styles Login background Image display Repeat

You can select any of these options from the dropdown menu:
○ Select Repeat to create a tiled effect.
○ Select Repeat X to repeat horizontally.
○ Select Repeat Y to repeat vertically.
○ Select No Repeat to show background color if resizing window be­
yond the size of the image.

Position To select the vertical and horizontal starting position of the image, go to

Login Styles Login background Image display Position

The first dropdown is for horizontal positioning of your image, you can
select any of the following:
○ Left
○ Center
○ Right

The next dropdown menu is for vertical positioning of your image, you
can select any of the following:
○ Top
○ Center
○ Bottom

Theme Manager
48 PUBLIC Theme Setting Details
 Image display Settings Instructions

 Example
If you select Left and Top, your image repeats from the top left cor­
ner of the window.

Overlay option The Overlay option controls overlay on top of the login page using the
following choices:
○ None
○ Dark
○ Light

Overlay opacity When you use overlay, you can set its opacity or transparency level. Ex­
amples of how opacity settings work:
○ Lowest opacity level hides overlay and shows the login page back­
ground.
○ Highest opacity level hides the entire login background behind the
overlay.

 Example
Dark overlay option with 100% opacity level appears as black and
100% Light overlay appears as white.

Background tpe You can indicate whether your login background is dark or light. Based
on your selection, the color of icons and lines on the page adjust.
○ Select Dark to make icons and lines appear white.
○ Select Light to make icons and lines appear black.

5. To finish, you can either:

○ Preview your changes, by selecting the Try it out option.

○ Select Save to finish.

Theme Settings: Login Logo

Change login logo settings to control the logo used on the standard SAP SuccessFactors login page.

 Note

Because you can only view the login page by logging out, you cannot preview changes to login style settings
using the usual Try It Out function. Instead, you can use the Login Preview button to preview your saved
changes.

If you want to create a completely new login experience for your company, you can also create your own
custom login pages. For more information about how to do this, please contact us.

Theme Manager
Theme Setting Details PUBLIC 49
Login Logo Settings

Setting Purpose

Use your company logo Select this to use the logo already defined for your company.

Use SuccessFactors logo Select this to display the SAP SuccessFactors logo on the login page. You can
choose from four logo options: Default, Full color, White, or Black.

Upload a logo Select this to upload a new logo image to use on the login page.

Related Information

Creating a Theme [page 7]

Theme Settings: Login Buttons

Change login button settings to control the buttons on the standard SAP SuccessFactors login page.

 Note

Because you can only view the login page by logging out, you cannot preview changes to login style settings
using the usual Try It Out function. Instead, you can use the Login Preview button to preview your saved
changes.

If you want to create a completely new login experience for your company, you can also create your own
custom login pages. For more information about how to do this, please contact us.

Login Button Settings

Setting Purpose

Do not change settings Select this to use the button style used on the default SAP SuccessFactors login
page.

Use this theme's settings Select this to use the same primary button settings used on application pages,
as defined in the current theme.

New style setting Select this to enter new button settings to use on the login page.

New style setting Text color - default This is the color of the button text on the login page when users are not interact­
ing with the button.

New style setting Text color - hover This is the color of the button text on the login page when users pause their
mouse over a button but do not click it.

Theme Manager
50 PUBLIC Theme Setting Details
Setting Purpose

New style setting Background color - This is the color of the buttons on the login page when users are not interacting
with the buttons.
default

New style setting Background color - This is the color of the buttons on the login page when users pause their mouse
over a button but do not click it.
hover

New style setting Disabled text color This is the color of the button text on the login page when the buttons are disa­
bled. Buttons are disabled when users cannot click them under the current con­
ditions of the process or the users' permissions.

New style setting Disabled background This is the color of the buttons on the login page when the buttons are disabled.
Buttons are disabled when users cannot click them under the current condi­
color
tions of the process or the users' permissions.

Related Information

Creating a Theme [page 7]

Theme Settings: Login Footer

Change login footer settings to control the text and logo in the footer of the standard SAP SuccessFactors login
page.

 Note

Because you can only view the login page by logging out, you cannot preview changes to login style settings
using the usual Try It Out function. Instead, you can use the Login Preview button to preview your saved
changes.

If you want to create a completely new login experience for your company, you can also create your own
custom login pages. For more information about how to do this, please contact us.

Login Footer Settings

Setting Purpose

Color scheme This is the color of the text and logo that appear in the.footer of the login page.

● Select Dark to use black text and logo.

● Select Light to use white text and logo.

Theme Manager
Theme Setting Details PUBLIC 51
Related Information

Creating a Theme [page 7]

Theme Manager
52 PUBLIC Theme Setting Details
External User Styles

External User Styles in Themes for SAP SuccessFactors

Learning

External user style theme attributes control the Learning Marketplace experience in SAP SuccessFactors Learning.

When users browse for Learning Marketplace courses, they browse in their storefront, which is built in SAP Hybris.
When they launch courses, however, the course is served from SAP SuccessFactors Learning. The frame around
the course content is controlled by external user style themes. You set the external user style themes so that users
have a seamless look and feel from the storefront to the launch of online content.

1. Editing Favicons [page 53]

You can use Theme Manager to configure and upload images for the favicon you want. There's an option to
use the standard SAP SuccessFactors logo or upload a new one.
2. Editing Your Footer Logo And Text [page 54]
You can use Theme Manager to configure and upload images and custom text for your footer. There's an
option to use the standard SAP SuccessFactors logo or upload a new one.
3. Verifying External User Theme [page 55]
You can log in as an external user to verify that your new theme are as an internal employee. You can verify
text, show version information, and languages for your footer.

Related Information

Editing Favicons [page 53]

Editing Your Footer Logo And Text [page 54]
Verifying External User Theme [page 55]

Editing Favicons

You can use Theme Manager to configure and upload images for the favicon you want. There's an option to use the
standard SAP SuccessFactors logo or upload a new one.

Context

Before proceeding, note that there are restrictions using favicon images:

Theme Manager
External User Styles PUBLIC 53
● Only .jpg, .jpeg, .png, .gif files are accepted.
● The File Uploader may crop your favicon from the center bottom if your file is too large.

Procedure

1. To upload a new image for your favicon, go to Admin Center Theme Manager External User Styles
Upload a favicon .

This opens up a Choose File browse dialog.

2. Select Browse to select your favicon from your hard drive.
3. Select Upload to finish.

Task overview: External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Next: Editing Your Footer Logo And Text [page 54]

Related Information

External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Editing Your Footer Logo And Text

You can use Theme Manager to configure and upload images and custom text for your footer. There's an option to
use the standard SAP SuccessFactors logo or upload a new one.

Context

Before proceeding, note that there are restrictions using images for footer logos:

● Only .jpg, .jpeg, .png, .gif files are accepted.

● The accepted size for the external theming logo is 185 pixels in width and 34 pixels in height. The File Uploader
crops any images larger than these dimensions.

Procedure

1. To Upload your Footer logo:

Theme Manager
54 PUBLIC External User Styles
 a. To upload a new image for your Footer logo, go to Admin Center Theme Manager External User Styles
Upload a logo .

The Choose File browse dialog opens up.

b. Select Browse to select your logo image from your hard drive.
c. Select Upload to finish.
2. To insert custom text into your Footer logo:

a. Admin Center Theme Manager External User Styles Footer text .

b. Expand the Footer Text section and add your custom text.

You can include HTML markup in the text.

 Example

"<a href="http://www.example.com">Company Website</a>".

c. Enter in this macro exactly as it is written "<!-- showVersionInfo -->" for the version information
that appears as part of your logo text.
d. Select the Globe icon near the Footer Text to launch the locale editor.
e. Enter in your footer text in the box for the language you want.

Task overview: External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Previous: Editing Favicons [page 53]

Next: Verifying External User Theme [page 55]

Related Information

External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Verifying External User Theme

You can log in as an external user to verify that your new theme are as an internal employee. You can verify text,
show version information, and languages for your footer.

Procedure

Log into External User Login page.

Theme Manager
External User Styles PUBLIC 55
Verification Steps for External Users

External User Styles Section Verification Steps

Footer Text You can verify by spot checking your pages. Please note that Options Page

1. Check every page to verify that your footer text appears correctly.
2. Verify that all html links included in your footer work.
3. Go to your footer and select the Show version information to verify that
the version info dialog box.

Locale Languages 1. Change external users language to one of the languages you added footer
text.
2. Verify that the language matches the footer text.

3. Go back to Admin Center Theme Manager External User Styles

Footer text .
4. Select the Globe icon near the Footer Text to launch the locale editor.
5. Change the languages for the external user to one that DOES not have a
footer entry for this theme.
6. Log back into the system as an external user, and check to see if the
footer text falls back to the default language.

 Remember
Default language unless otherwise specified is English.

 Note

If you want to test this theme as an internal employee, verify that the standard default copyright text is
displayed in the footer.

Task overview: External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Previous: Editing Your Footer Logo And Text [page 54]

Related Information

External User Styles in Themes for SAP SuccessFactors Learning [page 53]

Theme Manager
56 PUBLIC External User Styles
Theme Settings Used by the People Profile

Theme settings used for People Profile can be set using a number of different Fine Tune configuration categories
and sections. It is recommended if you are having issues, to refer to the topics that is correlated with specific
configuration category and sections using the Troubleshooting or Rainbow theme.

Theme Configuration Settings that Control People Profile

Here are the following Theme configuration settings under Fine Tune category that control theming for People
Profile:

● Menus
● Portlets

 Note

There are multiple theme configuration settings that control People Profile page. This statement is also true for
any SAP SuccessFactors application you can change themes for using Theme Manager.

Information Using Fine Tune Menu Theme Settings for People

Profile

You can use Fine-Tune Menus theme configuration settings to control the Action menu for People Profile.

Theme table have a column titled Location on Screenshot that contains number that references specific UI element
in that screenshot.

 Remember

This table does not list all theme configuration elements under Menus section, but only elements that control
People Profile.

Fine Tune Menus Theme Setting Information for People Profile Action Menu

Theme Configuration Cate­ Theme Configuration Sec­ Theme Configuration Ele­

Location on Screenshot gory tion ment

1 Fine Tune Menus Text color - default

2 Fine Tune Menus Text color - hover

Theme Manager
Theme Settings Used by the People Profile PUBLIC 57
 Theme Configuration Cate­ Theme Configuration Sec­ Theme Configuration Ele­
Location on Screenshot gory tion ment

3 Fine Tune Menus Menu item background color -

default

4 Fine Tune Menus Menu item background color -

hover

Screenshot of People Profile Actions Menus Controlled by Menus Configuration Section in Theme Manager

 Tip

You can troubleshoot theming issues using the Troubleshooting Theme, please refer to related links at the end
of this topic for more information.

Related Information

To Learn More About Using The Troubleshooting Theme:

Troubleshooting Theme Using Bright Colors
Legend for Fine Tune Menus

Theme Manager
58 PUBLIC Theme Settings Used by the People Profile
Portlet Theme Settings for People Profile

You can use Fine-Tune Portlets theme configuration section settings to control the text in the banner for
People Profile.

Theme table have a column titled Location on Screenshot that contains number that references specific UI element
in that screenshot.

 Remember

This table does not list all theme configuration elements under Portlets section, but only elements that control
People Profile.

Theme Settings Used for People Profile

Theme Configuration Cate­ Theme Configuration Sec­ Theme Configuration Ele­

Location on Screenshot gory tion ment

1 Fine Tune Portlets Header text color

2 Fine Tune Portlets Header background color

3 Fine Tune Portlets Body link text color

4 Fine Tune Portlets Text color - active

Screenshot of People Profile Theming Elements Controlled by Portlets Configuration Section in Theme Manager

Related Information

To Learn More About Using The Troubleshooting Theme:

Troubleshooting Theme Using Bright Colors
Legend for Fine Tune Portlets

Theme Manager
Theme Settings Used by the People Profile PUBLIC 59
Frequently Asked Questions about Theming

Answers to some of the most frequently asked questions about theming in the SAP SuccessFactors HXM Suite and
about how to use Theme Manager.

How do apply theming to the home page?

The home page is considered a "landing page." Landing pages can use the same theme settings as all other pages
or they can use a special theme, created just for landing pages.

To apply different theming to the home page, first select the theme you want to use. You can choose one of the
predefined base themes or you can create your own. Then go to your primary theme and use the Landing page
theme setting to select the theme you want to use for landing pages.

For the legacy home page only, you can also use Landing page tiles theme settings to apply theming to home page
tiles. To do that, go to your chosen landing page theme (and not to your primary theme). Then use the Landing
page tiles theme settings.

 Note

Landing page tiles theme settings are only used by the legacy home page. They aren't used by the latest home
page. You can apply theming to the latest home page using other theme settings, such as header and
background colors, but you can't apply theming to cards.

How do I change the colors the tab navigation bar on the People Profile?

The "tab navigation" bar in the People Profile header reflects the theme settings for "portlet headers" in Theme
Manager. Use the Header text color, Header link text color, and Header background color theme settings to change
the tab navigation bar.

Theme Settings Used by the Home Page [page 61]

Use these theme settings to control the look-and-feel of the home page.

Theme Manager
60 PUBLIC Frequently Asked Questions about Theming
Theme Settings Used by the Home Page

Use these theme settings to control the look-and-feel of the home page.

To do this... ...do this in Theme Manager:

Apply a different theme to the home page than is used by other 1. Choose a theme to use for the home page. It can be one of
pages. the predefined base themes or one you create.
2. Go to your primary theme and use the Landing page
theme setting to select the theme you want to use for the
home page.

Use the same theme on the home page as on other pages in Go to your primary theme and set the Landing page theme set­
the application. ting to Use this theme.

Change colors on the latest home page Use theme settings that apply to all pages, such as header,
logo, background, and placemat settings. To change the color

of section titles on the latest home page, use the Placemat

Page Title Color setting.

● If you use a different theme for landing pages, use the set­
tings in your landing page theme, not in your primary
theme.
● If you don't use a different theme for landing pages, use
the settings in your primary theme.

 Note
You can't change the color of cards on the latest home
page. Landing page tiles settings are only used by the leg­
acy home page.

Change colors on the legacy home page Use theme settings that apply to all pages, such as header,
logo, background, and placemat settings. To change the color
of tiles, use Landing page tiles theme settings.

● If you use a different theme for landing pages, use the

Landing page tiles settings in your landing page theme,
not in your primary theme.
● If you don't use a different theme for landing pages, use
the Landing page tiles settings in your primary theme.

Parent topic: Frequently Asked Questions about Theming [page 60]

Theme Manager
Frequently Asked Questions about Theming PUBLIC 61
Troubleshooting Theme Using Bright Colors

You can use the new Troubleshooting theme to identify correct theme settings or determine that it can be themed
by matching Rainbow Theme colors with specific UI elements. This troubleshooting theme is referred to as the
Rainbow Theme, due to the bright colors used.

Rainbow Colors

Troubleshooting or Rainbow Theme is a Cascading Style Sheet (CSS) saved as a text file. You can import this CSS
file using the Theme Sharing feature in Theme Manager.

This theme uses bright colors for all UI elements that are themed. You can use this theme in one of two ways:

● Determine if UI element is themed using an SAP SuccessFactors application.

 Note

The only UI that does not appear in a bright color is the background color for all footers. The footer appears
in silver.

● Matching colors with specific UI elements, so it can be identified.

Troubleshooting Theme using Rainbow Colors in Theme Preview

When selected, you can view the display within the Theme Preview page.

Theme Manager
62 PUBLIC Troubleshooting Theme Using Bright Colors
 Troubleshooting Theme When Using Theme Preview

UI Elements That Cannot Be Themed

The advantage to using the Rainbow Theme, is that anything that can be themed, appear as bright colors, and
should match what is identified in the legend.

Related Information

Creating a Bright Color Theme Import File for Troubleshooting [page 64]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 63
Creating a Bright Color Theme Import File for Troubleshooting

Copy the provided CSS code as a text file so that you can import it to create a brightly-colored troubleshooting
theme ("Rainbow Theme"). The CSS code has predefined colors to help you troubleshoot themes.

Procedure

1. Open up a text editing program such as notepad on your PC or laptop.

2. Copy the text:

 Source Code

accentColorBase=
background.baseColor=#C0C0C0
background.imageHorizontalPosition=center
background.imageOption=none
background.imageRepeat=repeat
background.imageVerticalPosition=top
background.lighting=none
background.texture=type1
background.url=
containerShadowColor=#666666
content.bgColor=#FFFFFF
content.iconScheme=
content.linkTextColor=#0072A3
content.textColor=#000000
description=Rainbow Theme is used to help troublehshoot themes either by
matching or identifying UI elements
diagram.backgroundColor=#FFFFFF
diagram.lineColor=#4B0082
diagram.negativeThresholdColor=#8B4513
diagram.neutralThresholdColor=#008000
diagram.paletteColor10=#778899
diagram.paletteColor1=#808000
diagram.paletteColor2=#FA8072
diagram.paletteColor3=#6495ED
diagram.paletteColor4=#FF8C00
diagram.paletteColor5=#7B68EE
diagram.paletteColor6=#ADFF2F
diagram.paletteColor7=#800000
diagram.paletteColor8=#DCC4B1
diagram.paletteColor9=#FF1493
diagram.positiveThresholdColor=#191970
diagram.primaryColor=#808080
diagram.textColor=#0000FF
diagram.titleColor=#000000
domain=
external.faviconOption=default
external.footerLogoOption=default
footer.logoScheme=light
footer.textColor=#DC143C
headerBackground.baseColor=#800000
headerBackground.bgOption=color
headerBackground.imageHorizontalPosition=center
headerBackground.imageRepeat=no-repeat
headerBackground.imageVerticalPosition=top
headerBackground.styleOption=placemat
highlight.bgColor=#38AFEE
highlight.iconScheme=light

Theme Manager
64 PUBLIC Troubleshooting Theme Using Bright Colors
 highlight.linkTextColor=#FFFFFF
highlight.textColor=#000000
landingPage.themeId=null
landingPageTile.alertTextColor=#B22222
landingPageTile.bgColor=#AFEEEE
landingPageTile.bodyTextColor=#DA70D6
landingPageTile.borderColor=#000000
landingPageTile.borderOpacity=0.1
landingPageTile.criticalTextColor=#DAA520
landingPageTile.headerTextColor=#F08080
landingPageTile.iconColor=#CD5C5C
landingPageTile.neutralTextColor=#FFD700
landingPageTile.progressIndicatorColor=#1E90FF
login.autofillBgColor=
login.background.backgroundType=light
login.background.baseColor=#E6E6FA
login.background.imageHorizontalPosition=left
login.background.imageRepeat=repeat
login.background.imageVerticalPosition=top
login.background.option=none
login.background.overlayOpacity=0
login.background.overlayOption=none
login.footerScheme=dark
login.logo.option=default
login.logo.systemType=type1
login.primaryButton.bgColor=
login.primaryButton.borderColor=
login.primaryButton.borderWidth=
login.primaryButton.disabledBgColor=
login.primaryButton.disabledBorderColor=
login.primaryButton.disabledTextColor=
login.primaryButton.hoverBgColor=
login.primaryButton.hoverBorderColor=
login.primaryButton.hoverTextColor=
login.primaryButton.textColor=
login.primaryButtonOption=theme
logo.backdropColor=#FFFFFF
logo.position=right
logo.useBackdrop=true
logo.width=210
menu.activeBgColor=#9370DB
menu.activeTextColor=#0000FF
menu.bgColor=#FFFFFF
menu.hoverBgColor=#B0E0E6
menu.hoverBgColorDisabled=#F1F9FA
menu.hoverTextColor=#FF00FF
menu.textColor=#000000
menu.textColorDisabled=#595959
modulePicker.activeHeaderBgColor=#808000
modulePicker.activeHeaderTextColor=#FFFFFF
modulePicker.headerTextColor=#FF0000
modulePicker.hoverHeaderBgColor=#008000
modulePicker.hoverHeaderTextColor=#00FFFF
navigation.activeTextColor=#FFFFFF
navigation.allowCondensedView=false
navigation.hoverTextColor=#FFA500
navigation.textColor=#00FF00
pageTitleColor=#FFFF00
placemat.backgroundType=dark
placemat.bgColor=#008080
placemat.borderColor=#8B008B
placemat.opacity=0.9
placemat.selectedTabColor=#80E3FF
placemat.useShadow=true
portlet.alertTextColor=#FF6347
portlet.bodyBackgroundColor=#FFFFFF
portlet.bodyLinkTextColor=#800080
portlet.bodyTextColor=#000000

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 65
 portlet.calloutTextColor=#00FF7F
portlet.custom1TextColor=#4682B4
portlet.custom2TextColor=#87CEEB
portlet.dimmedTextColor=#708090
portlet.headerBgColor=#191970
portlet.headerLinkTextColor=#DDA0DD
portlet.headerTextColor=#FFFFFF
portlet.sidebarColor=#8FBC8F
portlet.sidebarLinkTextColor=#A52A2A
portlet.sidebarTextColor=#000000
portletCloseIconScheme=light
primaryButton.bgColor=#2F4F4F
primaryButton.borderColor=#4B0082
primaryButton.borderWidth=0 0 1px 0
primaryButton.disabledBgColor=#20B2AA
primaryButton.disabledBorderColor=#FF4500
primaryButton.disabledTextColor=#E0FFFF
primaryButton.hoverBgColor=#ADFF2F
primaryButton.hoverBorderColor=#F08080
primaryButton.hoverTextColor=#FF1493
primaryButton.textColor=#00CED1
searchBackgroundScheme=dark
secondaryButton.bgColor=#D3DADF
secondaryButton.borderColor=#C0C7CC
secondaryButton.borderWidth=0 0 1px 0
secondaryButton.disabledBgColor=#DAE2E6
secondaryButton.disabledBorderColor=#DAE2E6
secondaryButton.disabledTextColor=#B4B4B4
secondaryButton.hoverBgColor=#C0C7CC
secondaryButton.hoverBorderColor=#C0C7CC
secondaryButton.hoverTextColor=#222222
secondaryButton.textColor=#222222
table.altRowBgColor=#98FB98
table.disabledRowCellBgColor=#4169E1
table.headerBgColor=#FFDAB9
table.headerTextColor=#DA70D6
table.hoverRowBgColor=#EEE8AA
table.linkColor=#0072A3
table.rowBgColor=#FFFFFF
table.selectedRowBgColor=#F4A460
table.selectedSortedRowBgColor=#D2691E
table.sortCellBgColor=#D3D3D3
table.textColor=#222222
tile.accentBodyBGColor=#4682B4
tile.accentBodyIconScheme=light
tile.accentBodyTextColor=#FFFFFF
tile.accentHeaderIconScheme=light
tile.accentHeaderLinkColor=#FFFFFF
tile.accentHeaderTextColor=#000000
tile.accentLinkColor=#FFFFFF
tile.alertBadgeBGColor=#FF0000
tile.alertBadgeTextColor=#00FF00
tile.alertTextColor=#FF6347
tile.bodyBGColor=#FFF8DC
tile.bodyIconScheme=dark
tile.bodyTextColor=#000000
tile.groupTitleBGColor=#BC8F8F
tile.groupTitleTextColor=#000080
tile.headerBGColor=#FF8C00
tile.headerIconScheme=dark
tile.headerLinkColor=#8FBC8F
tile.headerTextColor=#9932CC
tile.highlightColor=#FFF5EE
tile.linkColor=#556B2F
useContainerShadowColor=true
useDownloadableFonts=true
useModernStylesInLegacy=true

Theme Manager
66 PUBLIC Troubleshooting Theme Using Bright Colors
 useTextShadow=false

3. Paste text into your text editing program.

4. Save as a .txt file on your PC.

Next Steps

You are now ready to import your theme. See related links to learn more on how to import your troubleshooting
theme text file.

Related Information

Troubleshooting Theme Using Bright Colors [page 62]

How to Import Your Troubleshooting Theme
Importing Your Theme [page 14]

Troubleshooting Theme Legend

You can use the different Troubleshooting theme legends to determine which components can be themed and how
to map the colors with specific UI elements in Theme Preview.

Using Legend Tables

All troubleshooting theme tables for every Theme Configuration Category and Theme Configuration Section has a
column titled Location on Screenshot that corresponds with a number on the screenshot for that specific UI
element.

There are tables for these Theme Configuration Categories:

● Quick Theme
● Fine Tune
● Login Styles

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 67
Troubleshooting Theme Legend for Quick Themes

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Quick Theme category.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Quick Themes

Theme Config­ Theme Config­

Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

1 Quick Theme N/A Page back­ #C0C0C0 Silver

ground color

Troubleshooting Theme Uses Rainbow Colors for Quick Theme

Troubleshooting Theme Legend for Fine Tune Category

You can use this troubleshooting theme with rainbow colors legend to determine which components can be
themed and how to map the colors with specific elements in Theme Preview for the Fine Tune category.

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Header background, Logo, and
Placemat sections.

Legend for Fine Tune Module Picker [page 72]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Module picker section.

Legend for Fine Tune Menus [page 74]

Theme Manager
68 PUBLIC Troubleshooting Theme Using Bright Colors
 You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Menus section.

Legend for Fine Tune Global Navigation [page 75]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Global navigation section.

Legend for Fine Tune Portlets [page 77]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Portlets section.

Legend For Fine Tune Landing Page Tiles [page 78]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Landing page tiles section.

Legend for Fine Tune Primary Buttons [page 82]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Primary buttons section.

Legend For Fine Tune Highlight Elements [page 85]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Highlight elements section.

Legend for Fine Tune Tables [page 86]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Tables section.

Legend for Fine Tune Diagrams and Footer [page 87]

You can use this legend to determine which components can be themed and how to map the colors with
specific elements in Theme Preview for the Fine Tune category and for the Diagrams and Footer sections.

Legend for Fine Tune For Header Background, Logo, and

Placemat

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Header background, Logo, and Placemat
sections.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 69
Troubleshooting Legend for Header Background, Logo, and Placemat

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Header background Header background #800000 Maroon

color
 Note
Colors com­
bine if both of
are active:

● Fine

Tune
Module

Picker
Backgroun
d color -

active

● Fine

Tune
Module

Picker
Backgroun
d color -

hover

2 Fine Tune Logo Background color #FFFFFF White

3 Fine Tune Placemat Page title color #FFFF00 Yellow

4 Fine Tune Placemat Background color #008080 Teal

5 Fine Tune Placemat Border color #8B008B Dark Magenta

Theme Manager
70 PUBLIC Troubleshooting Theme Using Bright Colors
 Troubleshooting Theme Rainbow Colors for Header background, Logo, and Placemat

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune Module Picker [page 72]

Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 71
Legend for Fine Tune Diagrams and Footer [page 87]

Legend for Fine Tune Module Picker

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Module picker section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Module picker

Theme Config­ Theme Config­

Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

1 Fine Tune Module picker Label text color #FF0000 Red

- default

2 Fine Tune Module picker Label text color #00FFFF Aqua

- hover

Not featured in Fine Tune Module picker Label text color #FFFFFF White
screenshot - active

3 Fine Tune Module picker Background #808000 Olive

color - active

Theme Manager
72 PUBLIC Troubleshooting Theme Using Bright Colors
 Theme Config­ Theme Config­
Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

4 Fine Tune Module picker Background #008000 Green

color - hover
 Note
Combines col­
ors with:

● Fine

Tune
Backgroun

d Header
backgroun

d color

● Fine

Tune
Module

Picker
Backgroun
d color -

active

Troubleshooting Theme Screenshot for Module picker

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 73
Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Legend for Fine Tune Menus

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Menus section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Fine Tune Menus

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Menus Text color - default #000000 Black

2 Fine Tune Menus Text color - hover #FF00FF Fuchsia

Not Featured in Fine Tune Menus Text color - active #0000FF Blue
screenshot

3 Fine Tune Menus Menu item #FFFFFF White

background color -
default

4 Fine Tune Menus Menu item #B0E0E6 Powder Blue

background color -
hover

Not Featured in Fine Tune Menus Menu item #9370DB Medium Purple
screenshot background color -
active

Theme Manager
74 PUBLIC Troubleshooting Theme Using Bright Colors
 Troubleshooting Theme Screenshot for Fine Tune Menus

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Legend for Fine Tune Global Navigation

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Global navigation section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 75
Troubleshooting Theme Legend for Global navigation section

Theme Config­ Theme Config­

Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

1 Fine Tune Global navigation Text color - #00FF00 Lime Green

default

2 Fine Tune Global navigation Label text color #FFA500 Orange

- hover

3 Fine Tune Global navigation Label text color #FFFFFF White

- current page

Troubleshooting Theme Rainbow Colors in Screenshot for Global navigation

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Theme Manager
76 PUBLIC Troubleshooting Theme Using Bright Colors
Legend for Fine Tune Portlets

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Portlets section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for the Portlets Section

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Portlets Header text color #FFFFFF White

2 Fine Tune Portlets Header link text #DDA0DD Plum

color

3 Fine Tune Portlets Header background #191970 Midnight Blue

color

4 Fine Tune Portlets Body text color #000000 Black

5 Fine Tune Portlets Body link text color #800080 Purple

6 Fine Tune Portlets Sidebar text color #000000 Black

7 Fine Tune Portlets Sidebar link text #A52A2A Brown

color

8 Fine Tune Portlets Sidebar #8FBC8F Dark Sea Green

background color

9 Fine Tune Portlets Dimmed Text Color #708090 Slate Gray

10 Fine Tune Portlets Alert text color #FF6347 Tomato

11 Fine Tune Portlets Callout Text Color #00FF7F Spring Green

12 Fine Tune Portlets Custom 1 Text Color #4682B4 Steel Blue

13 Fine Tune Portlets Custom 2 Text #87CEEB Sky Blue

Color

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 77
 Troubleshooting Theme Rainbow Colors in Screenshot for Fine Tune Portlets

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Legend For Fine Tune Landing Page Tiles

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Landing page tiles section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Theme Manager
78 PUBLIC Troubleshooting Theme Using Bright Colors
Troubleshooting Theme Legend for the Landing page tiles Section

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Landing page tiles Body background #AFEEEE Pale Turquoise
color

Not featured in Fine Tune Landing page tiles Border color #000000 Black
screenshot

2 Fine Tune Landing page tiles Header text color #F08080 Light Coral

3 Fine Tune Landing page tiles Tile body text color #DA70D6 Orchid

4 Fine Tune Landing page tiles Icon color #CD5C5C Indian Red

5 Fine Tune Landing page tiles Neutral text color #FFD700 Gold

6 Fine Tune Landing page tiles Alert text color #B22222 Firebrick

Not featured in Fine Tune Landing page tiles Critical text color #DAA520 Goldenrod
screenshot

7 Fine Tune Landing page tiles Progress indicator #1E90FF Dodger Blue
color

Troubleshooting Theme Rainbow Colors in Screenshot for Landing page tiles

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 79
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

V12 Tiles

Legend for Fine Tune V12 Default and Alert Tiles

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for V12 tiles - default tiles and V12 tiles - Tile alerts
sections.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Table for V12 tiles - default tiles and V12 tiles - Tile alerts sections

Theme Config­ Theme Config­

Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

1 Fine Tune V12 tiles - default tiles Header text #9932CC Dark Orchid
color

2 Fine Tune V12 tiles - default tiles Header link text #8FBC8F Dark Sea Green
color

3 Fine Tune V12 tiles - default tiles Header #FF8C00 Dark Orange
background
color

4 Fine Tune V12 tiles - default tiles Tile body text #000000 Black
color

5 Fine Tune V12 tiles - default tiles Link color #556B2F Dark Olive Green

6 Fine Tune V12 tiles - default tiles Body #FFF8DC Cornsilk

background
color

Theme Manager
80 PUBLIC Troubleshooting Theme Using Bright Colors
 Theme Config­ Theme Config­
Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

7 Fine Tune V12 tiles - default tiles Group text #000080 Navy
color

8 Fine Tune V12 tiles - default tiles Group #BC8F8F Rosy Brown
background
color

9 Fine Tune V12 tiles - default tiles Tile body #FFF5EE Seashell
highlight color

10 Fine Tune V12 tiles - Tile alerts Alert text color #FF6347 Tomato

11 Fine Tune V12 tiles - Tile alerts Alert badge text #00FF00 Lime
color

12 Fine Tune V12 tiles - Tile alerts Alert badge #FF0000 Red
background
color

Troubleshooting Theme Rainbow Colors in Screenshot for V12 tiles - default tiles and V12 tiles - Tile alerts

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 81
Legend for Fine Tune V12 Accent Tiles

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the V12 tiles - Accent tiles section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for V12 tiles - Accent tiles.

Theme Config­ Theme Config­

Location on uration Cate­ Theme Configuration Sec­ uration Ele­
Screenshot gory tion ment Color Picker Code Color

1 Fine Tune V12 tiles - Accent tiles Accent header #000000 Black
text color

2 Fine Tune V12 tiles - Accent tiles Accent Header #FFFFFF White
link text color

3 Fine Tune V12 tiles - Accent tiles Accent body #FFFFFF White
text color

4 Fine Tune V12 tiles - Accent tiles Accent link #FFFFFF White
color

5 Fine Tune V12 tiles - Accent tiles Accent body #4682B4 Steel Blue
background
color

Troubleshooting Theme Rainbow Colors in Screenshot for V12 tiles - Accent tiles

Legend for Fine Tune Primary Buttons

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Primary buttons section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Theme Manager
82 PUBLIC Troubleshooting Theme Using Bright Colors
Troubleshooting Theme Legend for Primary buttons

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Primary buttons Text color - default #00CED1 Dark Turquoise

2 Fine Tune Primary buttons Text color - hover #FF1493 Deep Pink

3 Fine Tune Primary buttons Background color - #2F4F4F Dark Slate Gray
default

4 Fine Tune Primary buttons Background color - #ADFF2F Green Yellow

hover

5 Fine Tune Primary buttons Border color - #4B0082 Indigo

default

6 Fine Tune Primary buttons Border color - hover #F08080 Light Coral

7 Fine Tune Primary buttons Disabled text color #E0FFFF Light Cyan

8 Fine Tune Primary buttons Disabled #20B2AA Light Sea Green

background color

9 Fine Tune Primary buttons Disabled border #FF4500 Orange Red

color

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 83
 Troubleshooting Theme Rainbow Colors in Screenshot for Primary buttons

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Theme Manager
84 PUBLIC Troubleshooting Theme Using Bright Colors
Legend For Fine Tune Highlight Elements

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Highlight elements section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Highlight elements

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Highlight elements Background color #38AFEE Blue

2 Fine Tune Highlight elements Text color #000000 Black

3 Fine Tune Highlight elements Link color #FFFFFF White

4 Fine Tune Highlight elements Header button icon Light White

Troubleshooting Theme Rainbow Colors in Screenshot for Highlight elements

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 85
Legend for Fine Tune Tables [page 86]
Legend for Fine Tune Diagrams and Footer [page 87]

Legend for Fine Tune Tables

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Tables section.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Fine Tune Tables

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Tables Header text color #DA70D6 Orchid

2 Fine Tune Tables Header background #FFDAB9 Peach Puff

color

3 Fine Tune Tables Row background #FFFFFF White

color - default

4 Fine Tune Tables Row background #98FB98 Pale Green

color - alternative

5 Fine Tune Tables Row background #EEE8AA Pale Golden Rod

color - hover

6 Fine Tune Tables Row background #F4A460 Sandy Brown

color - selected

7 Fine Tune Tables Row background #4169E1 Royal Blue

color - disabled

8 Fine Tune Tables Cell background #D3D3D3 Light Gray

color - sorted

9 Fine Tune Tables Cell background #D2691E Chocolate

color - selected and
sorted

Theme Manager
86 PUBLIC Troubleshooting Theme Using Bright Colors
 Troubleshooting Theme Rainbow Colors in Screenshot for Fine Tune Tables Section

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Diagrams and Footer [page 87]

Legend for Fine Tune Diagrams and Footer

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Fine Tune category and for the Diagrams and Footer sections.

 Note

All troubleshooting theme tables have a column titled Location on Screenshot that contain number that
references specific UI element in that screenshot.

Troubleshooting Theme Legend for Diagrams and Footer Sections

Location on Theme Configura­ Theme Configura­ Theme Configura­

Screenshot tion Category tion Section tion Element Color Picker Code Color

1 Fine Tune Diagrams Primary Color #808080 Gray

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 87
Location on Theme Configura­ Theme Configura­ Theme Configura­
Screenshot tion Category tion Section tion Element Color Picker Code Color

2 Fine Tune Diagrams Text color #0000FF Blue

3 Fine Tune Diagrams Title Color #000000 Black

4 Fine Tune Diagrams Line Color #4B0082 Indigo

5 Fine Tune Diagrams Background color #FFFFFF White

No Positive values Fine Tune Diagrams Positive Threshold #191970 Midnight Blue
featured in Line Color
Chart

No Neutral values Fine Tune Diagrams Neutral Threshold #008000 Green

featured in Line Color
Chart

6 Fine Tune Diagrams Negative Threshold #8B4513 Saddle Brown

Color

7 Fine Tune Diagrams - Color Color 1 #808000 Olive

Scheme

8 Fine Tune Diagrams - Color Color 2 #FA8072 Salmon

Scheme

9 Fine Tune Diagrams - Color Color 3 #6495ED Cornflower Blue

Scheme

10 Fine Tune Diagrams - Color Color 4 #FF8C00 Dark Orange

Scheme

11 Fine Tune Diagrams - Color Color 5 #7B68EE Medium Slate Blue

Scheme

12 Fine Tune Diagrams - Color Color 6 #ADFF2F Green Yellow

Scheme

13 Fine Tune Diagrams - Color Color 7 #800000 Maroon

Scheme

14 Fine Tune Diagrams - Color Color 8 #DCC4B1 Burly Wood

Scheme

15 Fine Tune Diagrams - Color Color 9 #FF1493 Deep Pink

Scheme

16 Fine Tune Diagrams - Color Color 10 #778899 Light Slate Gray

Scheme

Theme Manager
88 PUBLIC Troubleshooting Theme Using Bright Colors
Location on Theme Configura­ Theme Configura­ Theme Configura­
Screenshot tion Category tion Section tion Element Color Picker Code Color

17 Fine Tune Footer Text color #DC143C Crimson

Different Type of Diagrams

The three type of Diagrams that feature Troubleshooting Theme rainbow colors:

● Column Chart
● Pie Chart
● Plot Chart

Troubleshooting Theme Rainbow Colors in Screenshot for Diagrams and Footer

Parent topic: Troubleshooting Theme Legend for Fine Tune Category [page 68]

Related Information

Legend for Fine Tune For Header Background, Logo, and Placemat [page 69]
Legend for Fine Tune Module Picker [page 72]
Legend for Fine Tune Menus [page 74]
Legend for Fine Tune Global Navigation [page 75]
Legend for Fine Tune Portlets [page 77]
Legend For Fine Tune Landing Page Tiles [page 78]
Legend for Fine Tune Primary Buttons [page 82]
Legend For Fine Tune Highlight Elements [page 85]
Legend for Fine Tune Tables [page 86]

Theme Manager
Troubleshooting Theme Using Bright Colors PUBLIC 89
Legend for Login Styles

You can use this legend to determine which components can be themed and how to map the colors with specific
elements in Theme Preview for the Login Styles category and for the Login background, Login button and Login
border sections.

Troubleshooting Theme Legend for Login Styles Category

Location on Theme Configura­ Theme Configura­ Theme Configura­ Color Picker Code
Screenshot tion Category tion Section tion Element or Settings Color

1 Login Styles Login background Background color #E6E6FA Lavender

2 Login Styles Login background Background type Light N/A

3 Login Styles Login button Login button Use this theme's N/A
settings

4 Login Styles Login footer Color Scheme Dark N/A

Troubleshooting Theme Rainbow Colors in Screenshot for Login Styles

Theme Manager
90 PUBLIC Troubleshooting Theme Using Bright Colors
Important Disclaimers and Legal Information

Hyperlinks
Some links are classified by an icon and/or a mouseover text. These links provide additional information.
About the icons:

● Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you agree (unless expressly stated otherwise in your agreements
with SAP) to this:

● The content of the linked-to site is not SAP documentation. You may not infer any product claims against SAP based on this information.
● SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the availability and correctness. SAP shall not be liable for any
damages caused by the use of such content unless damages have been caused by SAP's gross negligence or willful misconduct.

● Links with the icon : You are leaving the documentation for that particular SAP product or service and are entering a SAP-hosted Web site. By using such links, you
agree that (unless expressly stated otherwise in your agreements with SAP) you may not infer any product claims against SAP based on this information.

Videos Hosted on External Platforms

Some videos may point to third-party video hosting platforms. SAP cannot guarantee the future availability of videos stored on these platforms. Furthermore, any
advertisements or other content hosted on these platforms (for example, suggested videos or by navigating to other videos hosted on the same site), are not within the
control or responsibility of SAP.

Beta and Other Experimental Features

Experimental features are not part of the officially delivered scope that SAP guarantees for future releases. This means that experimental features may be changed by SAP at
any time for any reason without notice. Experimental features are not for productive use. You may not demonstrate, test, examine, evaluate or otherwise use the
experimental features in a live operating environment or with data that has not been sufficiently backed up.
The purpose of experimental features is to get feedback early on, allowing customers and partners to influence the future product accordingly. By providing your feedback
(e.g. in the SAP Community), you accept that intellectual property rights of the contributions or derivative works shall remain the exclusive property of SAP.

Example Code
Any software coding and/or code snippets are examples. They are not for productive use. The example code is only intended to better explain and visualize the syntax and
phrasing rules. SAP does not warrant the correctness and completeness of the example code. SAP shall not be liable for errors or damages caused by the use of example
code unless damages have been caused by SAP's gross negligence or willful misconduct.

Gender-Related Language
We try not to use gender-specific word forms and formulations. As appropriate for context and readability, SAP may use masculine word forms to refer to all genders.

Theme Manager
Important Disclaimers and Legal Information PUBLIC 91
www.sap.com/contactsap

© 2021 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form

or for any purpose without the express permission of SAP SE or an SAP
affiliate company. The information contained herein may be changed
without prior notice.

Some software products marketed by SAP SE and its distributors

contain proprietary software components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for

informational purposes only, without representation or warranty of any
kind, and SAP or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP or
SAP affiliate company products and services are those that are set forth
in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an
additional warranty.

SAP and other SAP products and services mentioned herein as well as
their respective logos are trademarks or registered trademarks of SAP
SE (or an SAP affiliate company) in Germany and other countries. All
other product and service names mentioned are the trademarks of their
respective companies.

Please see https://www.sap.com/about/legal/trademark.html for

additional trademark information and notices.

THE BEST RUN