Show Menu
SUJETS×

Mise en forme des éléments pour les formulaires adaptatifs

Conditions préalables

Connaissances en matière de CSS et structure LESS.

Eléments personnalisables

Cet article répertorie les classes CSS de formulaires adaptatifs accessibles au public. Vous pouvez exploiter ces classes pour mettre en forme différents composants d’un formulaire adaptatif. La définition de style des composants de création, tels que les boîtes de dialogue et les barres d’état qui affichent des avertissements, ne rentre pas dans le cadre de cet article. Utilisez ces mises en forme des éléments pour créer des styles (en utilisant CSS ou Less) uniquement lorsque vous ne pouvez pas appliquer un style aux composants à l’aide de l’ éditeur de thèmes .

Personnalisation des styles dans les formulaires adaptatifs

La structure LESS simplifie l’utilisation pour personnaliser les styles dans les formulaires adaptatifs. La structure vous permet de définir des styles à l’aide d’un ensemble de variables et de fonctions (mixins). La structure LESS aide à réduire la taille du code imbriqué et augmente sa capacité de réutilisation.
Vous pouvez personnaliser les styles des formulaires adaptatifs des manières suivantes :
  • Modification du thème
  • Modification du style d’un composant

Modification du thème

Vous pouvez modifier le thème d’un formulaire adaptatif pour vous assurer que son aspect est cohérent avec les pages Web sur lesquelles le formulaire adaptatif est incorporé.
Les modifications de l’aspect général du formulaire adaptatif via les propriétés CSS font généralement partie des modifications du thème. Les modifications majeures apportées au "ok and entiment" du formulaire adaptatif, telles que les modifications de la disposition et du placement des composants, ne sont pas considérées comme des modifications de thème.
Selon l’amorçage, l’ensemble suivant de propriétés CSS définit le thème d’une page Web :
  • Couleur de fond
  • Bordure (type, couleur, épaisseur)
  • Couleur de la police
  • Remplissage
  • Marge
  • Taille de la police
  • Hauteur de ligne
Actuellement, les variables LESS sont définies uniquement pour ces propriétés des différents éléments dans un formulaire adaptatif.

Modification du style de composant

Vous pouvez modifier l’apparence, la disposition, le positionnement et la visibilité des éléments. Pour obtenir cette tâche, créez ou mettez à jour vos fichiers .css personnalisés afin d’inclure les éléments de style répertoriés dans cet article.
Pour appliquer un style à un formulaire adaptatif, ouvrez le formulaire adaptatif pour l’édition, ouvrez les propriétés du conteneur de formulaires adaptatifs et spécifiez le chemin du fichier CSS personnalisé dans l’onglet de base. Mises en forme par défaut du formulaire adaptatif remplacé par les mises en forme répertoriées dans le fichier .css personnalisé.

Composants

Les composants décrits dans cet article ont leurs classes CSS prédéfinies. Vous pouvez modifier les variables pour modifier les styles dans les classes CSS. Sinon, vous pouvez réécrire la classe entière. Cette section décrit les classes dans les composants et les styles que vous pouvez modifier à l’aide de variables.

Définition de style du conteneur

Un conteneur est le composant de niveau supérieur. D’autres panneaux et champs se trouvent sous le composant de conteneur.
Classe CSS
guideContainerNode
Description des variables
Description des variables
container-bgColor
Couleur d’arrière-plan du conteneur
container-padding
Marge intérieure du conteneur
container-margin
Marge du conteneur
container-fontColor
Couleur de police du conteneur

Définition de style du champ

Les formulaires adaptatifs incluent divers types de champs. Chaque champ a un nom de classe unique, qui est le nom du champ. The field also has a common class name guideFieldNode .
Les champs incluent des libellés, des widgets, des descriptions d’aide (descriptions longues et courtes), ainsi que des icônes d’aide de champ (point d’interrogation).
Classe CSS
guideFieldNode
Variables
Description
field-padding
Marge intérieure du champ
field-error-font-color
Couleur de police du message d’erreur du champ
field-error-font-size
Taille de police du message d’erreur du champ

Définition de style de libellé

The HTML element label used for the field includes the classes left or top depending on whether the label is at the top or left.
Classe CSS
guideFieldLabel
Variables
Description
label-font-color
Couleur de police du libellé du champ
label-font-size
Taille de police du libellé du champ
label-line-height
Propriété de hauteur de ligne CSS pour le libellé du champ
label-font-weight
Propriété d’épaisseur de police CSS du libellé du champ
label-margin
Marge du libellé du champ
The CSS rules for the label are applied using the guideFieldLabel label. Si vous êtes un auteur, remplacez cette règle pour que vos modifications personnalisées soient visibles.

Définition de style des widgets

Selon leur type, les widgets contiennent également des classes. En règle générale, les widgets incluent la classe guideFieldWidget . Les widgets fournis avec HTML utilisent normalement les éléments HTML standard input et select. La définition de style s’effectue en conséquence. Vous ne pouvez pas modifier le style d’un widget personnalisé en modifiant les variables.
Classe CSS
guideFieldWidget
Variables
Description
widgets-bg-color
Couleur d’arrière-plan des widgets (ne fonctionne pas pour les cases à cocher et les boutons radio)
widgets-border-color
Couleur de bordure des widgets
widgets-border-thickness
Taille de bordure des widgets
widgets-border-radius
Rayon de bordure des widgets
widgets-border-type
Type de bordure des widgets
widget-border-focus-type
Type de focus des bordures de widget
widgets-border
Style de bordure consolidée des widgets
widgets-font-color
Couleur du texte dans le widget
widgets-font-size
Taille du texte dans le widget
widgets-line-height
Propriété de hauteur de ligne CSS du widget
widgets-padding
Propriété de remplissage CSS du widget
widgets-focus-border-color
Couleur de bordure lorsque le widget est ciblé
widgets-mandatory-border-color
Couleur de bordure du widget pour les champs obligatoires
widgets-mandatory-bg-color
Couleur d’arrière-plan du widget pour les champs obligatoires
widgets-disabled-bg-color
Couleur d’arrière-plan du widget lorsque le champ est désactivé
widgets-disabled-font-color
Couleur de police du widget lorsque le champ est désactivé
widgets-disabled-border-color
Couleur de bordure du widget lorsque le champ est désactivé
widget-height
Hauteur du widget (ne fonctionne pas pour les cases à cocher et les boutons radio)
checkbutton-height
Hauteur de la case à cocher et du bouton radio.
listboxwidget-height
Hauteur maximale d’une liste déroulante à sélection multiple

Restrictions de la définition de style de widget

La définition du style des champs ciblés, obligatoires et désactivés est limitée à l’aide de variables. Toutefois, vous pouvez le modifier en remplaçant les styles. La restriction à l’aide de variables est fournie principalement pour garder un œil sur le nombre de variables. La restriction peut être assouplie si l’apparence d’un champ change radicalement car elle se trouve dans l’un des états décrits précédemment.

Description d’aide

Un auteur peut spécifier le contenu d’aide dans les champs à l’aide de composants de descriptions longue et courte. Both components have a common class .guideHelpDescription and another class .long / .short , depending on the type of description. Le contenu d’aide est intégré dans un élément de paragraphe pour remplacer la définition de style de la description. La description d’aide (longue et courte) est modifiée à l’aide de variables commençant par widgetshelp, comme indiqué dans le tableau suivant :
Variables
Description
widgets-help-long-bg-color
Couleur d’arrière-plan de l’aide longue des widgets
widgets-help-long-border-color
Couleur de bordure de l’aide longue des widgets
widgets-help-long-border-indicator-color
Couleur de bordure d’indicateur gauche de l’aide longue des widgets
widgets-help-short-bg-color
Couleur d’arrière-plan de l’aide courte des widgets
widgets-help-short-color
Couleur de police de l’aide courte des widgets
widgets-help-short-tooltip-bg-color
Couleur d’arrière-plan de l’info-bulle d’aide courte des widgets
widgets-help-short-tooltip-color
Couleur de police de l’info-bulle d’aide courte des widgets

Termes et conditions

Le widget des termes et conditions (TnC ) vous permet de spécifier les termes et conditions. Vous pouvez personnaliser le widget à l’aide des variables décrites dans le tableau suivant.
Variables
Description
tnc-unvisited Couleur de police du lien TnC non visité.
tnc-visited Couleur de police du lien TnC visité.

Bouton

Les boutons sont également des widgets. Toutefois, leur définition de style est légèrement différente des widgets. Dans les formulaires adaptatifs, n’importe lequel des éléments suivants constitue un bouton :
  • button
  • élément avec la classe .button
Code HTML du bouton :
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Classe CSS
Description
iconButton-icon
Fournit des icônes pour le bouton
iconButton-label
Définit le style du libellé/de la légende du bouton
Variables
Description
button-border-size
Taille de bordure des boutons
button-border-type
Type de bordure
button-padding
Propriété de remplissage CSS du bouton
button-font-size
Taille de police du bouton
button-background-color
Couleur d’arrière-plan du bouton
button-font-color
Couleur de police du bouton
button-border-color
Couleur de bordure du bouton
button-large-padding
Marge intérieure des grands boutons (boutons avec la classe .buttonlarge)
button-large-font-size
Taille de police des grands boutons
button-small-padding
Marge intérieure des petits boutons (boutons avec la classe .buttonsmall)
button-small-font-size
Taille de police des petits boutons
button-info-background-color
Couleur d’arrière-plan des boutons informatifs (boutons avec la classe .buttoninformative)
button-info-font-color
Couleur de police des boutons informatifs
button-info-border-color
Couleur de bordure des boutons informatifs
button-warning-background-color
Couleur d’arrière-plan des boutons d’avertissement (boutons avec la classe .buttonwarning)
button-warning-font-color
Couleur de police des boutons d’avertissement
button-warning-border-color
Couleur de bordure des boutons d’avertissement
button-alert-background-color
Couleur d’arrière-plan des boutons d’alerte (boutons avec la classe .buttonalert)
button-alert-font-color
Couleur de police des boutons d’alerte
button-alert-border-color
Couleur de bordure des boutons d’alerte

Point d’interrogation

Pour les widgets, un point d’interrogation est affiché lorsque l’auteur ajoute une description longue dans le contenu d’aide. L’icône par défaut fournie dans l’amorçage est utilisée. Pour utiliser une icône personnalisée, vous pouvez personnaliser les icônes de l’amorçage.
Classe CSS
guideHelpQuestionMark
Variables
Description
questionmark-font-color
Couleur de l’icône
questionmark-hover-font-color
Couleur de l’icône lorsque le curseur survole au-dessus

Tableau

Vous pouvez modifier le thème de couleur de l’en-tête et des rangées de contenu d’un tableau en utilisant les variables suivantes.
Variables
Description
table-header-bg-color
Couleur d’arrière-plan de la barre d’en-tête. La valeur par défaut est #333 .
table-odd-row-bg-color
Couleur d’arrière-plan de la ligne de contenu impaire. La valeur par défaut est rgb(255, 255, 255) .
table-even-row-bg-color
Couleur d’arrière-plan pour la ligne de contenu paire. La valeur par défaut est #eee .

Pièce jointe

Le widget de pièce jointe des formulaires adaptatifs vous permet de télécharger des fichiers. Vous pouvez également personnaliser le widget à l’aide des variables.
Variables
Description
fileItemPadding
Marge intérieure pour les fichiers affichés dans le widget
fileItemBackground
Couleur d’arrière-plan pour l’élément de fichier
fileItemBorderColor
Couleur de bordure de la bordure supérieure
fileItemColor
Couleur de police pour l’élément de fichier
filePreviewIconColor
Couleur de l’icône d’aperçu (icône d’amorçage) dans le widget
fileItemCommentHeight
Hauteur de commentaire pour l’élément de fichier

Définition de style du panneau

Un panneau comporte une barre d’outils facultative et son contenu.
Classe CSS
guidePanelNode
Variables
Description
panel-background-color
Couleur d’arrière-plan du panneau
panel-font-size
Taille de police du texte du panneau
panel-font-color
Couleur de police du texte du panneau
panel-padding
Marge intérieure du panneau
panel-description-font-size
Taille de police de la description du panneau
panel-description-padding
Marge intérieure de la description du panneau
panel-help-bg-color
Couleur d’arrière-plan de l’aide du panneau
panel-help-border-indicator-color
Couleur de bordure de l’indicateur de l’aide du panneau
Le nœud du panneau est divisé en navigateurs et contenu. Il n’y a pas de composant de définition du style séparé pour le contenu. Les variables décrites sont appliquées sur le navigateur ainsi que sur le contenu.
&ast ; Le panneau supérieur (RootPanel) ne possède pas cette classe.

Styles mobiles

Barre d’en-tête

Ces variables influent sur la barre d’en-tête visible sur un périphérique mobile ou équipé qui contient un titre de panneau et les navigateurs Suivant et Précédent.
Classe CSS
guide-header-bar
Variables
Description
headerbar-background-color
Couleur d’arrière-plan de la barre d’en-tête
headerbar-font-color
Couleur de police du texte dans la barre d’en-tête
headerbar-padding
Marge intérieure de la barre d’en-tête

Indicateur de défilement

Ces variables influent sur l’indicateur de défilement, qui est une flèche orange qui s’affiche sur un périphérique mobile ou équipé d’un petit écran. Un indicateur de défilement indique la présence de contenu au-delà de la partie visible à l’écran. Vous pouvez faire défiler l’écran pour l’afficher. Lorsque vous atteignez la fin du contenu, la flèche disparaît.
Classe CSS
mobileScrollIndicator
Variables
Description
scrollIndicatorBottom
Position fixe de l’indicateur de défilement depuis le bas
scrollIndicatorRight
Position fixe de l’indicateur de défilement depuis la droite
scrollIndicatorWidth
Largeur de l’indicateur de défilement
scrollIndicatorHeight
Hauteur de l’indicateur de défilement

Variables spécifiques à la disposition de la barre d’outils fixe pour mobile

Ces variables dans le tableau suivant influent sur la disposition de la barre d’outils fixe pour mobile.
Classe CSS
mobileToolbar
Variables
Description
mobileToolbarBottom
Position fixe de la barre d’outils, sur un périphérique mobile, depuis le bas
mobileToolbarTop
Position fixe de la barre d’outils, sur un périphérique mobile, depuis le haut
mobileToolbarLeft
Position fixe de la barre d’outils, sur un périphérique mobile, depuis la gauche
mobileToolbarRight
Position fixe de la barre d’outils, sur un périphérique mobile, depuis la droite
mobileButtonIconTopMargin
Position fixe de l’icône des boutons de la barre d’outils, depuis le haut
mobileButtonIconWidth
Largeur de l’icône des boutons de la barre d’outils sur un périphérique mobile
mobileButtonIconHeight
Hauteur de l’icône des boutons de la barre d’outils sur un périphérique mobile
mobilefixedtoolbarbgcolor
Couleur d’arrière-plan de la barre d’outils sur un périphérique mobile