themedesigner_devguide_12

7/27/2019 themedesigner_devguide_12

1/36

Developer Guide CUSTOMER

UI Theme Designer 1.2Document Version: 1.0 - 2014-04-23

Developer Guide for UI ThemeDesigner


2/36

Table of Contents

1 UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1 Getting Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.1.1 Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.1.2 Prerequisites for Productive Use of Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

1.1.3 Tutorials. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

1.2 Concepts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.2.1 Basics of Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

1.2.2 Structure of Theming Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

1.2.3 Theming Lifecycle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.2.4 Architecture of the UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

1.3 Designing Custom Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.3.1 Selecting the Starting Point for Your Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.3.2 Editing Modes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

1.3.3 Inserting Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

1.3.4 Publishing Themes to the Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

1.4 Setting Custom Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

1.4.1 Setting a Custom Theme via URL Parameter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241.4.2 Setting a Custom Theme for SAPUI5 Standalone. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

1.4.3 Setting a Custom Theme for NWBC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25

1.5 Maintaining Custom Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

1.5.1 Analyzing Theme Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

1.5.2 Transporting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27

1.5.3 Exporting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

1.5.4 Importing Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1.5.5 Deleting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1.5.6 Invalidating the Server Cache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

1.5.7 Rebuilding Themes after Upgrades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

1.6 Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

1.6.1 SAP Standard Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29

1.6.2 Typical LESS Functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

1.7 Important Disclaimers on Legal Aspects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2C U S T O M E R2014 SAP AG or an SAP affiliate company. All rights reserved.

Developer Guide for UI Theme DesignerTable of Contents


3/36

1 UI Theme Designer

Using UI theme designer you can create your own themes to adapt the visual appearance of applications.

This documentation is relevant for UI theme designer 1.2.

The UI theme designer allows you to develop your themes by using an SAP standard theme as the base of your

theme and making adjustments to it. For example, you can change the color scheme, or add your company's logo.

You can also edit existing custom themes.

Key Capabilities

Browser-based WYSIWYG editor

Build-in preview pages:Application previews and control overview pages

Different levels of theming:

Quick theming (basic cross-technology theme settings)

Expert theming (technology-specific theme settings)

Manual theming based on LESS and CSS

Cross-technology theming:

Create one consistent theme that applies to various SAP UI clients and technologies including SAPNetWeaver Business Client, Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan

Manager) and SAPUI5 (for example SAP Fiori applications).

Table 1:

SAP UI client or technology UI parts that can be themed

Web Dynpro ABAP You can theme applications that do not use the follow

ing UI elements:

HTMLIsland

HTMLContainer

Chart

FlashIsland

SilverlightIsland

BusinessGraphics

You can only consume themes created with the UI

theme designer for Web Dynpro ABAP applications asof SAP NetWeaver 7.02.

Floorplan Manager for Web Dynpro ABAP (FPM) You can theme applications that do not use HTMLIs

lands or Chart UIBBs.

Developer Guide for UI Theme DesignerUI Theme Designer

C U S T O M E R2014 SAP AG or an SAP affiliate company. All rights reserved. 3


4/36

SAP UI client or technology UI parts that can be themed

SAPUI5 You can theme SAP standard libraries. Custom SA

PUI5 libraries cannot be themed.

SAP NetWeaver Business Client (NWBC) NWBC for Desktop (4.0): You can theme NWBCshell and overview pages (index page, new tab

page, service map).

NWBC for HTML (3.6): You can theme the servicemap. The shell cannot be themed.

More Information

Table 2:

Overview of new or changed features What's New in User Interface Add-On for SAP NetWea

ver

Security Guide Security Guide

FeedbackUI Theme Designer Developer Center on SCN

Support CSN Component: CA-UI2-THD

SAP Note1953840

UI theme designer main SAP Note SAP Note1852400

Designing themes for SAP NetWeaver Portal Go to http://help.sap.comand search for Working

with Portal Themes.

1.1 Getting Started

Here you find information on the prerequisites that must be met to be able to work with the UI theme designer and

a few examples that guide you through the process of creating your first themes.

Related Information

Prerequisites [page 5]

To be able to use the UI theme designer, several prerequisites must be met.

Prerequisites for Productive Use of Themes[page 5]

Several prerequisites must be met so your theme can be applied to an application.


http://help.sap.com/saphelp_uiaddon10/helpdata/en/af/838a9017434b568d80407a26179940/frameset.htmhttp://help.sap.com/http://help.sap.com/disclaimer?site=https://service.sap.com/sap/support/notes/1852400http://help.sap.com/disclaimer?site=https://service.sap.com/sap/support/notes/1953840http://help.sap.com/disclaimer?site=http://scn.sap.com/docs/DOC-52952http://help.sap.com/saphelp_uiaddon10/helpdata/en/c2/061b99a3764bc0a607d96a418d6f43/frameset.htmhttp://help.sap.com/saphelp_uiaddon10/helpdata/en/af/838a9017434b568d80407a26179940/frameset.htmhttp://help.sap.com/saphelp_uiaddon10/helpdata/en/af/838a9017434b568d80407a26179940/frameset.htm


5/36

Tutorials[page 6]

Several tutorials are available to help you familiarize yourself with the UI theme designer.

1.1.1 Prerequisites

To be able to use the UI theme designer, several prerequisites must be met.

Implement1852401 .

Activate the following Internet Communication Framework (ICF) service nodes:

/sap/public/bc/themes

/sap/bc/theming

To perform this step, launch IMG activityActivate ICF service for UI theme designer. You access the IMGactivity in the SAP Customizing Implementation Guide by choosing SAP NetWeaver UI Technologies

UI Theme Designer Maintain Custom Themes Activate ICF service for UI theme designer .

For write access to the UI theme designer (create, update, delete themes), you must be assigned the relevantauthorization object:

Authorization object: /UI5/THEME

ACTVT (Activity): 02 (Change)

/UI5/THMID (Theme Id): * = all themes

Administrators can assign the relevant authorization objects to specific users using transaction Role

Maintanance(PFCG).

Since themes are client-specific, the client you use to start the UI theme designer must be the same as theclient of the theme repository. In addition, both need to run on the same server.

We recommend you use Google Chrome to run the UI theme designer.

Mozilla Firefox and Microsoft Internet Explorer (as of version 10) are also supported.

1.1.2 Prerequisites for Productive Use of Themes

Several prerequisites must be met so your theme can be applied to an application.

The theme must be published to the server. The following Internet Communication Framework (ICF) service node must be activated:

/sap/public/bc/themes

To perform this step, launch IMG activityActivate ICF service for using custom themes. You access the IMG

activity in the SAP Customizing Implementation Guide by choosing SAP NetWeaver UI Technologies

UI Theme Designer Maintain Custom Themes Activate ICF service for using custom themes .

Ensure that the application to which you want to apply your theme is themable.


http://help.sap.com/disclaimer?site=https://service.sap.com/sap/support/notes/1852401


6/36

Related Information

Publishing Themes to the Server[page 23]Once you have finished editing your theme, you publish it to the server to make it available to other users.

1.1.3 Tutorials

Several tutorials are available to help you familiarize yourself with the UI theme designer.

Related Information

Creating a Theme for Web Dynpro ABAP Applications[page 9]This example shows how you design a theme for Web Dynpro ABAP and Floorplan Manager applications.

Creating a Theme for SAPUI5 Mobile Applications[page 6]

This example shows how you design a theme for SAPUI5 mobile applications.

Creating a Theme for SAPUI5 Desktop Applications[page 8]

This example shows how you design a theme for SAPUI5 desktop applications.

Creating a Theme for SAP NetWeaver Business Client[page 11]

This example shows how you design a theme for SAP NetWeaver Business Client (NWBC).

1.1.3.1 Creating a Theme for SAPUI5 Mobile Applications

This example shows how you design a theme for SAPUI5 mobile applications.

In the following steps, you will create a new theme on the basis of SAP Blue Crystal. The result should look as

follows:




7/36

1 Start the UI theme designer.

2 In the start screen, select the theme SAP Blue Crystaland choose Open.

3 Add an application for the preview.

a In theAdd Target Contentdialog box, enter the URL https://sapui5.staging.nw.ondemand.com/sdk/test-

resources/sap/m/demokit/inbox/index.html and choose Add.

b In the Target Pagespanel, select the control preview you just added.

4 Change the highlight color to green.

a In the Quicktab, select the value help of the Highlight Colorparameter.

b Use the color picker or enter a color code (for example #00bb00).

c Select OKto confirm the dialog box.

5 Change the brand color to green.

6 Change the background color of images to green.

7 Decrease the opacity of the background image.

8 Change the color of the bar at the top of the screen.

a Switch to the Experttab.

b Search for the parameter sapUiBarBG.

c Pick a color or enter a color code.

9 Upload your own background image.

a

Switch back to the Quicktab.


http://help.sap.com/disclaimer?site=https://sapui5.staging.nw.ondemand.com/sdk/test-resources/sap/m/demokit/inbox/index.htmlhttp://help.sap.com/disclaimer?site=https://sapui5.staging.nw.ondemand.com/sdk/test-resources/sap/m/demokit/inbox/index.html


8/36

b Open the value help for the Background Imageinput field.

c Drag and Drop an image file from your local hard disk to the dialog box.

d Set the parameter Background Repeatto falseto enable a cover display of the background image.

1.1.3.2 Creating a Theme for SAPUI5 Desktop Applications

This example shows how you design a theme for SAPUI5 desktop applications.

In the following steps, you will create a new theme with the primary colors green and white and with your companylogo in the header area. The result should look as follows:


2 In the initial screen, select the theme SAP Gold Reflectionand choose Open.

3 Add the preview application for the UX3 Shell.

a

Click on the link UI5 Control Previews.b In the UX3Controlssection, mark the Shellcheckbox.

c In the Target Pagespanel, select the control preview you just added.

4 Change the brand color to green.

In the Quicktab, enter a color (for example "green") or a color code (for example #00bb00) for the BrandColorinput field.

You can also select the value help and use the color picker to define the color value.

5 Change the background color to white.

6 Change the Shell Header Colorto #1C4A21.

7 Change the highlight color to green (#00bb00).

8 Insert your company logo.

a Open the value help for the Company Logoinput field.




9/36

b Drag and drop an image file from your local files to the Assign Imagedialog box or choose to call up a

file browser.

c Confirm the dialog box.

If you know the URL of the image you want to use, you can specify this directly as the value of the input field.

9 Change the link color to #068A06

1 Change the field border color to green (#068A06).

a Switch to the Experttab

b Choose to switch to the tag view.

c From the list of toggle links, choose Field.

d Change the value of the sapField_BorderColorparameter to a shade of green.

1.1.3.3 Creating a Theme for Web Dynpro ABAP Applications

This example shows how you design a theme for Web Dynpro ABAP and Floorplan Manager applications.




10/36

In the following steps, you will create a new theme on the basis of SAP Gold Reflection. The result should look

as follows:


2 In the New Themedialog box, select the theme SAP Gold Reflectionand choose Edit.

3 Add an application for the preview.a In theAdd Target Contentdialog box, enter the URL of the application you want to theme and choose

Add.

b In the Target Pagespanel, select the control preview you just added.

4 Change the highlight color to green.

a In the Quicktab, select the value help of the Highlight Colorparameter.

b Use the color picker or enter a color code (for example #00bb00).

c Select OKto confirm the dialog box.

You will see that for example the hover color of the drop down and the buttons have changed.

5 Change the background color to white.

You will notice that the background color of the application title was not affected by this change.




11/36

6 Change the background color of the header bar to white:

a Switch to the Experttab.

b Filter for color parameters.

c Search for the parameter sapUrPgHTBgColor.

d Pick a color or enter a color code.

7 The buttons should appear in green. Change the value of sapButton_Background to #00ee00.

1.1.3.4 Creating a Theme for SAP NetWeaver Business Client

This example shows how you design a theme for SAP NetWeaver Business Client (NWBC).

In the following steps, you will create a new theme on the basis of SAP Gold Reflection. The result should lookas follows:


2 In the New Themedialog box, select the theme SAP Gold Reflectionand choose Edit.

3 Add sample content for the preview.

a Click on the link NWBC Application Previews.

b Mark the Index Pageand New Tab Pagecheckbox.

4 In the Target Pagespanel, select the Index Pagepreview you just added.

5 Add a background image for index page and new tab page:




12/36

a In the Quicktab, open the value help for the Background Imageinput field.

b Drag and Drop an image file from your local hard disk to the dialog box.

c Select your image in the dialog box and confirm.

6 Adjust the text color to match the background image:Change the parameter defining the text color to the value #0B0361 (a very dark blue).

7 Adjust the background color of the index page sections.

1 Switch to the Experttab.

2 Set the value of the sapUI2NwbcSectionBgColorparameter to #E6FBFC (a light blue).

1.2 Concepts

1.2.1 Basics of Theming

Here you find information about the basic concepts that are involved when creating themes with the UI themedesigner.

What is a Theme?

A theme defines the visual appearance of an application, including font size and type, colors of UI controls andbackground images. It can be applied to applications built in various UI technologies to suit the purpose, topic, or

tastes of different users.

A custom theme created with the UI theme designer is always derived from an SAP standard theme (for example,

SAP Blue Crystal). Each SAP standard theme, in turn, is derived from the base theme.

The Source Language LESS

The UI theme designer uses the style sheet language LESS (Leaner CSS) as the source file format for theming

data. LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions. Thesetechniques allow you to make CSS that is more maintainable, themable and extendable.

With LESS, you can define variables centrally and reuse them throughout the style sheet. You simply use an @

sign to define a variable and a colon to assign its value:

@myColor:value

Rather than repeating the value, you can reference the variable. During the CSS build process, the values of thevariables are inserted into the output CSS file.

In addition, LESS allows operations and functions. Operations allow addition, subtraction, division, and

multiplication of property values and colors, which can be used to create relationships between properties.Functions allow the manipulation of values. For example, you can define a color by desaturating another color:

@myColor:desaturate(@color1, 10%);

How the UI Theme Designer Uses LESS




13/36

The UI theme designer exposes a set of LESS-based theming parameters in the Quickand Experttab. Theming

parameters can be color values, text sizes, icons, background images, etc. For example, the Quicktab offers thetheming parameter @sapHighlightColor.

Changed parameters are stored in the custom theme. In the theme build process, the changes to the SAPstandard theme are concatenated. The theme generator substitutes all references to the CSS variable by the

current value of this variable. Thus, the final CSS contains the redefined properties (for example a differenthighlight color).

Since custom themes only store the custom changes, future updates to the base themes will propagate to the

custom theme parameters that have not been changed.

Related Information

http://lesscss.org/

http://less2css.org/Use this page to enter LESS code and display the corresponding CSS code.

Typical LESS Functions[page 33]


http://help.sap.com/disclaimer?site=http://less2css.org/http://help.sap.com/disclaimer?site=http://less2css.org/http://help.sap.com/disclaimer?site=http://lesscss.org/


14/36

1.2.2 Structure of Theming Files

The files defining custom themes and SAP standard themes are stored in the theme repository.

The folders containing these files have the following structure:

FrameworkAt the top level, you can find a folder for each framework (for example SAPUI5, Unified Rendering, NWBC).

Unified Rendering is a rendering technology that is generally supported and used by Web Dynpro ABAP,Floorplan Manager, and other UI technologies. It has two versions: Unified Rendering Classic and Unified

Rendering Light Speed.The Basefolder contains data that is shared by all frameworks (e.g. the SAP main colors and sets of web

application icons).

Library

Each framework folder contains folders for the libraries. A library defines a set of controls and their rendering.Unified Rendering contains, for example, Unified Rendering Light Speed ("ls") and Unified Rendering Classic("ur").

SAPUI5 contains, for example, sap.ui.commons (controls like TextField and Button) and sap.m (controls formobile devices).

The baseLibfolder provides the possibility to store data which is common for all libraries.

ThemeEach library folder contains folders for the themes with the corresponding LESS files. The folders for the

themes delivered by SAP have the prefix "sap_". The title of the custom folders is the ID that was enteredwhen saving the theme.

The base theme is the theme from which each theme inherits directly or indirectly.

The following graphic illustrates the structure of theming files:

Note

You can use the theme repository browser to display the theming data.




15/36

For more information, seeAnalyzing Theme Content[page 27].

1.2.3 Theming Lifecycle

Several components are involved when you create or edit a theme using the UI theme designer.

The following scenario illustrates the theming lifecycle:

Table 3:

Step Description

1.) You start the UI theme designer. The tool accesses the theme repository and loads all

available themes.

2.) You select a theme as the base of your theme (e.g.SAP Corbu).

The CSS files defining this theme are loaded from the

theme repository.

3.) You select sample content for the preview (e.g. aWeb Dynpro ABAP application).

The UI theme designer finds out which resources areused and need to be styled. In our example, the library

theme SAP Corbufor Unified Rendering is loaded.

The application is displayed in the preview area and its

theming parameters are offered for editing.

4.) You make adjustments to the theme you selected by

changing the values of theming parameters and/oradding custom CSS or LESS.

The new theming data is stored in the browser'scache. A theme consists of LESS files and resources

(for example images).




16/36

Step Description

5.) You publish your theme to the server. The theme generator is triggered and builds the corre

sponding CSS from the LESS files. A new theme folderis created in the theme repository. The generated CSS

files are stored in this folder along with the LESS files.

6.) A user applies your theme to a running application. For instance, this can be done by referencing the ID ofthe custom theme.

Related Information

Selecting the Starting Point for Your Theme[page 18]To create a theme, you first need to select a theme as the base of your theme and an application for the

preview.

Editing Modes[page 19]

Depending on the adaptations required to create your theme, you can switch between different editing modes.

Publishing Themes to the Server[page 23]

Once you have finished editing your theme, you publish it to the server to make it available to other users.

Setting Custom Themes[page 23]After you have published your theme to a server, users can run applications with your theme by referencing its

ID.

1.2.4 Architecture of the UI Theme Designer

The UI theme designer tool consists of the following main components:

Table 4:

Component Description

UI theme designer Browser-based application that provides several ways

to find parameters, change their values and applythem to a preview application. It uses the API provided

by the theming engine to access the theming datastored in the theme repository.

Theming engine Manages theming parameters, file structures, import/

export and persistency. It provides an API to the UItheme designer.

Theme repository Repository to store the CSS and LESS files of custom

themes and themes delivered by SAP. It has a file-system-like interface to the UI theme designer.

Theme generator Generates CCS files from LESS file sources.




17/36

Related Information

Basics of Theming[page 12]Here you find information about the basic concepts that are involved when creating themes with the UI theme

designer.

Structure of Theming Files[page 14]

The files defining custom themes and SAP standard themes are stored in the theme repository.

Theming Lifecycle[page 15]

Several components are involved when you create or edit a theme using the UI theme designer.

1.3 Designing Custom Themes

Using the UI theme designer, you create your own themes by changing the values of individual style parameters of

an SAP standard theme and saving it under a new name.

You can also edit existing custom themes.

Related Information

Prerequisites[page 5]To be able to use the UI theme designer, several prerequisites must be met.

Selecting the Starting Point for Your Theme[page 18]To create a theme, you first need to select a theme as the base of your theme and an application for the

preview.

Changing the Main Parameters Using Quick Theming[page 20]

Using the quick theming mode, you can easily change color scheme, background image or logo.

Adjusting Individual Parameters Using Expert Theming[page 21]If you want to change more than the Quickpanel could offer, you can use expert theming to make fine-tuned

adjustments to your theme.

Inserting Images[page 22]

You can add your own icons and images to your theme by uploading them or specifying a URL.

Adding Custom CSS to Your Theme[page 22]

If you want to make further adjustments to your theme that are not possible by changing the values of thetheming parameters provided in the Quickor Experttab, you can add custom LESS or CSS.

Publishing Themes to the Server[page 23]Once you have finished editing your theme, you publish it to the server to make it available to other users.




18/36

1.3.1 Selecting the Starting Point for Your Theme

To create a theme, you first need to select a theme as the base of your theme and an application for the preview.The UI theme designer only offers the theming options available for the application that you selected for thepreview.


Use transaction /UI5/THEME_DESIGNER.

2 In the start screen, select a theme to start with.

Select an SAP standard theme as the base of your theme.

Choose the theme which is closest to the design you want to achieve. Note that you will not edit the SAPstandard theme itsself. Rather, you will adjust a copy of it and save it under a new name.

For cross-technology scenarios, we recommend you use SAP Gold Reflection. It allows you to createthemes that apply to Unified Rendering, NWBC and SAPUI5 desktop.

For Fiori scenarios, we recommend SAP Blue Crystal. It allows you to create themes that apply to

SAPUI5 mobile and desktop.

For more information on support of SAP standard themes, see SAP Standard Themes[page 29].

Select a custom theme.Custom themes are only offered on the start screen if users have published themes to the server.

You can open a custom theme to make further adjustments to it.Note that there is currently no mechanism to notify you when a custom theme is edited by several

users at once. To avoid changes to a theme being overwritten, you need to make sure that no otheruser is editing the theme you want to work on.

You can copy a custom theme and use it as the base to create another theme.

3 Choose Open.

4 Choose sample content for the preview.

You can add the following content:

Application preview pages

Note that the application you enter needs to be located on the same server as the UI theme designer.

Control preview pages

Your own applications

For Web Dynpro ABAP, application preview pages are only supported as of SAP NetWeaver 7.0 EHP 1.

To add more than one application, choose . TheAdd Target Contentdialog box appears again and you canchoose the application you want to add.

The applications you have added appear in the Target Pagespane and can be selected to be displayed in the

preview area.

Choose to expand the preview to full width.

Use the Original/Previewtoggle button to switch between the display of the theme you used as a starting

point and a preview of the current version of your theme.

You can now change the values of theming parameters or add CSS rules. The application preview is automatically

adjusted once you have made a change.




19/36

Related Information

Editing Modes[page 19]Depending on the adaptations required to create your theme, you can switch between different editing modes.

1.3.2 Editing Modes

Depending on the adaptations required to create your theme, you can switch between different editing modes.

The UI theme designer offers the following modes for editing themes:

Table 5:

Quick Theming Expert Theming

Allows you to adapt themes in just a few steps. Only aselected number of parameters is offered for editing.

A greater number of parameters is offered for editing,which gives you advanced options for adapting themes.

Quick theming parameters apply to all supported UI

technologies.

Expert theming parameters apply only to specific UI

technologies.

The parameter set is independent of the application

you selected for the preview.

Which parameters are available for editing is dependent

on the following:

the theme you have selected as the base of your

theme

the application you have selected for the preview

There are no dependencies between quick theming pa

rameters unless you create them.

There are dependencies between the parameters, i.e.

the value of a parameter may be derived from the valueof 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 a quick theming parameter af

fects many controls at once.

Changing the value of an expert theming parameter

only affects a specific control or groups of controls.

Quick theming parameters are displayed with a label

rather than a technical name (e.g Highlight Color).

All parameters, including the quick theming parame

ters, are displayed with their technical name (e.g. sa-

pHighlightColor).

In addition to quick and expert theming, SAPUI5 and Unified Rendering support custom LESS or CSS. You can

add LESS and CSS rules in the text editor that is available in the CSStab. This allows you to make furtheradjustments to your theme that are not possible by changing the values of the theming parameters. For example,

you may want to hide UI controls, change their spacing and alignment or decrease opacity to make underlyingcontrols become visible.

Related Information

Changing the Main Parameters Using Quick Theming[page 20]




20/36

Using the quick theming mode, you can easily change color scheme, background image or logo.

Adjusting Individual Parameters Using Expert Theming[page 21]If you want to change more than the Quickpanel could offer, you can use expert theming to make fine-tuned


Adding Custom CSS to Your Theme[page 22]If you want to make further adjustments to your theme that are not possible by changing the values of the

theming parameters provided in the Quickor Experttab, you can add custom LESS or CSS.

1.3.2.1 Changing the Main Parameters Using Quick Theming

Using the quick theming mode, you can easily change color scheme, background image or logo.You have selected a theme as the base of your theme and an application for the preview.

1 In the panel on the right, open the Quicktab.

The following parameters are displayed along with the current value:

Table 6:

Parameter Description

Background Color The main background color of the screen.

Base Color The color which is used to derive the most dominant

colors.Brand Color The color which builds your brand.

For example, this parameter defines the color of thethin line in the header bar of the SAPUI5 Gold Reflec

tion shell.

Highlight Color The color which is used to highlight screen elements

For example, this parameter defines the color of buttons on hover

Shell Header Color The color of the shell header bar.

Link Color The color of the link text.

Text Color The default color of screen texts. Some controlsmay override this.

Logo The URL to a logo image (e.g. company logo).

Note that this parameter only affects the logo of theSAPUI5 shell but not the logo of the SAPUI5 Applica

tionHeader control.

Background Image The URL to the image which is shown as back

ground. Note that for SAPUI5, this parameter only

works for applications that use the shell.




21/36

Parameter Description

Background Image Opacity This parameter only has an effect on SAP Blue Crys

tal.Defines the opacity of the global background image

of a SAPUI5 application. A lower value will make theimage less transparent.

Background Image Repeat This parameter only has an effect on SAP Blue Crys

tal.

Defines whether the global background image of aSAPUI5 application should be repeated. The possi

ble values are trueand false.

Image Background Color This parameter only has an effect on SAP Blue Crystal.

The color which appears behind the global back

ground image of a SAPUI5 application, potentiallyshining through.

2 Change the parameter values according to your needs.The preview is automatically adjusted once you have selected a new value.

1.3.2.2 Adjusting Individual Parameters Using ExpertTheming

If you want to change more than the Quickpanel could offer, you can use expert theming to make fine-tuned


You have selected a theme as the base of your theme and an application for the preview.

1 In the side panel on the right, open the Experttab.

2 Search for the parameters you need to change.

You have the following filter and search options:

Filter for parameters that have the same type. The following categories are available:

Table 7:

Category Icon Description

Shows parameters with color value.

Shows parameters related to typography.

Shows parameters with dimension value (em, px,pt, % etc).

Shows parameters representing an image.




22/36

Select additional categories to further restrict the list of parameters. For example, select the categoriesfontand colorto filter for all parameters that define the font color.

Choose to switch to the tag view.A list of toggle links with filter categories is displayed. Select a link to add all available parameters with

that tag to the parameter list. Selecting additional links extends the list of parameters displayed.

Use the search input field to search for a string in the parameter name.For example, enter the search string disabledto filter for all parameters that define the visual

appearance of disabled controls.

3 Change the parameter values according to your needs.

1.3.2.3 Adding Custom CSS to Your Theme

If you want to make further adjustments to your theme that are not possible by changing the values of the

theming parameters provided in the Quickor Experttab, you can add custom LESS or CSS.

You have selected a theme as the base of your theme and an application for the preview.

The following UI technologies support custom LESS and CSS:

SAPUI5

Unified Rendering technologies (Web Dynpro ABAP, FPM)

1 In the side panel on the right, open the CSStab.

2 Enter your LESS or CSS code in the editor.

You want to define that the color of the whole page of a SAPUI5 application is the same as the brand color butwith an opacity of 10%. To do so, you can use the SAPUI5 CSS class sapUiBodyand reference the theming

parametersapBrandColor.

.sapUiBody{background-color:fade(@sapBrandColor,10);}

If you now change the brand color using the Quicktab, the color of the whole page adjusts automatically.

You can also define your own LESS variables and reuse them within your coding.

3 Choose Apply.

The code you have entered is reflected in the application preview immediately afterwards.

1.3.3 Inserting Images

You can add your own icons and images to your theme by uploading them or specifying a URL.

1 Decide which image you want to change:

To insert a background image or a company logo, open the Quicktab. The relevant parameters are

displayed in the Imagesection.

To change other images, open the Experttab.




23/36

Choose to display parameters referring only to images.

2 Select the button to the right of the input field with the value for the relevant parameter.

3 Drag and drop an image file from your local files to theAssign Imagedialog box or choose to call up a filebrowser. If you know the URL of the image you want to use, you can also specify this as the value of the inputfield.

4 Confirm the dialog box.

1.3.4 Publishing Themes to the Server

Once you have finished editing your theme, you publish it to the server to make it available to other users.

1 Choose Theme Save Build .

2 In the Save&Builddialog box, provide the following:

Theme IDThis is the ID applications can reference to invoke the theme, for example using the sap-theme parameter

in SAPUI5. For more information, see Setting Custom Themes[page 23].

Theme name

Vendor

Theme ID, theme name, and vendor must not start with "SAP".

3 Decide whether you require a Right-to-Left (RTL) version of your theme.

Right-to-left languages, such as Hebrew and Arabic, require different stylesheets and images than the left-to-right (LTR) languages. Mark the Create RTL themecheckbox to create stylesheets for both LTR and RTLlanguages.

4 Choose Save Build.

A theme consists of LESS files and resources (for example images). During the build, CSS files are generated fromthe LESS files. This means that your theme can be applied to a running application.

When you restart the UI theme designer, your theme is displayed in the list on the start screen.

You or other users can select the theme. You have the following options:

To make further adjustments to the theme, choose Open.

To use the theme as a template to create another theme, choose Copy.

1.4 Setting Custom Themes

After you have published your theme to a server, users can run applications with your theme by referencing its ID.




24/36

Related Information

Prerequisites for Productive Use of Themes[page 5]Several prerequisites must be met so your theme can be applied to an application.

Setting a Custom Theme via URL Parameter[page 24]To run applications with a custom theme, you can use the URL parameter sap-themeto reference the theme

ID.

Setting a Custom Theme for SAPUI5 Standalone[page 25]

Custom themes can be applied to SAPUI5 standalone applications.

Setting a Custom Theme for NWBC[page 25]

For NWBC, you can set custom themes in the NWBC configuration using transaction /UI2/CUST.

1.4.1 Setting a Custom Theme via URL Parameter

To run applications with a custom theme, you can use the URL parameter sap-themeto reference the theme ID.

The custom theme you want to set for your application was published to the server.

The procedure below works for the following UI technologies:

Web Dynpro ABAP

FPM

SAPUI5 (only for local themes)

1 Start the Tool for Customer Themes Maintenanceusing transaction /UI5/THEME_TOOL.

2 Select Infofor your theme and choose .

The value required for the URL parametersap-themeis displayed.

Note

The value of this parameter contains the ID of your theme and the theme root:

sap-theme=@.

The theme ID is the ID that was entered in the Publishdialog box.

The theme root is the URL of the theme repository that contains the theming files.

The theme root path looks as follows:https://:/sap/public/bc/themes/~client-

You can only specify the URL of the host you are using to run the UI theme designer. Loading a themefrom a remote host is not yet supported.

3 Enter the URL of your application in the address field of your browser.

4 Add the parameter sap-themeincluding the value you retrieved using transaction /UI5/THEME_TOOLto this

URL.

5 Press Enterto launch the application with the specified theme.




25/36

Related Information

Setting a Custom Theme for SAPUI5 Standalone[page 25]Custom themes can be applied to SAPUI5 standalone applications.

Setting a Custom Theme for NWBC[page 25]


1.4.2 Setting a Custom Theme for SAPUI5 Standalone

Custom themes can be applied to SAPUI5 standalone applications.

You have exported your theming files as Zip archive to your local hard disk.

For more information, see Exporting Themes[page 27].

1 Create a folder resources in your SAPUI5 application.

2 Extract the contents of the Zip archive containing the theming data into this folder.

You now have the following options to switch your application to the new theme:

Use the SAPUI5 bootstrap configuration.You can refer to the custom theme ID in the data-sap-ui-themeattribute of the script tag.

Example:

Use the URL parametersap-ui-theme.

Example:

https://:/sap/public/bc/ui5_ui5/demokit/test-resources/sap/ui/ux3/Shell.html?sap-ui-

theme=my_theme@https:// :/sap/public/bc/themes/~client-For more information, see https://sapui5.staging.nw.ondemand.com/sdk/#docs/guide/

ThemingFAQ.html .

1.4.3 Setting a Custom Theme for NWBC


The theme must be stored in the same client as the client you use for the configuration.

1 Start transaction /UI2/CUST in your NWBC window.

2 In customizing start the Assign Parameter Valuestool.

3 Open the tree node SAP Netweaver Business Clientand execute the IMG activity Assign Parameter Values.

4 Switch to edit mode.


http://help.sap.com/disclaimer?site=https://sapui5.staging.nw.ondemand.com/sdk/#docs/guide/ThemingFAQ.htmlhttp://help.sap.com/disclaimer?site=https://scn.sap.com/http://help.sap.com/disclaimer?site=https://scn.sap.com/http://help.sap.com/disclaimer?site=https://sapui5.staging.nw.ondemand.com/sdk/#docs/guide/ThemingFAQ.htmlhttp://help.sap.com/disclaimer?site=https://sapui5.staging.nw.ondemand.com/sdk/#docs/guide/ThemingFAQ.htmlhttp://help.sap.com/disclaimer?site=https://scn.sap.com/


26/36

5 Select Menu Edit New Entries .

6 Provide the following:

Filter: Define whether the theme should be applied to the whole client or to connections restricted to aspecific role.

Name: Enter the parameter THEME.

Value: Enter the ID of your theme.

7 Save your entries and exit the transaction.

1.5 Maintaining Custom Themes

The UI theme designer and the Tool for Customer Theme Maintenance(transaction /UI5/THEME_TOOL) offerseveral options to maintain your themes.

Since themes are client-specific, you need to use the same client to edit and maintain themes.

Related Information

Analyzing Theme Content[page 27]To analyze theme content, you use the theme repository browser.

Transporting Themes[page 27]You can transport themes from one system to another (e.g. from a test to a production system) using the Toolfor Customer Themes Maintenance.

Exporting Themes[page 27]You can export your themes as an archive file from the SAP system to your local hard disk using the Tool for

Customer Themes Maintenance.

Importing Themes[page 28]

You can import your themes as an archive file from your local hard disk to an SAP system using the Tool forCustomer Themes Maintenance.

Deleting Themes[page 28]

You can delete custom themes that were published to the server.Invalidating the Server Cache[page 29]

You can invalidate the server cache using the Tool for Customer Themes Maintenance.

Rebuilding Themes after Upgrades[page 29]

You may have to rebuild the stylesheet definitions of your theme after you have upgraded your ABAP systemto a higher support package (SP) or implemented a patch for the rendering of one of the supported UI

technologies.




27/36

1.5.1 Analyzing Theme Content

To analyze theme content, you use the theme repository browser.The theme repository browser allows you to access the theming files which are exposed in a directory structure

called the theme root.

1 To open the theme repository browser, you can use the following path: https://[:]/sap/

public/bc/themes/~client-

For example: https://myserver.com/sap/public/bc/themes/~client-020

2 Navigate to the folder in which the CSS files for your theme are stored.

Related Information

Structure of Theming Files[page 14]The files defining custom themes and SAP standard themes are stored in the theme repository.

1.5.2 Transporting Themes

You can transport themes from one system to another (e.g. from a test to a production system) using the Tool for


You have administrator rights.


2 Navigate to the theme you want to transport.

3 Select Transportand choose .

Related Information



1.5.3 Exporting Themes

You can export your themes as an archive file from the SAP system to your local hard disk using the Tool for





28/36

1 Log on to the system in which the data for your theme is stored.


3 Navigate to the theme you want to export.

4 Select Downloadand choose .

5 In the Save asdialog box, navigate to the location on your local hard disk where you want to store the theme

files.

6 Enter a file name and choose Save.

A Zip file is created. Its content corresponds to the file structure for theme libraries created by SAP. If you have

added any custom CSS, it is included in the Zip archive.

Related Information

Importing Themes[page 28]You can import your themes as an archive file from your local hard disk to an SAP system using the Tool for


1.5.4 Importing Themes

You can import your themes as an archive file from your local hard disk to an SAP system using the Tool forCustomer Themes Maintenance.

1 Log on to the system to which you want to upload the theme data.

2 Start transaction /UI5/THEME_TOOL.

3 Select Uploadand choose .

4 In the Opendialog box, navigate to the file location on your local hard disk where your theme files are stored

and choose Open.

Related Information



1.5.5 Deleting Themes

You can delete custom themes that were published to the server.




29/36


2 In the start screen, select the custom theme you want to delete.

3 Select Delete.

4 Confirm the dialog box.

1.5.6 Invalidating the Server Cache

You can invalidate the server cache using the Tool for Customer Themes Maintenance.


2 Select Invalidate Cacheand choose .

1.5.7 Rebuilding Themes after Upgrades

You may have to rebuild the stylesheet definitions of your theme after you have upgraded your ABAP system to a

higher support package (SP) or implemented a patch for the rendering of one of the supported UI technologies.

Your themes are always based on SAP themes. If the SAP theme on which your theme is based was upgraded to anew version with a higher SP stack or patch, rendering issues may occur. To avoid them, you need to rebuild the

CSS files of your theme.


2 In the start screen, select your custom theme.

3 Select Rebuild.The CSS files are build for the new version.

1.6 Reference

1.6.1 SAP Standard Themes

A custom theme is always based on the theme template provided by SAP.

Supported Themes

You can use one of the following SAP standard themes as the base of your theme:




30/36

Table 8:

Theme name UI technologies or clients supporting the theme

SAP Blue Crystal

SAPUI5SAP Gold Reflection SAPUI5 desktop

Unified Rendering technologies

NWBC

SAP Corbu Unified Rendering technologies

NWBC

We recommend you use SAP Gold Reflectionin

stead.

Note

SAP Gold Reflectionand SAP Corbuare supported for Web Dynpro ABAP as of SAP NetWeaver 7.3 EHP 1,

SPS 05.

Legacy Themes

The following themes are only available to allow backwards compatibility:

SAP High Contrast Black

SAP Streamline

SAP Tradeshow

Note

Quick theming is not supported for these legacy themes.

Related Information

SAP Corbu[page 31]

SAP Gold Reflection[page 32]

SAP Blue Crystal[page 32]




31/36

1.6.1.1 SAP Corbu

SAP Corbu is a fresh, modern and unique visual identity. It is named after Charles-douard Jeanneret, aka LeCorbusier, Swiss Architect and Designer. The design is intentionally neutral to blend with a variety of legacycontent. The predefined colors are grey and white backgrounds with black headers and orange and blue

highlights. The visual identity harmonizes the look & feel of SAP Business Suite products that are built on differenttechnologies and frameworks. The overall navigation between the different products is offered by the SAP

NetWeaver Business Client, a navigation shell for desktop or web that comes with tabbed browsing behavior andtraditional role-based navigation.

The following image shows an example of the visual design:

Gold Reflection and Corbu have a very similar visual design language. Apart from some conceptual and frameworkrelated differences, the visualization of UI controls is identical. The main visual difference is the usage of icons,and the appearance of the application shell.




32/36

1.6.1.2 SAP Gold Reflection

SAP Gold Reflection is a fresh, modern, and unique visual identity. The shell header has a dark background with a

gold line at the top. The visual design of the content area is identical with SAP Corbu: the predefined colors aregrey and white backgrounds with black headers and orange and blue highlights.

The following image shows an example of the visual design:

Gold Reflection and Corbu have a very similar visual design language. Apart from some conceptual and framework

related differences, the visualization of UI controls is identical. The main visual difference is the usage of icons,and the appearance of the application shell.

1.6.1.3 SAP Blue Crystal

SAP Blue Crystal provides a consistent, responsive design that allows users to seamlessly experience SAPUI5apps across the interaction channels desktop, tablet, and mobile. The background texture has a stroke pattern in

white and light blue with a gradient layer.




33/36

1.6.2 Typical LESS Functions

The following is a list of typical LESS functions for colors:

Table 9:

LESS Function Description

saturate(@color, 10%); Returns a color 10% points more saturated

desaturate(@color, 10%); Returns a color 10% points less saturated

lighten(@color, 10%); Returns a color 10% points lighter

darken(@color, 10%); Returns a color 10% points darker

fade(@color, 50%); Returns @color with 50% transparency

spin(@color, 10); Returns a color with a 10 degree larger in hue

mix(@color1, @color2, [@weight: 50%]); Returns a mix of @color1 and @color2

greyscale(@color); Returns a grey, 100% desaturated color

contrast(@color1, [@darkcolor: black], [@lightcolor:

white], [@threshold: 43%]);

Returns @darkcolor if @color1 is > 43% luma (percep

tual brightness), otherwise returns @lightcolor




34/36

1.7 Important Disclaimers on Legal Aspects

This document is for informational purposes only. Its content is subject to change without notice, and SAP does

not warrant that it is error-free. SAP MAKES NO WARRANTIES, EXPRESS OR IMPLIED, OR OFMERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

Coding Samples

Any software coding and/or code lines / strings ("Code") included in this documentation are only examples and

are not intended to be used in a productive system environment. The Code is only intended to better explain andvisualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness

of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code,unless damages were caused by SAP intentionally or by SAP's gross negligence.

Accessibility

The information contained in the SAP documentation represents SAP's current view of accessibility criteria as of

the date of publication; it is in no way intended to be a binding guideline on how to ensure accessibility of softwareproducts. SAP specifically disclaims any liability with respect to this document and no contractual obligations or

commitments are formed either directly or indirectly by this document.

Gender-Neutral Language

As far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addresseddirectly with "you", or a gender-neutral noun (such as "sales person" or "working days") isused. If when referring

to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun doesnot exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the

documentation remains comprehensible.

Internet Hyperlinks

The SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hintabout where to find related information. SAP does not warrant the availability and correctness of this related

information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damagescaused by the use of related information unless damages have been caused by SAP's gross negligence or willful

misconduct. Regarding link classification, see: http://help.sap.com/disclaimer


http://help.sap.com/disclaimer/http://help.sap.com/disclaimer/


35/36




36/36

www.sap.com/contactsap

2014 SAP AG 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 AG.

The information contained herein may be changed without prior

notice.

Some software products marketed by SAP AG and its distributors

contain proprietary software components of other software

vendors. National product specifications may vary.

These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes only, without

representation or warranty of any kind, and SAP Group shall not be

liable for errors or omissions with respect to the materials. The only

warranties for SAP Group 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
http://www.sap.com/contactsap

themedesigner_devguide_12

Documents