Personalización del widget de contraseña de validación



Aunque el inspector de propiedades permite realizar cambios simples a un widget de contraseña de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de contraseña de validación y crear un widget con el estilo que desee. Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_sprypassword_custom_es.

Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationPassword.css. Dreamweaver guarda el archivo SpryValidationPassword.css en la carpeta SpryAssets del sitio cuando se crea un widget de contraseña de validación de Spry. Resulta útil consultar este archivo porque contiene información comentada sobre los distintos tipos de estilos que se pueden aplicar al widget.

Aunque es fácil editar las reglas para el widget de contraseña de validación directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del widget. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.

Aplicación de estilo a un widget de contraseña de validación (instrucciones generales)

  1. Abra el archivo SpryValidationPassword.css.

  2. Localice la regla CSS correspondiente a la parte del widget que desea cambiar. Por ejemplo, para cambiar el color de fondo del estado obligatorio del widget de contraseña, edite la regla input.passwordRequiredState en el archivo SpryValidationPassword.css.

  3. Realice los cambios deseados en el código CSS y guarde el archivo.

El archivo SpryValidationPassword.css contiene comentarios completos que explican el código y el objetivo de determinadas reglas. Para más información, consulte los comentarios en el archivo.

Aplicación de estilo al texto del mensaje de error del widget de contraseña de validación

De forma predeterminada, los mensajes de error del widget de contraseña de validación aparecen en rojo con un borde sólido de 1 píxel alrededor del texto.

 Para modificar el estilo del texto de los mensajes de error de un widget de contraseña de validación, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, modifique las propiedades predeterminadas o añada sus propiedades y valores de estilo de texto.

Texto que se modifica

Regla CSS correspondiente

Propiedades que hay que modificar

Texto del mensaje de error

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

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

Cambio de los colores de fondo del widget de contraseña de validación

 Para cambiar el color de fondo de un widget de contraseña de validación, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique los valores de color de fondo predeterminado.

Color que se va a cambiar

Regla CSS correspondiente

Propiedad que se va a modificar

Color de fondo de un widget en estado válido

.passwordValidState input, input.passwordValidState

background-color: #B8F5B1;

Color de fondo de un widget en estado no válido

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

background-color: #FF9F9F;

Color del fondo con widget seleccionado

.passwordFocusState input, input.passwordFocusState

background-color: #FFFFCC;