Advanced Theming in HANA Cloud Portal

[Former Member]

How do I get started?

You need to modify the default theme LESS file in order to apply your theming preferences.

Read Inbal Sabag's blog about Using LESS in HANA Cloud Portal for the technical aspects of modifying the default theme.

Check out HANA Cloud Portal Dev Guide section about Designing Site Themes for more info.

LESS override logic

LESS file compiler will take the bottom value of a parameter as the most updated one.

This means that if the same parameter appears several times in a LESS file, the value given in the most bottom appearance of this parameter will be the one used.

The best practice is to have only one single appearance of each parameter in the file.

Quick parameters

The top section of the theme LESS file contains "quick parameters".

These parameters were configured to make a high effect on the different components with the minimal configuration needed.

This is still a small set, and might not be sufficient for advanced styling.

Advanced parameters

The rest of the theme LESS file contains parameters that affect a vast variety of components.

They allow you to control the styling of practically anything, including:

Additional site components (such as fonts)

Widgets

UI5 controls within widgets (check out Styling UI5 Controls in HANA Cloud Portal Widgets)

Smartphone specific parameters

Expert Mode (AKA Editing theme via CSS)

We currently offer backwards compatibility for existing CSS based themes, but this is no longer the best practice, and you should base your styling on the new LESS default theme.

There's one use case for pushing CSS classes into the LESS file, which is the need to override specific UI5 styling, that our current UI5 related LESS parameters do not affect (check out Styling UI5 Controls in HANA Cloud Portal Widgets).

For example, let's say I want to modify the UI5 Tree font size. Here's how to tackle this:

1. Find out which CSS class and attribute you need to modify:
   1. Go to SAPUI5 SDK - Demo Kit Controls section.
   2. Enter Tree page and Inspect the example.
   3. Locate the CSS class associated with this control and the name of the CSS attribute you wish to modify.
      In our case they would be 'sapUiTree' and 'font-size'.
      
2. Insert a modified version of this class into the theme LESS file, following these guidelines:
   1. The class must be added at the end of the file (see 'LESS override logic' above).
   2. Create a new class, which will replace the UI5 class. Best practice is to use the original class name concatinated with 'Modified' at the end.
   3. Insert only the attributes you need to modify into the class, do not copy/paste the entire original class content.
   4. Add the CSS '!important' tag for each modified attribute.
      
3. Apply the modified class onto your UI5 control:
   1. Open your widget's spec XML.
   2. Locate the code that creates the UI5 control in your widget.
   3. Add your modified class by applying addStyleClass("MODIFIED_CSS_CLASS_NAME"😞
      
4. Upload the adjusted widget and add it to your site (replace previous existing version if needed).
5. Upload the adjusted theme and apply it to the site.