Propriétés graphiques d'une page


Les propriétés graphiques d'une page peuvent être définies en 2 endroits :

  • au niveau d'un thème : propriétés s'appliquant à toutes les pages des applications liées à ce thème ;
  • au niveau d'une application : propriétés s'appliquant uniquement à la page sélectionnée dans cette application.

Remarques

  • Accès aux propriétés graphiques :

Menu

Propriétés des éléments de la barre de titre de l'application

MenuProperties
Propriété Description Représentation
Objet à formater : Element (1) Application Title : Titre de l'application EVApps - Graphic Properties - Title Bar Element.png
(2) Menu (Active) : Page active
(3) Menu : Pages inactives
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

Pour les éléments Menu (pages actives / inactives)

Couleur de l'icône de déconnexion Apps - Logout icon.png

Logout Color (Inherit) (1) Icône inactive EVApps - Graphic Properties - Title Bar Logout Off.png
Logout Color (hover) (Inherit) (2) Icône survolée avec la souris EVApps - Graphic Properties - Title Bar Logout On.png

Couleur du cadre délimitant les onglets

Active Menu Separator (Inherit) (1) Cadre de la page active EVApps - Graphic Properties - Title Bar Separator.png
Menu Separator (Inherit) (2) Cadre des pages inactives

Lorsque le titre de la page est survolé avec la souris

Background Color On Hover (Inherit) (1) Couleur de fond de l'onglet EVApps - Graphic Properties - Title Bar Background Text Color.png
Text Color On Hover (Inherit) (2) Couleur du libellé de la page
MenuPropertiesEnd

Page

Propriétés des pages d'un thème ou d'une application

PageProperties
Propriété Description Représentation
Uniquement pour la page sélectionnée dans une application

Image de fond de la page    (cliquez sur Apps - Upload icon.png pour télécharger l'image souhaitée)

Background Image

Sur un écran classique

Background Image (mobile)

Sur un écran de petite taille (smartphone)

Background Image Properties

Image - Repeat Size Position properties - Dropdown list.png : Permet de personnaliser l'affichage de l'arrière-plan de la page, via différentes propriétés appliquées à l'image. Cliquez sur la liste déroulante.

Image - Repeat Size Position properties.png
BackgroundImageProperties

Repeat : Définit la façon dont l'image est répétée dans la zone dédiée à l'arrière-plan.

no-repeat repeat repeat-x repeat-y

Aucune répétition de l'image

Image - Repeat property - No Repeat.png

Répétition horizontalement et verticalement

Image - Repeat property - Repeat.png

Répétition horizontalement

Image - Repeat property - Repeat x.png

Répétition verticalement

Image - Repeat property - Repeat y.png

L'image est répétée autant de fois que nécessaire pour recouvrir la zone. La dernière image est rognée si nécessaire.

Size : Définit la taille de l'image.

Initial size Scale to fit Scale to cover

Taille originale

Image - Size property - Initial.png

Image agrandie pour s'ajuster à la hauteur de la zone dédiée à l'arrière-plan, tout en conservant ses proportions hauteur/largeur

Image - Size property - Scale to fit.png

Image agrandie en largeur et en hauteur pour recouvrir entièrement la zone dédiée à l'arrière-plan. Note : Une partie de l'image peut être masquée.

Image - Size property - Scale to cover.png

Position (H/V) : Définit la position de l'image dans la zone dédiée à l'arrière plan.

  • La première valeur indique le positionnement horizontal de l'image dans la zone : par rapport au bord gauche (left), au bord droit (right) ou au centre (center).
  • La seconde valeur indique le positionnement vertical de l'image dans la zone : par rapport au haut (top), au bas (bottom) ou au centre (center).
  • Si l'image est répétée sur toute la surface (Repeat = repeat), la propriété Position provoque simplement un décalage du motif.

Pour toutes les pages des applications liées à un thème

ou Uniquement pour la page sélectionnée dans une application

Max Width (Inherit) Largeur maximale de la page

Couleur de la page

Inside Color (Inherit) (1)

Sur la partie centrale (= Largeur maximale de la page - propriété Max Width)

EVApps - Graphic Properties - Page Margin.png
Outside Color (Inherit) (2)

Sur la partie extérieure

PagePropertiesEnd

Widgets

Propriétés de tous les types de widgets de la page

 Open url.png  voir Description des propriétés

Fonts

Propriétés des polices de caractères utilisées dans toutes les balises Html des différents types de widgets dans la page

ElementGeneralFormat
Propriété Description Représentation
Objet à formater : Element Body : Style pour le corps de texte
Normal {p} : Style Normal
Preformatted {pre} : Style pour le texte préformaté
Title 1 {H1} to Title 6 {H6} : 6 styles d'en-tête
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

Tags:
Modifié par Utilisateur inconnu le 2017/09/15 16:39
Créé par Administrator XWiki le 2016/01/20 18:22

Raccourcis

L'actualité mensuelle
•  Newsletter

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

Glossaire

Powered by XWiki ©, EasyVista 2020