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 Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor
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 When you move the cursor over the title of the object: Background Color On Hover (Inherit) (1) Background color of the object Text Color On Hover (Inherit) (2) Color of the object title

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.

Widgets

WidgetsGeneralProperties

General properties

Property		Description	Representation
Element: Object to format		Widget:
		Selection (Active):
		Selection (Secondary):
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor
ColorOnHover When you move the cursor over the title of the object: Background Color On Hover (Inherit) (1) Background color of the object Text Color On Hover (Inherit) (2) Color of the object title
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. See How to define an animation for a widget .	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 Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

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
Define the general properties of all borders (1). You can then define the properties specific to each border if required (2): Top: Top border Bottom: Bottom border Left: Left border Right: Right border
Radius (Inherit)		Rounded corners for the border in pixels: Top Corner Left: Top left corner Top Corner Right: Top right corner Bottom Corner Left: Bottom left corner Bottom Corner Right: Bottom right corner
Notes :
Enter 0 if you want the corner of the border to be a right angle (1). The higher the value, the more rounded the corner (2).

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	Negative value (- 40 px) Positive value (40 px)
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
	Horizontal Position = -5px Vertical Position = -5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px
	Horizontal Position = -5px Vertical Position = -5px Blur Radial = 0px Spread Distance = 5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px Spread Distance = 5px
	Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 0px			Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 5px

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 Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

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.

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.