CASE STUDY

UI Theme Designer
This case study explains the UI Theme Designer, which is used to design
the Fiori Launchpad.

Product MOTIVATION PREREQUISITES

SAP S/4HANA 1809 The purpose of this document is There are no necessary prequeries
Fiori 2.0 for this case study.
that you become familiar with
Level the UI Theme Designer. NOTES
Beginner The UI Theme Designer lets
you apply your corporate
Focus branding to applications built
with SAP UI technologies.
Autors
Babett Ruß
Denise Windheuser

Version
3.3

Last Update
Juli 2019

© SAP UCC Magdeburg

 Case Study

Introduction to the UI Theme Designer

Learning Objective Understanding the UI Theme Designer to Time 130 Min.

create a custom theme.
Scenario You will learn how to design a custom theme with the
UI Theme Designer.

What is the UI Theme Designer?

The UI Theme Designer is a browser-based tool for cross theming scenarios.
Its build on the principle WYSIWYG (what you see is what you get).
Apply your corporate branding and look to applications built with SAP UI
technologies. You can for example change the color scheme, add background images
and add your company logo.

Key features and benefits:

 Browser-based, graphical WYSIWYG editor:
Change the values of theming parameters and immediately see how it affects
the visualization of the selected preview page.
 Build-in preview pages:
Select built-in preview pages to see what your custom theme will look like
when it is applied to an application:
o Application previews (for example, Purchase Order Approval, SAP
Fiori launchpad)
o Control previews
 Different levels of theming:
o Quick theming (basic cross-technology theme settings)
o Expert theming (technology-specific theme settings)
o Manual LESS or CSS editing
 Color palette for reuse:
Specify a set of parameters with the main color values defining your corporate
branding
 Cross-technology theming:
Create one consistent theme that applies to various SAP UI clients and
technologies:
o SAPUI5 standard libraries (including SAP Fiori applications and SAP
Fiori launchpad)
o Unified Rendering technologies (such as Web Dynpro ABAP and
Floorplan Manager)
o SAP NetWeaver Business Client

For who is the UI Theme Designer?

The tool is for developers, visual designers and administrators. It offers support for
different skill levels: from simple parameters to expert theming and CSS editor.

What is a theme?

© SAP UCC Magdeburg Page 2

 Case Study

A theme defines the visual appearance of an application, including font size and type,
colors of UI controls and background images. It can be applied to an application to
suit the purpose, topic, or tastes of different users.
A custom theme is a new theme adapted from an SAP standard theme that includes
changes desired by a customer. A custom theme is typically created using the UI
theme designer to change theme parameter values, images, and other resources. The
UI theme designer generates the CSS for the custom theme which can then be
deployed to the target server along with any uploaded images or other resources. The
degree of support for the custom theme depends on the features used. Themes may
support one or more UI technologies.

Technical Information
The following graphic shows the SAP Fiori Launchpad architecture with the UI
Theme Designer.

Use of different Tools

In this case study you will work with three different kind of tools. The SAP GUI, the
UI Theme Designer and the Fiori Launchpad. To not confuse you there is a color code
to mark which tool you need to use for the next steps.
The color coding is as follows:

SAP GUI

Fiori Launchpad
https://<SID>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-
client=<XXX>&sap-language=en
If you are working with the system A20 and client 200 your link would be
https://a20z.ucc.ovgu.de/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sa
p-client=200&sap-language=en

© SAP UCC Magdeburg Page 3

 Case Study

UI Theme Designer
https://<SID>/sap/bc/theming/theme-designer?sap-client=<XXX>
If you are working with the system A20 and client 200 your link would be
https://a20z.ucc.ovgu.de/sap/bc/theming/theme-designer?sap-client=200

© SAP UCC Magdeburg Page 4

 Case Study

Table of contents
Introduction to the UI Theme Designer 2
Step 1: Logging into the UI Theme Designer 6
Step 2: Creating a custom theme 10
Step 3: Getting familiar with the UI Theme Designer 16
Step 4: Using Quick Theming 21
Step 5: Use Expert Theming 27
Step 6: Saving colors for later use 31
Step 7: Set up your Company Logo 34
Step 8: Adding background images I 37
Step 9: Adding background images II 39
Step 10: Change the Tile of the Launchpad 43
Step 11: Changing the default theme 46

© SAP UCC Magdeburg Page 5

 Case Study

Step 1: Logging into the UI Theme Designer

Task Log into the UI Theme Designer Time 10 Min.

Short Description In this step you will learn where and how you
can log into the UI Theme Designer.

The UI Theme Designer can be launched by running the transaction code in the SAP
GUI of your gateway system.

Log in to the SAP GUI with the user and password assigned by your
lecturer.

Use the transaction code /n/ui5/theme_designer to be directed to the UI Theme

Designer.

A pop up appears with the link to the UI Theme Designer.

© SAP UCC Magdeburg Page 6

 Case Study

In the SAP GUI Security pop up choose .

Note If you don’t want to get this message again select Remember My Decision
.

You will be redirected to the UI Theme Designer site in your browser.

Log into the UI Theme Designer with the user and password
assigned to you by your lecturer.

The UI Theme Designer looks as follows.

© SAP UCC Magdeburg Page 7

 Case Study

The navigation bar consists of Theme, Help and username.

Under you have the option to create a new theme. After opening a theme
you can also save and build your current theme.

Click on on the left of the navigation bar. You can see that it provides a link
to the help docs as well as access to the logs. Under About you find technical
information about your UI Theme Designer.

Under About find out what you are using:

Version: _________________

© SAP UCC Magdeburg Page 8

 Case Study

SAPUI5 Version: _________________

What can be found under Location?
___________________________________________________

On the right side of the navigation bar you find the user to log of.

Under Actions you have the option to create new themes.

In the section Available Custom Themes all from you

created themes are listed.

Since you haven’t created any theme yet there are no data entries in the table.

In the search field you can search for a theme by Title, ID, Vendor and by the theme its
based on. You will learn about base themes in a later step.

In the next step you will learn how to create a custom theme.

© SAP UCC Magdeburg Page 9

 Case Study

Step 2: Creating a custom theme

Task Create your first custom theme. Time 15 Min.

Short Description In this step you will learn how to create your
own custom theme.

When creating your custom theme you can for example use the color scheme of your
company or your company logo. This way you can apply your corporal branding to
your Fiori Launchpad and the applications in it.

The following graphic shows the steps to build a theme using the UI Theme
Designer.

1. Use the Create New Theme wizard to create a new custom theme based on a SAP
theme. Or import an existing theme to edit it.
2. Add target content for the preview page.
3. Define palette parameters for reuse (this step is optional).
4. Adjust the theme that you created by:
a. Changing basic theme parameters.
b. Changing technology-specific parameters (optional).
c. Adding custom LESS or CSS (optional).
5. Save your theme.
6. Publish your theme to make it available for use.

In the UI Theme Designer create a new theme.

To create a new theme click on . This will open the Create

New Theme wizard.

© SAP UCC Magdeburg Page 10

 Case Study

In the first step you have to choose the base theme from the theme list.

The base theme is the foundation of the design you want to edit. To not have the
necessity of starting a theme from scratch you create a new custom theme based on
an already existing sap theme. Which you then adjust for customization.

Pick SAP Belize as base theme.

Note The following link gives brief information about some standard themes:
https://help.sap.com/viewer/8ec2dae34eb44cbbb560be3f9f1592fe/7.52.1/en-
US/8c37f394f895469cac9b957744d781a1.html

Click on to give your new theme a name.

You have to give your new theme a technical name (ID) which needs to be unique.
And a title, any name of your choice.

Note The theme ID will be needed to later reference your theme.

As theme ID fill in LEARN###Theme and for title My first theme ###.

© SAP UCC Magdeburg Page 11

 Case Study

Select .

Here you can add a Vendor like for example the name of the organization who
creates the theme. Additional you can select the support for RTL (right-to-left
languages).

Note Be aware that if you select RTL support additional style sheets ate created by
the system and you could have performance issues.

Leave everything empty.

© SAP UCC Magdeburg Page 12

 Case Study

Now click on to create your first theme.

Note When creating a new theme you don’t have to do step 2 and 3. Instead you can

just choose your base theme and then select . You can later edit the
misssing information.

The Create New Theme wizard closes and you will be directed to the Editor screen.

© SAP UCC Magdeburg Page 13

 Case Study

As you can see everything is still empty. In the next step you will add target pages.

The navigation bar has already been explained in the previous step. But as already
mentioned when having selected a theme for editing you have different options under
Theme .

Now Theme provides you with the option to create a new theme or save and build the
current theme. As well as close the current theme.

Click on . Here you can edit the theme properties defined in the Create
Theme wizard.

Don’t change anything. Click on .

Note There are several ways to save a theme.

© SAP UCC Magdeburg Page 14

 Case Study

You can either simply Save it. Only the first time you save a new theme a pop up will
appear to ask about general data as seen below.
Or you can choose Save as… this way you can assign it ID and titel, as well as Vendor.
The third option is to Save & Build a theme.

Don’t forget to save the theme. Go herefore under Theme► Save.

In the pop up make sure all data is correct then click on .

A pop up will appear that you have succesfully saved the theme.

To get back to the homepage. Click on Theme ► Close.

© SAP UCC Magdeburg Page 15

 Case Study

Step 3: Getting familiar with the UI Theme Designer

Task Get familiar with the UI Theme Designer Time 10 Min.

Short Description In this step you will be getting familiar with
the UI Theme Designer.

Before you start to make adjustments to the theme you should get familiar with the
UI Theme Designer itself.

Open the UI Theme Designer.

As you can see the newly created theme has been added under Themes.

Note You can see a warning under status. This appears because your theme has
not yet been built.

As we now have a theme you can see new buttons. Here you can edit, rebuild, delete,
supplicate or rename your selected theme.

You want to change your custom theme. Make sure your new theme is selected then
click on .

© SAP UCC Magdeburg Page 16

 Case Study

The editing view is separated in three parts the Left Pane, the Preview Pane and the
Right Pane (currently hidden only the theming toolbar shown). The Preview Pane
will be explained in the next step.

The Left Pane:

Since you just created a new theme your left pane will still be empty.

As you can see in the picture there are three categories of traget pages:
 Applications: Applications that have been loaded into the UI Theme Designer,
based on different UI technologies (e.g. Fiori Launchpad).
 UI5 Control Previews: Pages related to a specific control.
 And UI5 Application Previews: Application that run in the same domain as
the UI Theme Designer.
There are additional Categories for the sample applications.

The Add button allows additional target pages to be loaded for the preview.

© SAP UCC Magdeburg Page 17

 Case Study

You already see the Add Taget Pages in the Preview Pane. If this is not the case click
on in the Left Pane.

Note After having selected a theme you want to customize it. To be able to preview
any changes you need to add target content (pages and applications). This allows you
to see how the changes you make look in differen UI technologies.

If you have a specific application you want to change the design for you enter the
URL of the application under Link to Application.

You will in a later step add an applicatin by Link.

As you can see there are already test suites for you to try out.

Note The previews available in the Add Target Pages section depend on the base
theme that you selected.

Click on UR Application Previews. There select PurchaseOrder.

As you can see PurchaseOrder is added in the Left Pane.

© SAP UCC Magdeburg Page 18

 Case Study

Click on Quick Theming. It might take a moment to load the Preview Pane.

The Right Pane:

In the Right Pane you choose the tool with which you will personalize your theme.

The Right Pane consistes of Quick, Expert and CSS Theming as well as the Palette.
You will get to know all these in later steps.

© SAP UCC Magdeburg Page 19

 Case Study

Don’t forget to save click on Theme ► Save.

To get back to the homepage click on Theme ► Close.

© SAP UCC Magdeburg Page 20

 Case Study

Step 4: Using Quick Theming

Task Use Quick Theming to adjust your theme. Time 15 Min.

Short Description In this step you will learn about quick theming
and use it to change your custom theme.

In the UI Theme Designer open the editor with your custom theme
LEARN###Theme.

In the last step you have already added a target page.

Click on Purchase Order in the Left Pane to open the application in the Preview Pane.

The Preview Pane

The Preview Pane is there to show you the selected application.
The preview is automatically adjusted once you have selected a new value.

© SAP UCC Magdeburg Page 21

 Case Study

You can switch between the unchanged (Original) view and the edited view
(Preview) of your theme.

Click on Preview to see the edited changes.

Since you haven’t done any changes you will not see any differences between the two
views.

You can also toggle between hiding and showing the left and rigt Pane. Click .

You now see the Preview over the whole browser width. Click again on to see
the Panes again.

Furthermore you can quickly preview built your theme. As well as reload the loaded
application in the preview.

As already mentioned there are four tools to edit the theme. One of these is
QuickTheming.

Quick Theming
You use Quick Theming for the majority of the changes. It allows some sweeping
high-level changes that are very robust across UI technologies and version therof.
Quick theming parameters apply to all supported UI technologies.
There are no dependencies between quick theming parameters unless you create
them.

Click on in the Right Pane to open Quick Theming.

© SAP UCC Magdeburg Page 22

 Case Study

Only a selected number of parameters is offered for editing. These are devided into
several categories:
 Company Logo: The company logo can be themed.
 Main: Main colors are used throughout the theme. The brand color is used for
foregrounds such as selected and active elements and should be a strong color.
The base color is used for backgrounds such as SAP Fiori Launchpad
background and should be a light color.
 Highlights: Highlights can show up in many different contexts to draw attention
to specific elements.
 Shell: Colors of SAP Fiori Launchpad.
 Tile: Colors of SAP Fiori Launchpad Tiles.

© SAP UCC Magdeburg Page 23

 Case Study

 Application Background: The application background can be themed.

 Object Header: The object header of a page can be themed.
 Group: The Group control family includes various containers such as panels,
tables, and lists.
 List: Many aspects of lists are treated as groups, but lists have a few additional
theme parameters for more refinement.
 Text Attributes: Text color attributes. The different text shades, such as the
disabled text color, are calculated from the base parameters.
 Icon Attributes: Symbols used throughout the UI are typically icons. Many
aspects of these icons are themable.
 Button: Buttons have a number of states. Below are the main theming parameters
related to buttons.
 Field: Field parameters apply to many input controls such as Inputs, Combo
Boxes, and so on. Changing any of these parameters may affect many or all of
these controls.
 Toolbar: Toolbars can contain a number of other controls. Below are the main
theming parameters related to toolbars.
 Semantic Colors: Semantic colors can be used to convey status to specific
elements.
 Scrollbar: Scrollbar Colors.

Now you will use Quick Theming to edit your theme. Change the brand color.

Click on the color box next to Brand Color. Use the Color Picker to choose any
color then click on .

The Preview Pane will automatically show the changes. Is this not te case click on
reload .

© SAP UCC Magdeburg Page 24

 Case Study

Take a look at the Right Pane. Scroll down. You see that sever color boxes have also
changed it’s color value.

Thes Parameters affected by changing Brand Color are:

 Highlight Coor
 Shell Text Color
 Tile Icon Color
 Icon Color
 Button Text Color
 Emphasized Button Background Color

This is because changing the value of an quick parameter affects many controls at
once.

Hover over Barand Color. When hovering over the label (parmaeter name) you get
explanations.

© SAP UCC Magdeburg Page 25

 Case Study

You can further see the current, last and original value of the parameter. Since you
have already changed the value you can reset it back to the original or last saved

value. Click on next to Original Value.

You will learn about Expert Theming, CSS Theming and the Palette in the next steps.

© SAP UCC Magdeburg Page 26

 Case Study

Step 5: Use Expert Theming

Task Use Expert Theming to make changes to your custom Time 15 Min.
theme.
Short Description In this step you will learn about Expert
Theming. How and what for you use it.

Click on in the Right Pane to open Expert Theming.

Expert Theming
If you want to change more than the Quick Theming can offer use Expert Theming.
Here you can make a finer grain of changes to your theme.
You get advanced options for adapting themes thanks to a greater number of
parameters for editing.
Both cross UI technology parameters and UI technlology specific parametrs are
supported.
There are dependencies between the parameters, i.e. the value of a parameter may be
derived from the value of other parameters. So when you change the value of a
parameter, this might change the value of other parameters as well.
Changing the value of an expert theming parameter only affects a specific control or
groups of controls.

© SAP UCC Magdeburg Page 27

 Case Study

Note The parameters available for editing are dependet on the base theme you have
selected and the application selected for the preview.

In Expert Theming you can search for a specific parameter by it’s name.

You can filter the parameters for colors, dimensions, typography and images. You can
further select to see all paramters that have been changed by clicking .

© SAP UCC Magdeburg Page 28

 Case Study

Click on to switch on the control picker mode. Now you can select an elementen
you want to change in the Preview Pane. Hover over the Page Header it will be
highlighted and click on it.

In the Right Pane you now see all parameters you can change for the Page Header
element.

© SAP UCC Magdeburg Page 29

 Case Study

Change the sapUrFontFamily to Times New Roman.

Should the changes not appear immidiately in the Preview Pane click .

Note Changing the value of an expert theming parameter only affects a specific
control or group of controls.

In the next step you will learn how to define frequently used colors for easy reuse.

© SAP UCC Magdeburg Page 30

 Case Study

Step 6: Saving colors for later use

Task Save color parameters with the Palette and CSS Theming. Time 10 Min.
Short Description In this step you will learn how to save color
parameters for later reuse with the Palette and CSS Theming.

To ensure consistency in your branding you want to save color parameters. There are
two way to save colors for later reuse. Either by using the color picker in the Palette.
Or if you know the hexadecimal of the color you can use CSS Theming.

Palette
Use the Palette to define a set of colors for reuse. Define frequently used colors to
ensure consistency. For example you can add the color palette of your organization.

In the Right Pane click on to open the Palette.

Add a new color by clicking into the color box. You can either define the color by
entering the hexadecimal or the red green blue values. You can as well just use the
color picker to select it visually.

Change the hexadecimal to #ff6868.

© SAP UCC Magdeburg Page 31

 Case Study

Before you can add a parameter to the palette you have to give the color an ID. Click
into the first empty text box and give them the name reddish. Be aware that you can’t
change the name later.

Click on add to add the color to the Palette.

You have now added your first color to the palette. You can reuse these colors by
referring to them by the ids (names).

CSS Theming
The CSS Theming allows for further customization of the theming that Quick or
Expert Theming do not provide.
You can use CSS or LESS.

Note LESS stands for Leaner CSS and is a style sheet language designed to making
CSS writing more efficient.
The main objectives are to enable intelligent controls and to avoid code repetitions.

© SAP UCC Magdeburg Page 32

 Case Study

LESS is an superset of CSS, which means that a CSS code is also valid LESS-code. It
complies to CSS.

Click on CSS in the Right Pane to open CSS Theming.

You can add LESS and CSS rules in the text editor that is available in the CSS tab.

To add new custom CSS click .

There are a lot of possibilities with the CSS Theming. You will only be defining a
color for later use.

Enter @grey: 727272; .

To activate any changes click , alternatively press Ctrl + Shift + A.

Under Theme► Save make sure to save all changes.

© SAP UCC Magdeburg Page 33

 Case Study

Step 7: Set up your Company Logo

Task Set up your company logo. Time 5 Min.

Short Description In this step you will learn how to set up your
company logo.

In the UI Theme Designer select your theme My first theme ### for
editing.

Click on Purchase Order in the Left Pane. The application will open in the Preview
Pane. Make sure is selected.

You see the font family has been changed to Times New Roman.

Open Quick Theming. At the top of the Right Pane there is the section for the
company logo.

© SAP UCC Magdeburg Page 34

 Case Study

You can hover over Company Logo to get information about the current company
logo. As you can see there is currently no company logo selected.

Click on the box next to company logo to upload your logo.

Upload your company logo by clicking and selecting the image in the
filesystem. Choose any image you like.

Make sure that your newly uploaded image is selected and click on .

© SAP UCC Magdeburg Page 35

 Case Study

Should the change not automatically appear click on reload .

Save your theme and close it.

© SAP UCC Magdeburg Page 36

 Case Study

Step 8: Adding background images I

Task Add an image as background for your theme. Time 5 Min.

Short Description In this step you will learn how to replace the
applications simple background color with a background image.

In the UI Theme Designer select your theme My first theme ### for
editing.

Open Quick Theming.

Under Application Background you can change the background for all applications.

Under Background Image upload any picture as background.

You see the background image has changed.

© SAP UCC Magdeburg Page 37

 Case Study

Save the theme.

© SAP UCC Magdeburg Page 38

 Case Study

Step 9: Adding background images II

Task Add an image as background for your theme. Time 10 Min.

Short Description In this step you will learn how to replace the
simple background color of the Fiori Launchpad with a
background image.

In the UI Theme Designer open your theme with the editor.

You want to add your Launchpad as Target. Click on to add a new Target.

Note If you add an application the application needs to be running on the same
domain as the UI Theme Designer.
This means if your link for the UI Theme Designer is as follows:
https://<host>.<domain>:<port>/sap/theming/theme-designer?sap-client=100
Then the applications (e.g. Launchpad) needs to be on a link like this:
https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpa
d.html

Add the Link to your Launchpad

http://r60z.ucc.ovgu.de/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
under Link to Application.

For Name of Application write Launchpad-###. Click on .

You now see that the background is back to being a pale blue. This is not an error.

In the last step we only changed the background image of the applications. The
background of the Fiori Launchpad is still the same as before.

© SAP UCC Magdeburg Page 39

 Case Study

Note The in the previous step commited changes (e.g. Logo) have already been
adapted. This is because the parameter set is independet of the application you
selected for the preview.

You might have noted that in the preview pane there appeared an additional icon in
the top bar.

Here you can change the preview screen between desktop, tablet and phone to see
your theme on different devices. Change the device to tablet.

You can see an additional icon appearing. With the devices tablet and phone selected
you have the additonal option to see the preview in landscape or portrait (selected)
mode.

Select landscape . You see the screen change the screen format . Change back to
desktop.

Open Quick Theming.

Under Shell Background Image upload a picture as background.

© SAP UCC Magdeburg Page 40

 Case Study

Depending background image selected it might make sense to also change the color
of the text. Adjust the Shell Text Color to give a better contrast between background
and Text.

You can further change the density of the background image under Shell
Background Opacity.

If the preview doesn’t change by itself click on .

© SAP UCC Magdeburg Page 41

 Case Study

Be aware that your Launchpad might look different. This depends on the applications
in your Launchpad.

Don’t forget to save and close.

© SAP UCC Magdeburg Page 42

 Case Study

Step 10: Change the Tile of the Launchpad

Task Change the Tile of the Launchpad with Quick Theming. Time 5 Min.
Short Description In this step you will learn how to change the
Tile of the Launchpad using Quick Theming.

In the UI Theme Designer select the custom theme for the editor.

Open the Launchpad by clicking on it in the Right Pane.

Make sure that is selected.

Open Quick Theming to edit the Launchpad. Scroll down untill you reach the section
Tile.

You will use the in step 3 already defined colors.

© SAP UCC Magdeburg Page 43

 Case Study

To use a color defined in CSS Theming you only have to write the name of the color
defined in CSS into the text field.

Remember that you defined the color by the name grey in CSS.

Click into the text field next to Tile Background Color and fill in grey.

To add a color defined in the Color Palette click onto the color box nect to the text
field of Tile Icon Color.

The palette parameters you defined are displayed in the Palette section in the color
picker. Select reddish.

You have now changed two colors for the tiles.

© SAP UCC Magdeburg Page 44

 Case Study

Note As you see by referencing a predefined color there are two ways to do it. Refer
to a color defined in the CSS Theming simply with its’s parameter name. Refer to a
color defined in the Palette by @ + parameter name.

Your launchpad should now look like the following image. Is this not the case click
on .

Don’t forget to save the changes.

© SAP UCC Magdeburg Page 45

 Case Study

Step 11: Changing the default theme

Task Change the default theme for the Fiori Launchpad. Time 15 Min.
Short Description In this step you will learn how to change the
theme of the Fiori Launchpad.

If you want to apply the theme to your Launchpad or other Fiori apps you have to
overwrite the current theme.

Be aware that changing the theme also affect other users.

Stay on the homepage of the UI Theme Designer.

On the home page you will see the list of your custom themes. Make sure your theme
LEARN###Theme is selected.

You will see the warning under Status on the right side.

To be able to apply a theme, it must be built/create. Click on . This can

take a moment.

Your status changes to OK .

Open the Fiori Launchpad and log in with your username and
password.

Click on your user in the top left corner .

© SAP UCC Magdeburg Page 46

 Case Study

In the appearing menu select Settings .

Under the section settings, select the point Appearance.

You can see the theme you created is listed under Appearance. Choose it.

Click .

© SAP UCC Magdeburg Page 47

 Case Study

You now see your newly created theme in the Launchpad.

© SAP UCC Magdeburg Page 48