Properties of Apps in the Theme Editor
The graphic properties of apps defined in a theme will apply to all apps associated with this theme.
You can define them using the theme editor (Application tab). The properties are grouped into different sections.
Notes
- You can define the properties in an app, using the graphic editor. In this case, the properties will be defined only for the selected object and will apply only to this app.
- Most properties have an Inherit checkbox. This is used to manage inherited or context-specific graphic properties for the page.
See Principles of inheritance and context-specific for graphic properties
Properties description
Menu
MenuProperties
Graphic properties of the menu in the top banner of the app (standard presentation when the pages appear as buttons).
Note: If you replace the standard presentation with a Menu widget, go to the Theme section > Cell Style to define the graphic properties of menu items used to access pages.
Standard presentation (buttons) | Presentation using the Menu widget |
---|---|
![]() |
![]() |
Property | Description | Representation | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Element: Object to be formatted | (1) | Application Title: Title of the app | ![]() |
|||||||||||||||||||
(2) | Menu (Active): Active button | |||||||||||||||||||||
(3) | Menu: Inactive buttons | |||||||||||||||||||||
Graphic properties of the selected object
PageGeneralFormat
|
||||||||||||||||||||||
Color of the logout icon |
||||||||||||||||||||||
Logout Color (Inherit) | (1) | Inactive icon | ![]() |
|||||||||||||||||||
Logout Color (hover) (Inherit) | (2) | Icon displayed on hover | ![]() |
|||||||||||||||||||
Color of the outline surrounding the buttons |
||||||||||||||||||||||
Active Menu Separator (Inherit) | (1) | Active button outline | ![]() |
|||||||||||||||||||
Menu Separator (Inherit) | (2) | Inactive button outline | ||||||||||||||||||||
ColorOnHover |
Page
Properties applied to all pages in all apps associated with the theme.
PageProperties_WidthColor
Width / Color properties
Width and color of the page.
Property | Description | Representation | |
---|---|---|---|
Max Width (Inherit) | Maximum width of the page | ||
Color of the page |
|||
Inside Color (Inherit) | (1) | For the main section (= Maximum width of the page - Max Width property) |
![]() |
Outside Color (Inherit) | (2) | In the outer section |
Background Page
Border in the page background.
Property | Description | Display | |
---|---|---|---|
Border Style (Inherit) | (1) | Type of border | |
Border Color (Inherit) | (2) | Color of the border | |
Border Size (Inherit) | (3) | Size of the border, can be selected using the slider or entered directly in the field | |
Shadow Color (Inherit) | (4) | Color of the border shadow | |
Opacity | Opacity level of the shadow, can be selected using the slider or entered directly in the field |
Widgets
WidgetsGeneralProperties
General properties
Property | Description | Representation | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Element: Object to format | Widget: | |||||||||||||||||||||
Selection (Active): | ||||||||||||||||||||||
Selection (Secondary): | ||||||||||||||||||||||
Graphic properties of the selected object
PageGeneralFormat
|
||||||||||||||||||||||
ColorOnHover |
||||||||||||||||||||||
Widget Height | Default height of widgets in pixels. | ![]() |
||||||||||||||||||||
Widget Minimal Height | Minimum height of widgets in pixels. Widgets cannot be resized less than this height. | |||||||||||||||||||||
Widget Maximum Height | Maximum height of widgets in pixels. Widgets cannot be resized greater than this height. | |||||||||||||||||||||
Enable Entry Animation | Used to indicate if an animation is available for the widget (box is checked) or not (box is not checked). If there is an animation, it will run each time the page is loaded. . | example Display the widget with a fade effect when the page is loaded. |
Header / Footer
HeaderFooter_CommonProperties
Properties of the widgets header and footer.
(1) Header section: Properties of the widgets header (2) Footer section: Properties of the widgets footer |
![]() |
Property | Description | Representation | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Height (Inherit) | Height of the element in pixels | |||||||||||||||||||||
Graphic properties of the selected object
PageGeneralFormat
|
Border
Border_CommonProperties
Properties for formatting borders around the widget
Property | Description | Representation | |
---|---|---|---|
Style (Inherit) | Border style, e.g. dotted, solid line, double solid line | ||
Color (Inherit) | Border color | ||
Size (Inherit) | Border width | ||
|
|||
Radius (Inherit) | Rounded corners for the border in pixels:
|
![]() |
|
Notes : |
|||
|
Box Shadow
BoxShadow_CommonProperties
Properties for formatting the shadow of the widget border
Note: Not applicable to Breadcrumbs widgets.
Property | Description | Representation | |||||||
---|---|---|---|---|---|---|---|---|---|
Horizontal Position | Width of the shadow starting from the left (negative value) or from the right (positive value) of the widget border | ||||||||
Vertical Position | Width of the shadow starting from the top (negative value) or from the bottom (positive value) of the widget border | ||||||||
Blur Radial | Intensity of the blur applied to the shadow | ||||||||
Spread Distance | Distance of the shadow from the widget border |
|
|||||||
Color (Inherit) | Color of the shadow | ||||||||
Opacity | Transparency of the shadow (the higher the value, the more visible the shadow) |
Examples of shadow settings
Example | Setting | Example | Setting | |
---|---|---|---|---|
![]() |
|
![]() |
|
|
![]() |
|
![]() |
|
|
![]() |
|
![]() |
|
Padding
Padding_CommonProperties
Padding between the widget content and its border
Property | Description | Representation | |
---|---|---|---|
Padding Top (Inherit) | (1) | Padding between the top edge of the widget content and the widget's top border | ![]() |
Padding Bottom (Inherit) | (2) | Padding between the bottom edge of the widget content and the widget's bottom border | |
Padding Left (Inherit) | (3) | Padding between the left edge of the widget content and the widget's left border | |
Padding Right (Inherit) | (4) | Padding between the right edge of the widget content and the widget's right border |
Margin
Margin_CommonProperties
Widget margins as regards its position (row/column)
Note: Not applicable to Breadcrumbs widgets.
Property | Description | Representation | |
---|---|---|---|
Margin Top (Inherit) | (1) | Distance between the top edge of the row in which the widget is positioned and the widget's top border | ![]() |
Margin Bottom (Inherit) | (2) | Distance between the bottom edge of the row in which the widget is positioned and the widget's bottom border | |
Margin Left (Inherit) | (3) | Distance between the left edge of the column in which the widget is positioned and the widget's left border | |
Margin Right (Inherit) | (4) | Distance between the right edge of the column in which the widget is positioned and the widget's right border |
Fonts
Properties of fonts used in all HTML tags in the different types of widgets in the page.
ElementGeneralFormat
Property | Description | Representation | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Element: Object to format | Body: Style for the text body | |||||||||||||||||||||
Normal {p}: Normal style | ||||||||||||||||||||||
Preformatted {pre}: Style for preformatted text | ||||||||||||||||||||||
Title 1 {H1} to Title 6 {H6}: Six header styles | ||||||||||||||||||||||
Graphic properties of the selected object
PageGeneralFormat
|
Procedure: How to define the properties of apps in the theme editor
Step 1: Open the theme editor.
1. Go to the App Gallery.
2. Click Theme Design in the toolbar.
The theme editor will appear.
Step 2: Select the theme.
1. Click in the Objects pane.
2. Click the theme whose graphic properties you want to define for the associated pages.
- The Properties Inspector will appear in the Objetcs pane > Current Theme.
- The Application tab will display the graphic properties of pages.
Step 3: Define the properties of pages for the apps associated with the theme.
1. Click the Application tab.
2. Define the graphic properties of the pages. See the properties description.
3. Preview the visual aspect of your modifications in an app associated with the theme.
- Select the app from the Preview on list in the toolbar.
- Select the app page.
The Preview pane will automatically be refreshed.