The Global Style functionality is used to define all style elements in CSS code in a single place in the app. These elements are shared with the entire app. As such, they can be used in all pages and widgets in the app.

• The CSS style sheet of the app can be found in the Global Style section in the graphic editor.
• This section contains an input field where all CSS attributes and classes in the app are defined.
• The style elements specified in the section are applicable to all pages and widgets in the app.

Operating principle

CSS style elements are placed in the <header> section of the HTML code generated when the app is run.

This means that the graphic style will be loaded before widgets are loaded in the page. This provides a seamless display of graphic elements and reduces app loading times.

Notes

• The <style> tag is predefined in the Global Style section.
• Responsive mode is not supported by the Global Style functionality.  See the procedure

Caution

• For security reasons, you cannot insert tags in the Global Style section.

Best Practice

• You can override the Global CSS style sheet for specific pages in the app by defining CSS code specific to those pages.

• To manage CSS code based on the type of device (i.e. desktop, tablet or smartphone) in a given style zone, you can use media query @media screen instructions.  See the procedure

Access

In the graphic editor > Objects pane > Global Style

Procedures

How to define the Global Style section

Step 1: Open the graphic editor

1. Go to the App Gallery.

2. Click  in the app toolbar.
 

Step 2: Add the CSS code for the entire app

1. Click Global Style in the Objects pane.

2. In the CSS Content field, define all of the CSS code to be used in the app.

How to manage CSS code based on the type of device

Because Responsive mode is not supported by the Global Style functionality, you must use media query @media screen instructions to adapt CSS code based on the type of device where the app will run.

• Desktop:

• Tablet:

• Smartphone:

Use case

An app is made up of multiple pages, each of which includes a widget displaying the page heading.

• Classes are defined for headings and sub-headings.
  • The heading is encapsulated in a CSS class called .pTitle.
  • The sub-heading is encapsulated in a CSS class called .pSub.

• Graphic elements are added to the Global Style section. Modifications will therefore be automatically propagated to all app headings and sub-headings with these two classes.

• CSS code associated with the example