Personnalisation du widget Validation de mot de passe



Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de mot de passe, 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 mot de passe 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_sprypassword_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 SpryValidationPassword.css. Dreamweaver enregistre le fichier SpryValidationPassword.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de mot de passe 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 mot de passe 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 mot de passe (instructions générales)

  1. Ouvrez le fichier SpryValidationPassword.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 Mot de passe, modifiez la règle input.passwordRequiredState dans le fichier SpryValidationPassword.css.

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

Le fichier SpryValidationPassword.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 mot de passe

Par défaut, les messages d'erreur du widget Validation de mot de passe 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 mot de passe, 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

.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg

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

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

 Pour modifier les couleurs d'arrière-plan du widget Validation de mot de passe 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

.passwordValidState input, input.passwordValidState

background-color: #B8F5B1;

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

input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input

background-color: #FF9F9F;

Couleur d'arrière-plan du widget actif

.passwordFocusState input, input.passwordFocusState

background-color: #FFFFCC;