Personnalisation du widget Validation de confirmation



Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de confirmation, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Validation de confirmation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryconfirm_custom_fr.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryValidationConfirm.css. Dreamweaver enregistre le fichier SpryValidationConfirm.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de confirmation Spry. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Validation de confirmation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Définition du style du widget Validation de confirmation (instructions générales)

  1. Ouvrez le fichier SpryValidationConfirm.css.

  2. Accédez à la règle CSS pour la partie du widget à modifier. Par exemple, pour modifier la couleur d'arrière-plan de l'état obligatoire du widget Confirmation, modifiez la règle input.confirmRequiredState dans le fichier SpryValidationConfirm.css.

  3. Apportez les modifications désirées au code CSS puis enregistrez le fichier.

Le fichier SpryValidationConfirm.css contient de nombreux commentaires qui expliquent le code et le rôle de certaines règles. Pour plus d'informations, consultez les commentaires dans le fichier.

Définition du style du texte de message d'erreur d'un widget Validation de confirmation

Par défaut, les messages d'erreur du widget Validation de confirmation s'affichent en rouge, entourés d'un bord plein de 1 pixel d'épaisseur.

 Pour modifier le style des messages d'erreur d'un widget Validation de confirmation, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte.

Texte à modifier

Règle CSS pertinente

Propriétés à modifier

Texte de message d'erreur

.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

color: #CC3333; border: 1px solid #CC3333;

Modification des couleurs d'arrière-plan du widget Validation de confirmation

 Pour modifier les couleurs d'arrière-plan du widget Validation de confirmation dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut.

Couleur à modifier

Règle CSS pertinente

Propriété à modifier

Couleur d'arrière-plan du widget dans un état valide

.confirmValidState input, input.confirmValidState

background-color: #B8F5B1;

Couleur d'arrière-plan du widget dans un état non valide

input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input

background-color: #FF9F9F;

Couleur d'arrière-plan du widget actif

.confirmFocusState input, input.confirmFocusState

background-color: #FFFFCC;