Operation Manual

423
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Although you can easily edit rules for the Validation Text Field 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 Validation Text Field widget error message text
By default, error messages for the Validation Text Field widget appear in red with a 1-pixel border surrounding the text.
❖ To change the text styling of Validation Text Field 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:
Change Validation Text Field widget background colors
❖ To change the background colors of the Validation Text Field widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values:
Working with the Spry Validation Text Area widget
About the Validation Text Area widget
A Spry Validation Text Area widget is a text area that displays valid or invalid states when the user enters a few
sentences of text. If the text area is a required field and the user fails to enter any text, the widget returns a message
stating that a value is required.
The following example shows a Validation Text Area widget in various states:
Text to change Relevant CSS rule Relevant properties to change
Error message text
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState
.textfieldInvalidFormatMsg, .textfieldMinValueState
.textfieldMinValueMsg, .textfieldMaxValueState
.textfieldMaxValueMsg, .textfieldMinCharsState
.textfieldMinCharsMsg, .textfieldMaxCharsState
.textfieldMaxCharsMsg
color: #CC3333; border: 1px solid
#CC3333;
Color to change Relevant CSS rule Relevant property to change
Background color of widget in
valid state
.textfieldValidState input,
input.textfieldValidState
background-color: #B8F5B1;
Background color of widget in
invalid state
input.textfieldRequiredState,
.textfieldRequiredState input,
input.textfieldInvalidFormatState,
.textfieldInvalidFormatState input,
input.textfieldMinValueState,
.textfieldMinValueState input,
input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState,
.textfieldMinCharsState input,
input.textfieldMaxCharsState,
.textfieldMaxCharsState input
background-color: #FF9F9F;
Background color widget in
focus
.textfieldFocusState input,
input.textfieldFocusState
background-color: #FFFFCC;