Site Themes

Using site themes, you can define overall appearance of your site. SAP Cloud platform offers predefined site themes and an administrator can add more themes to theme repository. In this chapter, let us see in detail the overall concepts involved in the site themes.

Themes used in site are defined in LESS stylesheet file - it is used to control UI part of site like font, color, etc.

To apply a theme, navigate to Design Settings → Services and Tools.

To assign custom theme to your site, navigate to Theme Manager. All the themes that you created are available under Theme manager. When you select a theme, you can check the following details under manage themes −

• Title
• ID
• Updated By
• Updated On
• Theme Upgrade

Bottom toolbar provides you following options to manage the theme. Click “Assign to Site” option to assign a theme to your site.

• Enable User selection
• Assign to Site
• Export
• Edit
• Delete

Once you apply all the changes, click Publish button to publish to your site.

Creating and Publishing Theme

To create a new theme, navigate to UI Theme Designer → “Create a New Theme” and select your base theme. You can select any of base theme from list of available themes.

The following steps are involved while creating a customized theme −

• Choose Base Theme
• Name your Theme
• Set Options

In the next window, you must enter details under “Name your theme” - Theme ID and Title. You also have an option to define optional settings like Vendor, support, under Set Options.

To proceed with theme creation, click Create Theme.

To customize a theme, first define a Target Page that will act as a canvas to perform changes. Use Quick Theming mode change color, image background, etc. and click Add button to add the target pages.

You can select from the following options on the right side −

• Quick Theming
• Expert Theming
• Defining Organization color
• Add LESS or CSS to your theme

On right side panel, you can select Quick Theming option by clicking the paint brush icon. You can change logo, add brand and base color for foreground and background.

You can see below options under Quick theming. Select image you want to use for Company Logo → click OK to apply changes

Note that if you want to apply new theme to portal site, first step is to publish the theme using UI Theme Designer and apply the theme from Portal Theme Manager.

To Publish a theme, in UI Theme Designer top level menu → select Theme and then Save & Publish.

You can also validate the theme parameters that you defined while creating new theme- name, description, vendor, etc. Click on Save and Publish button as shown below to publish the theme.