Customize Your Themes Using CSS

The introduction of CSS brings more flexibility to the styling in your analytic applications. You can define multiple CSS classes either as global default or per widget. The stylings conform to CSS standards and are no longer limited to the existing styling properties provided by SAP Analytics Cloud, analytics designer.

Learning Tutorial

Watch the interactive tutorial for step-by-step instructions; all tutorials are captioned exclusively in English:

Changing and Customizing Application Theme

Define and Apply CSS

You can define CSS in the CSS editor and apply it to individual widgets, popups or the whole application.

Procedure

  1. In Outline, select (Edit CSS) beside Canvas.

    The CSS editor displays.

  2. In the upper section of the editor, you can select a widget or popup from the dropdown to view all its supported class names and properties.
  3. In the lower section, write CSS.

    It's usually composed of a custom class name, element selector, property and value.

    Sample Code
    .my-theme-1 .sap-custom-button:hover {
	background-color: #00ff00;
	border-color: #0000ff;
}
/**
* In this example, my-theme-1 is a custom class name, sap-custom-button is an element selector and :hover is a pseudo.
* !important syntax is NOT supported.

*/
    Note
    For a custom class name:

    • When it's defined alone, only two properties are allowed: background-color and border.

    • You can’t directly add pseudos to it.

    • It can only be used as the first selector. For example, the following is invalid:

      .sac-custom-radio-btn-group-row .my-theme-1 {
Color: #ccc;
}

    For an element selector, it should be one of the supported classes shown in the editor.

  4. Apply the CSS class you defined in the CSS editor to individual widgets, popups or the whole application:

    • To set the CSS class as the application’s default CSS class, go to the Styling panel of the canvas first. In the Application Settings section, enter the custom class name under Global Default Class Name.

      All widgets and popups in the application will apply the corresponding CSS settings.

    • To set the CSS class for a specific popup or widget, go to its Styling panel. For example, you’ve defined CSS class named my-button-1 for button-specific settings. Under Analytics Designer Properties, you just need to enter my-button-1 for CSS Class Name. Then all these buttons will apply the corresponding CSS settings.

    Note

    When both CSS classes are defined, the widget-specific one will overwrite the global default one.

Results

At design time, you can see that your application immediately applies the styling after you've defined and assigned the CSS class.

Later to let application users set CSS styling at application runtime, you can use script APIs such as setCssClass() and getCssClass(). For more information, refer to Analytics Designer API Reference.

Note

The CSS you've defined for a widget won’t be carried to the new window if you create a story from it or open it in explorer.

Note

Some CSS you've defined for a table might be different if its optimized presentation mode is enabled.

Enable and Load Theme CSS

You can enable theme CSS for your application and load it into the theme that can be applied across applications. The CSS settings will overwrite the existing theme settings but be overwritten by the settings in Styling panel of any widget or popup.

Procedure

  1. In the Display section of the toolbar, go to (Theme), select (Preferences) beside the theme you want to modify.
  2. In the General section under Application Settings, toggle on Enable Theme CSS.
  3. Select Load Application CSS.
  4. Select Save to save the theme with CSS or Save As to save a new theme.

Results

The theme can then be reused in other applications. If you make some modifications to CSS and want to load the latest CSS, select Reload Application CSS.
Note

The priority of styling methods from highest to lowest is: widget styling defined in the CSS editor, widget styling from theme CSS, widget styling defined in the styling panel and widget styling defined in the theme preferences. Thus, for example, the styling rules coming from CSS classes will be prioritized over the overlapping styling rules coming from the styling panel settings.