Operation Manual

435
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Minimum/Maximum special characters Specifies the minimum and maximum number of special characters (!, @, #,
and so on) required for the password to be valid.
Leaving any of the above options blank causes the widget not to validate against that criterion. For example, if you leave
the Minimum/Maximum numbers option blank, the widget does not look for numbers in the password string.
Customize the Validation Password widget
Although the Property inspector enables you to make simple edits to a Validation Password widget, it does not support
customized styling tasks. You can alter the CSS for the Validation Password widget so that you can create a widget that
is styled to your liking. For a more advanced list of styling tasks, see
www.adobe.com/go/learn_dw_sprypassword_custom_en.
All CSS rules in the topics below refer to the default rules located in the SpryValidationPassword.css file. Dreamweaver
saves the SpryValidationPassword.css file in the SpryAssets folder of your site whenever you create a Spry Validation
Password widget. Consulting this file is helpful because it contains commented information about various styles that
apply to the widget.
Although you can easily edit rules for the Validation Password widget directly in the accompanying CSS file, you can
also use the CSS Styles panel to edit the widget’s CSS. The CSS Styles panel is helpful for locating the CSS classes
assigned to different parts of the widget, especially if you use the panel’s Current mode.
More Help topics
“The CSS Styles panel in Current mode” on page 121
Style a Validation Password widget (general instructions)
1 Open the SpryValidationPassword.css file.
2 Locate the CSS rule for the part of the widget to change. For example, to change the background color of the
Password widget’s required state, edit the
input.passwordRequiredState rule in the
SpryValidationPassword.css file.
3 Make your changes to the CSS and save the file.
The SpryValidationPassword.css file contains extensive comments, explaining the code and the purpose for certain
rules. For further information, see the comments in the file.
Style Validation Password widget error message text
By default, error messages for the Validation Password widget appear in red with a 1-pixel solid border surrounding
the text.
❖ To change the text styling of Validation Password widget error messages, use the following table to locate the
appropriate CSS rule, and then change the default properties, or add your own text-styling properties and values.
Text to change Relevant CSS rule Relevant properties to change
Error message text
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState
.passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg
color: #CC3333; border: 1px solid
#CC3333;