Properties of Apps in the Theme Editor

Last modified on 2022/05/28 10:53

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.

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
Pages as buttons.png Pages as menu.png
Property Description Representation
Element: Object to be formatted (1) Application Title: Title of the app Menu - Elements.png
(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 Graphic properties - General format.png
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 Apps - Logout icon.png

Logout Color (Inherit) (1) Inactive icon Menu - Logout icon off.png
Logout Color (hover) (Inherit) (2) Icon displayed on hover Menu - Logout icon on.png

Color of the outline surrounding the buttons

Active Menu Separator (Inherit) (1) Active button outline Menu - Separator.png
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 Object on hover.png
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)

Page - Color inside outside.png
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
Font Family (Inherit) Font of the text, selected via Select Font Graphic properties - General format.png
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 Object on hover.png
Text Color On Hover (Inherit) (2) Color of the object title
Widget Height Default height of widgets in pixels. Widget - Minimal maximal height.png
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.

Open url.png 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

EVApps - widgets Properties - Theme - Header-Footer.png
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 Graphic properties - General format.png
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

EVApps - widgets Properties - Theme - Border style-color-size.png

Color (Inherit) Border color
Size (Inherit) Border width

Best Practice icon.png    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
EVApps - widgets Properties - Theme - Border corner.png

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)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

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
EVApps - widgets Properties - Theme - Shadow Example A.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
EVApps - widgets Properties - Theme - Shadow Example B.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
EVApps - widgets Properties - Theme - Shadow Example C.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 0px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example D.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example E.png
  • Horizontal Position = 0px
  • Vertical Position = 0px
  • Blur Radial = 5px
  • Spread Distance = 0px
EVApps - widgets Properties - Theme - Shadow Example F.png
  • 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 EVApps - widgets Properties - Theme - Padding.png
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 EVApps - widgets Properties - Theme - Margin.png
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 Graphic properties - General format.png
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 Apps - Gallery - Theme design icon.png Theme Design in the toolbar.
The theme editor will appear.

Step 2: Select the theme.

1. Click Apps - Manage themes icon.png 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. Open url.png 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.

Tags:
Powered by XWiki © EasyVista 2022