Propriétés des types de widgets dans l'éditeur de thème


Les propriétés graphiques des types de widgets définies au niveau d'un thème s'appliquent à toutes les applications liées à ce thème. 

Elles sont définies via l'éditeur de thème (onglet Widgets) et sont regroupées dans différentes sections : 

  • la section Theme est présente sur chaque type de widget ;
  • d'autres sections sont contextuelles au type de widget.

Remarques

  • Les propriétés des widgets peuvent être définies au niveau des applications, via l'éditeur graphique : dans ce cas, les propriétés s'appliquent uniquement au widget sélectionné et dans l'application sélectionnée.

Description des propriétés

Type de widgets Menu

    Open url.png  voir Description

Content > Label

LabelContentMenu

Propriétés des libellés de chaque élément de menu

Propriété Description Représentation
Label Position (Inherit) Position du libellé par rapport à l'icône EVApps - Graphic Properties - Label Position.png
(1) Top : Haut
(2) Bottom : Bas
(3) Left : Gauche
(4) Right : Droite
Propriétés graphiques du libellé
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Content > Icon

IconContentMenu

Propriétés des icônes associées à chaque élément de menu

Propriété Description Représentation
Icon Size (Inherit) Taille de l'icône (en pixels) Apps - widget Menu - Icon Size.png
Icon Color (Inherit) (1) Couleur de l'icône EVApps - Graphic Properties - Icon Color.png
Icon Background Color (Inherit) (2) Couleur de fond de l'élément de menu
EndContentMenu

Types de widgets Bar Chart et Line Chart

    Open url.png  voir Description Bar Chart ; Line Chart

Chart Label -/- Legend

ChartLabelLegendBarLineChart

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Bar Line Chart.png
(1) Axis : Valeurs des axes
(2) Axis Legend : Légendes des axes
(3) Legend : Légendes affichées en haut à droite du graphique
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndChartLabelLegendBarLineChart

Type de widgets Benchmark Chart

    Open url.png  voir Description

Chart Label -/- Legend

ChartLabelLegendBenchmarkChart

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Benchmark Chart.png
(1) Axis : Valeurs des mesures
(2) Legend : Légendes des axes
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndChartLabelLegendBenchmarkChart

Type de widgets Gauge

    Open url.png  voir Description

Chart Label -/- Legend

ChartLabelLegendGauge

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Gauge.png
(1) Legend : Titre du graphique
(2) Values : Valeurs des mesures
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndChartLabelLegendGauge

Type de widgets Pie / Donut Chart

    Open url.png voir Description

Chart Label -/- Legend

ChartLabelLegendPieDonutChart

Propriétés des légendes

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Label Element Pie Donut Chart.png
(1) Label : Légendes des secteurs
(2) Legend : Légendes affichées en haut à droite du graphique
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndChartLabelLegendPieDonutChart

Type de widgets Kpi

    Open url.png  voir Description

Chart

ChartKpi

Propriétés des indicateurs

Propriété Description Représentation
Element Objet à formater EVApps - Graphic Properties - Chart Element Kpi.png
(1) Delta : Indicateur graphique de tendance et pourcentage d'évolution
(2) Kpi : Valeur de l'indicateur
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

EndChartKpi

Tous les types de widgets : Theme

WidgetsGeneralProperties

Propriétés générales

Propriété Description Représentation
Element : Objet à formater Widget : Style pour le
Selection (Active) : Style pour
Selection (Secondary) : Style pour
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

ColorOnHover
Lorsque le titre de l'objet est survolé avec la souris
Background Color On Hover (Inherit) (1) Couleur de fond de l'objet Object on hover.png
Text Color On Hover (Inherit) (2) Couleur du texte de l'objet
Widget Height Hauteur par défaut des widgets, en pixels Widget - Minimal maximal height.png
Widget Minimal Height Hauteur minimale des widgets, en pixels, au-dessous de laquelle le redimensionnement n'est plus autorisé
Widget Maximum Height Hauteur maximale des widgets, en pixels, au-dessus de laquelle le redimensionnement n'est plus autorisé
Enable Entry Animation Indique si une animation est présente sur les widgets (case cochée - l'animation est jouée à chaque ouverture de la page), ou si aucune animation n'est présente (case non cochée).

Open url.png voir procédure Comment définir une animation sur un widget

exemple   Afficher les widgets avec un effet de fondu à chaque ouverture de la page

Header / Footer

HeaderFooter_CommonProperties

Propriétés de l'entête et du pied des widgets

(1)   section Header : Propriétés de l'entête du widget

(2)   section Footer : Propriétés du pied du widget

EVApps - widgets Properties - Theme - Header-Footer.png
Propriété Description Représentation
Height (Inherit) Hauteur de l'élément, en pixels
Propriétés graphiques de l'objet sélectionné
PageGeneralFormat
Font Family (Inherit) Police de caractères du texte de l'objet, sélectionnée via Select Font Graphic properties - General format.png
Size Taille de la police de caractères, qui peut être sélectionnée via la réglette ou saisie directement dans la zone
Alignment (Inherit) Alignement du texte de l'objet (Gauche / Centré / Droite / Justifié)
Style (Inherit) Attributs de caractères du texte de l'objet (Gras / Italique / Souligné)
Background Color (Inherit) Couleur de fond de l'objet
Text Color (Inherit) Couleur du texte affiché par l'objet

Note : Le formatage du texte défini via l'éditeur de texte est prioritaire sur cette couleur

Border

Border_CommonProperties

Propriétés pour le formatage des bordures du cadre délimitant le widget

Propriété Description Représentation
Style (Inherit) Style des bordures (pointillés, trait plein, trait double...)

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

Color (Inherit) Couleur de la bordure
Size (Inherit) Épaisseur de la bordure

Best Practice icon.png    Définissez les propriétés générales de toutes les bordures du cadre (1) puis affinez-les via les propriétés propres à chaque bordure (2) :

  • Top : bordure haute
  • Bottom : bordure basse
  • Left : bordure gauche
  • Right : bordure droite

Radius (Inherit) Arrondi appliqué aux angles de chaque coin du cadre, en pixels :
  • Top Corner Left : coin haut gauche
  • Top Corner Right : coin haut droit
  • Bottom Corner Left : coin bas gauche
  • Bottom Corner Right : coin bas droit
EVApps - widgets Properties - Theme - Border corner.png

Notes :

  • Saisissez la valeur 0 pour un angle droit (1)
  • Plus la valeur est élevée, plus l'angle est arrondi (2)

Box Shadow

BoxShadow_CommonProperties

Propriétés pour le formatage de l'ombre appliquée au cadre délimitant le widget

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Horizontal Position Épaisseur de l'ombre partant de la gauche (valeur négative) ou de la droite (valeur positive) du cadre délimitant le widget
Vertical Position Épaisseur de l'ombre partant du haut (valeur négative) ou du bas (valeur positive) du cadre délimitant le widget
Blur Radial Intensité de l'effet de flou appliqué à l'ombre
Spread Distance Décalage de l'ombre par rapport au cadre délimitant le widget
Valeur négative (- 40 px) Valeur positive (40 px)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

Color (Inherit) Couleur de l'ombre
Opacity Degré de transparence de l'ombre (plus la valeur est élevée, plus l'ombre est visible)

Exemples de paramétrage de l'ombre

Exemple Paramétrage Exemple Paramétrage
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

Marges du contenu du widget par rapport au cadre le délimitant

Propriété Description Représentation
Padding Top (Inherit) (1) Marge entre le bord supérieur du contenu et l'extrémité haute du cadre délimitant le widget EVApps - widgets Properties - Theme - Padding.png
Padding Bottom (Inherit) (2) Marge entre le bord inférieur du contenu et l'extrémité basse du cadre délimitant le widget
Padding Left (Inherit) (3) Marge entre le bord gauche du contenu et l'extrémité gauche du cadre délimitant le widget
Padding Right (Inherit) (4) Marge entre le bord droit du contenu et l'extrémité droite du cadre délimitant le widget

Margin

Margin_CommonProperties

Marges du widget par rapport à son emplacement (ligne / colonne)

Note : Non applicable au type de widgets Breadcrumbs

Propriété Description Représentation
Margin Top (Inherit) (1) Marge entre le bord supérieur de la ligne sur laquelle est positionné le widget et l'extrémité haute du cadre le délimitant EVApps - widgets Properties - Theme - Margin.png
Margin Bottom (Inherit) (2) Marge entre le bord inférieur de la ligne sur laquelle est positionné le widget et l'extrémité basse du cadre le délimitant
Margin Left (Inherit) (3) Marge entre le bord gauche de la colonne dans laquelle est positionné le widget et l'extrémité gauche du cadre le délimitant
Margin Right (Inherit) (4) Marge entre le bord droit de la colonne dans laquelle est positionné le widget et l'extrémité droite du cadre le délimitant

Procédure  : Comment définir les propriétés d'un type de widgets dans l'éditeur de thème

Étape 1 : Ouverture de l'éditeur de thème

1. Allez sur la galerie.

2. Cliquez sur Apps - Gallery - Theme design icon.png Theme Design dans la barre d'outils.
L'éditeur de thème est ouvert.

Étape 2 : Sélection du thème

1. Cliquez sur Apps - Manage themes icon.png dans le volet Objets.

2. Cliquez sur le thème pour lequel vous souhaitez définir les propriétés graphiques des types de widgets.

  • L'inspecteur de propriétés du thème est ouvert dans le volet Objets > Current Theme.
  • L'onglet Application affiche les propriétés graphiques des pages.

Étape 3 : Sélection du type de widgets

1. Cliquez sur l'onglet Widgets.

2. Sélectionnez le type de widget.
Les propriétés contextuelles au type de widget sont affichées.

Étape 4 : Définition des propriétés du type de widgets

1. Définissez les propriétés graphiques.

2. Visualisez l'apparence des changements sur une application liée au thème.

  • Sélectionnez l'application via la liste Preview on de la barre d'outils.
  • Sélectionnez la page de l'application.
    Le volet Visualisation est automatiquement réactualisé.
Tags:
Modifié par Utilisateur inconnu le 2020/03/24 12:23
Créé par Administrator XWiki le 2016/01/20 18:23

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020