Vous consultez actuellement l'aide de la version:

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 et de communication interactive accessibles au public. Vous pouvez  tirer parti de ces classes pour styliser divers composants d’un formulaire adaptatif ou d’une communication interactive. 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.

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 apparence est cohérente avec les pages Web sur lesquelles le formulaire adaptatif est intégré.

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 principales modifications de la convivialité du formulaire adaptatif, telles que les modifications de mise et page et le positionnement des composants, ne sont pas considérées comme des modifications du 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 réaliser cette tâche, créez ou mettez à jour vos fichiers .css personnalisés pour inclure les mises en forme répertoriées 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 supérieur. D’autres panneaux et champs se trouvent sous le composant de conteneur.

Classe CSS

guideContainerNode

Description des variables

Description des variables

conteneur-bgCouleur

Couleur d’arrière-plan du conteneur

conteneur-remplissage

Marge intérieure du conteneur

conteneur-marge

Marge du conteneur

conteneur-couleur de police

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. Le champ a également un nom de classe commun 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

champ-remplissage

Marge intérieure du champ

champ-erreur-police-couleur

Couleur de police du message d’erreur du champ

champ-erreur-police-taille

Taille de police du message d’erreur du champ

Définition de style de libellé

L’élément HTML label utilisé pour le champ inclut les classes left ou top selon si le libellé se trouve en haut ou à gauche.

Classe CSS

guideFieldLabel

Variables

Description

libellé-police-couleur

Couleur de police du libellé du champ

libellé-police-taille

Taille de police du libellé du champ

libellé-ligne-hauteur

Propriété de hauteur de ligne CSS pour le libellé du champ 

libellé-police-épaisseur

Propriété d’épaisseur de police CSS du libellé du champ 

libellé-marge

Marge du libellé du champ

Les règles CSS pour le libellé sont appliquées à l’aide de la classe guideFieldLabel. 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-couleur

Couleur d’arrière-plan des widgets (ne fonctionne pas pour les cases à cocher et les boutons radio)

widgets-bordure-couleur

Couleur de bordure des widgets

widgets-bordure-épaisseur

Taille de bordure des widgets

widgets-bordure-rayon

Rayon de bordure des widgets

widgets-bordure-type

Type de bordure des widgets

widget-bordure-focus-type

Type de focus des bordures de widget

widgets-bordure

Style de bordure consolidée des widgets

widgets-police-couleur

Couleur du texte dans le widget

widgets-police-taille

Taille du texte dans le widget

widgets-ligne-hauteur

Propriété de hauteur de ligne CSS du widget 

widgets-remplissage

Propriété de remplissage CSS du widget

widgets-focus-bordure-couleur

Couleur de bordure lorsque le widget est ciblé

widgets-obligatoire-bordure-couleur

Couleur de bordure du widget pour les champs obligatoires

widgets-obligatoire-BG-couleur

Couleur d’arrière-plan du widget pour les champs obligatoires

widgets-désactivé-BG-couleur

Couleur d’arrière-plan du widget lorsque le champ est désactivé

widgets-désactivé-police-couleur

Couleur de police du widget lorsque le champ est désactivé

widgets-désactivé-bordure-couleur

Couleur de bordure du widget lorsque le champ est désactivé

widget-hauteur

Hauteur du widget (ne fonctionne pas pour les cases à cocher et les boutons radio)

checkbutton-hauteur

Hauteur de la case à cocher et du bouton radio.

listboxwidget-hauteur

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 relâchée si l’aspect d’un champ change considérablement car il est 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. Les deux composants ont une classe commune .guideHelpDescription et une autre classe .long/.short, en fonction du type de 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-aide-longue-BG-couleur

Couleur d’arrière-plan de l’aide longue des widgets

widgets-aide-longue-bordure-couleur

Couleur de bordure de l’aide longue des widgets

widgets-aide-longue-bordure-indicateur-couleur

Couleur de bordure d’indicateur gauche de l’aide longue des widgets

widgets-aide-courte-BG-couleur

Couleur d’arrière-plan de l’aide courte des widgets

widgets-aide-courte-couleur

Couleur de police de l’aide courte des widgets

widgets-aide-courte-info-bulle-BG-couleur

Couleur d’arrière-plan de l’info-bulle d’aide courte des widgets

widgets-aide-courte-info-bulle-couleur

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- non visité Couleur de police du lien TnC non visité.
tnc-visité 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 :

  • input[type = text]
  • 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-icône

Fournit des icônes pour le bouton

iconButton-libellé

Définit le style du libellé/de la légende du bouton

Variables

Description

bouton-bordure-taille

Taille de bordure des boutons

bouton-bordure-type

Type de bordure

bouton-remplissage

Propriété de remplissage CSS du bouton

bouton-police-taille

Taille de police du bouton

bouton-arrière-plan-couleur

Couleur d’arrière-plan du bouton

bouton-police-couleur

Couleur de police du bouton

bouton-bordure-couleur

Couleur de bordure du bouton

bouton-grand-remplissage

Marge intérieure des grands boutons (boutons avec la classe .buttonlarge)

bouton-grand-police-taille

Taille de police des grands boutons

bouton-petit-remplissage

Marge intérieure des petits boutons (boutons avec la classe .buttonsmall)

bouton-petit-police-taille

Taille de police des petits boutons

bouton-information-arrière-plan-couleur

Couleur d’arrière-plan des boutons informatifs (boutons avec la classe .buttoninformative)

bouton-information-police-couleur

Couleur de police des boutons informatifs

bouton-information-bordure-couleur

Couleur de bordure des boutons informatifs

bouton-avertissement-arrière-plan-couleur

Couleur d’arrière-plan des boutons d’avertissement (boutons avec la classe .buttonwarning)

bouton-avertissement-police-couleur

Couleur de police des boutons d’avertissement

bouton-avertissement-bordure-couleur

Couleur de bordure des boutons d’avertissement

bouton-alerte-arrière-plan-couleur

Couleur d’arrière-plan des boutons d’alerte (boutons avec la classe .buttonalert)

bouton-alerte-police-couleur

Couleur de police des boutons d’alerte

bouton-alerte-bordure-couleur

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

point d’interrogation-police-couleur

Couleur de l’icône

point d’interrogation-survol-police-couleur

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

tableau-en-tête-BG-couleur

Couleur d’arrière-plan de la barre d’en-tête. La valeur par défaut est #333.

tableau-impair-ligne-BG-couleur

Couleur d’arrière-plan de la ligne de contenu impaire. La valeur par défaut est RVB (255, 255, 255).

tableau-pair-ligne-BG-couleur

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

Styles de navigateur

Il existe quatre types d’onglet de navigateur. Il s’agit des onglets sur la gauche, en haut, de l’assistant et en accordéon. Chaque navigateur possède une classe différente.

Navigateur

Classe CSS

Accordéon

.accordion-navigators

onglets sur la gauche

.tab-navigators-vertical

onglets en haut

.tab-navigators

Assistant

.wizard-navigators

Voici le code HTML pour l’élément de navigateur d’onglet (similaire aux onglets d’amorçage) :

<li>

<a>titre de l’onglet</a>

</li>

Le navigateur en accordéon est une exception, il dispose de la structure barebone suivante

 :

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... boutons répétables, si la configuration répétable est définie

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ contenu du panneau

</div>

</div>

 

Vous pouvez modifier la définition de style du navigateur à l’aide des règles CSS qui sélectionnent les éléments à l’aide de sélecteurs descendants. Par exemple, pour ajouter un style textdecoration à la balise d’ancrage :

 

Navigateur d’onglets en haut :

 

.tab-navigators

li a {

text-decoration :

underline;

}

Navigateur d’onglets à gauche :

.tab-navigators-vertical

li a {

text-decoration :

underline;

}

Navigateur en accordéon :

.accordion-navigators .guideHeader a .guideSummary {

text-decoration :

underline;

}

Navigateur de l’assistant :

.wizard-navigators

li a {

text-decoration :

underline;

}

En outre, il existe des classes pour définir le style des navigateurs d’onglets (gauche et haut) en fonction de la présence de navigateurs imbriqués ou enfants ou de sous-navigateurs.

Classe CSS

Description

nested_true

Navigateurs d’onglets (gauche et haut) qui ont des navigateurs imbriqués/enfants/sous-navigateurs

nested_false

Navigateurs d’onglets (gauche et haut) qui n’ont pas de navigateur imbriqué/enfant/sous-navigateur

La classe guideNavIcon fournit une icône par défaut aux navigateurs d’onglets (gauche et haut) et aux navigateurs de l’assistant.

Classe CSS

guideNavIcon

Remarque :

Vous pouvez modifier l’icône pour un navigateur particulier en fournissant une classe CSS dans le panneau de création, par exemple <CLASS_NAME>. Vous ajoutez <CLASS_NAME>_nav pour l’icône du navigateur.

Variables

Description

Navigateurs d’onglets

 

navigateur-BG-couleur

Couleur d’arrière-plan du navigateur d’onglets entier

onglets-BG-couleur

Couleur d’arrière-plan de l’onglet

onglets-police-couleur

Couleur de police de l’onglet

onglets-survol-BG-couleur

Couleur d’arrière-plan de l’onglet au survol

onglets-survol-police-couleur

Couleur de police de l’onglet au survol

onglets-actif-BG-couleur

Couleur d’arrière-plan lorsque le panneau est ciblé (actif)

onglets-actif-police-couleur

Couleur de police lorsque le panneau est actif

onglets-terminé-BG-couleur

Couleur d’arrière-plan lorsque l’expression d’achèvement du panneau renvoie true (vrai)

onglets-terminé-police-couleur

Couleur de police lorsque l’expression d’achèvement du panneau renvoie true (vrai)

onglets-par étape-BG-couleur

Couleur d’arrière-plan lorsque le panneau a été activé une fois mais que l’expression d’achèvement renvoie false (faux) 

onglets-par étape-police-couleur

Couleur de police lorsque le panneau a été activé une fois mais que l’expression d’achèvement renvoie false (faux) 

onglets-bordure-couleur

Couleur de bordure de l’onglet

onglets-police-taille

Taille de police de l’onglet

onglets-remplissage

Marge intérieure de l’onglet

onglets-marge

Marge de l’onglet

onglets-vertical-marge

Marge des onglets verticaux

onglets-bordure-épaisseur

Taille de bordure des onglets

onglets-min-hauteur

Hauteur minimale des onglets

hiérarchique-retrait

Retrait des onglets imbriqués

Navigateurs de l’assistant

 

assistant-navigateur-BG-couleur

Couleur d’arrière-plan du navigateur entier de l’assistant

assistant-onglets-BG-couleur

Couleur d’arrière-plan de l’assistant

assistant-onglets-police-couleur

Couleur de police de l’assistant

assistant-onglets-actif-BG-couleur

Couleur d’arrière-plan lorsque le panneau est ciblé (actif)

assistant-onglets-actif-police-couleur

Couleur de la police lorsque le panneau est ciblé (actif)

assistant-onglets-terminé-BG-couleur

Couleur d’arrière-plan lorsque l’expression d’achèvement du panneau renvoie true (vrai)

assistant-onglets-terminé-police-couleur

Couleur de police lorsque l’expression d’achèvement du panneau renvoie true (vrai)

assistant-onglets-par étape-BG-couleur

Couleur d’arrière-plan lorsque le panneau a été activé une fois mais que l’expression d’achèvement renvoie false (faux) 

assistant-onglets-par étape-police-couleur

Couleur de police lorsque le panneau a été activé une fois mais que l’expression d’achèvement renvoie false (faux)

assistant-onglets-bordure-couleur

Couleur de l’assistant

assistant-onglets-police-taille

Taille de police de l’assistant

assistant-onglets-remplissage

Marge intérieure de l’assistant

assistant-onglets-bordure-épaisseur

Taille de bordure de l’assistant

assistant-nav-puce-bordure

Couleur de bordure de la puce du navigateur de l’assistant (devant la légende/le libellé)

assistant-progression-BG-couleur

Couleur d’arrière-plan de la barre de progression du navigateur de l’assistant

assistant-progression-couleur

Couleur de remplissage de la barre de progression

Navigateurs en accordéon

 

accordéon-onglets-remplissage

Marge intérieure de l’accordéon

Définition de style du panneau

Un panneau comporte une barre d’outils facultative et son contenu.

Classe CSS

guidePanelNode

Variables

Description

panneau-arrière-plan-couleur

Couleur d’arrière-plan du panneau

panneau-police-taille

Taille de police du texte du panneau

panneau-police-couleur

Couleur de police du texte du panneau

panneau-remplissage

Marge intérieure du panneau

panneau-description-police-taille

Taille de police de la description du panneau

panneau-description-remplissage

Marge intérieure de la description du panneau

panneau-aide-BG-couleur

Couleur d’arrière-plan de l’aide du panneau

panneau-aide-bordure-indicateur-couleur

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.

*Le panneau supérieur (RootPanel) ne dispose pas de 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

barre d’entête-arrière-plan-couleur

Couleur d’arrière-plan de la barre d’en-tête

barre d’entête-police-couleur

Couleur de police du texte dans la barre d’en-tête

barre d’entête-remplissage

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

Variable spécifique au thème

Le thème Simple enrollment (inscription simple) dans /etc/clientlibs/fd/af/guidetheme/simpleEnrollment et la catégorie guide.theme.simpleEnrollment introduisent également quelques variables. Si vous souhaitez créer un thème qui améliore l’inscription simple, vous pouvez utiliser les variables supplémentaires suivantes :

Variables

Description

bouton-focus-BG-couleur

Couleur d’arrière-plan du bouton actif

bouton-survol-BG-couleur

Couleur d’arrière-plan du bouton au survol

bouton-rayon

Rayon du bouton

navigation-bouton-BG-couleur

Couleur d’arrière-plan des boutons de navigation (Précédent/Suivant)

navigation-bouton-BG-survol-couleur

Couleur d’arrière-plan des boutons de navigation (Précédent/Suivant) au survol

initial-nav-couleur

Couleur d’arrière-plan des navigateurs de l’assistant et de la barre de progression correspondante, lors du premier rendu.

actif-nav-couleur

Couleur d’arrière-plan du navigateur de l’assistant actuel/actif et de la barre de progression correspondante 

visité-nav-couleur

Couleur d’arrière-plan des navigateurs de l’assistant et de la barre de progression correspondante, qui ont été consultés.

onglets-bifurcation-bordure-couleur

Couleur de bordure de bifurcation du conteneur dans les navigateurs et le panneau

onglets-navigateur-séparateur-couleur

Couleur de bordure inférieure séparant les onglets pour les onglets sur la gauche (tabNavigators).

onglets-enfant-nav-BG-couleur

Couleur d’arrière-plan des navigateurs imbriqués/enfants/sous-navigateurs du navigateur.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne