Personalizzazione del widget Password convalida



Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Password convalida, non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Password convalida in modo da creare un widget con lo stile desiderato. Per un elenco più dettagliato delle attività relative agli stili, consultate www.adobe.com/go/learn_dw_sprypassword_custom_it.

Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationPassword.css. Durante la creazione di un widget Password convalida Spry, Dreamweaver salva il file SpryValidationPassword.css nella cartella SpryAssets del sito. Le informazioni contenute nel file sono utili poiché contengono commenti sui vari stili che possono essere applicati al widget.

Nonostante sia possibile modificare facilmente le regole del widget Password convalida direttamente nel file CSS associato, per modificare il CSS del widget potete anche utilizzare il pannello Stili CSS. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.

Applicazione di uno stile a un widget Password convalida (istruzioni generali)

  1. Aprite il file SpryValidationPassword.css.

  2. Individuate la regola CSS relativa alla parte di widget che desiderate modificare. Per modificare ad esempio il colore di sfondo dello stato obbligatorio del widget Password, modificate la regola input.passwordRequiredState nel file SpryValidationPassword.css.

  3. Apportate le modifiche alla regola CSS e salvate il file.

Il file SpryValidationPassword.css contiene una serie di commenti con spiegazioni relative al codice e allo scopo di determinate regole. Per ulteriori informazioni, leggete i commenti nel file.

Formattazione del testo dei messaggi di errore del widget Password convalida

Per impostazione predefinita, i messaggi di errore relativi al widget Password convalida vengono visualizzati in rosso, con un bordo pieno di un pixel attorno al testo.

 Per modificare lo stile del testo dei messaggi di errore di un widget Password convalida, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi modificate le proprietà predefinite o aggiungete proprietà e valori dello stile di testo desiderato.

Testo da modificare

Regola CSS pertinente

Proprietà relative da modificare

Testo del messaggio di errore

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

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

Modifica dei colori di sfondo del widget Password convalida

 Per modificare il colore di sfondo del widget Password convalida in vari stati, utilizzate la tabella che segue per individuare la regola CSS appropriata, quindi modificate i valori dei colori di sfondo predefiniti.

Colore da modificare

Regola CSS pertinente

Proprietà relativa da modificare

Colore di sfondo del widget in stato valido

.passwordValidState input, input.passwordValidState

background-color: #B8F5B1;

Colore di sfondo del widget in stato non valido

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

background-color: #FF9F9F;

Colore di sfondo del widget attivo

.passwordFocusState input, input.passwordFocusState

background-color: #FFFFCC;