Personalizzazione del widget Conferma



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

Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationConfirm.css. Mentre create un widget conferma convalida Spry, Dreamweaver salva il file SpryValidationConfirm.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 Conferma 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 Conferma convalida (istruzioni generali)

  1. Aprite il file SpryValidationConfirm.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 Conferma, modificate la regola input.confirmRequiredState nel file SpryValidationConfirm.css.

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

Il file SpryValidationConfirm.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 Conferma convalida

Per impostazione predefinita, i messaggi di errore relativi al widget Conferma 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 Conferma 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

.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg

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

Modifica dei colori di sfondo del widget conferma convalida

 Per modificare il colore di sfondo del widget Conferma 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

.confirmValidState input, input.confirmValidState

background-color: #B8F5B1;

Colore di sfondo del widget in stato non valido

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

background-color: #FF9F9F;

Colore di sfondo del widget attivo

.confirmFocusState input, input.confirmFocusState

background-color: #FFFFCC;