Operation Manual

426
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Create a hint for a text area
You can add a hint to the text area (for example, “Type your description here”), to let your users know the kind of
information they should enter in the text area. The text area displays the hint text when the user loads the page in a
browser.
1 Select a Validation Text Area widget in the Document window.
2 In the Property inspector (Window > Properties), enter a hint in the Hint text box.
Block extra characters
You can prevent your users from entering more than the maximum number of allowed characters in a Validation Text
Area widget. For example, if you select this option for a widget set to accept no more than 20 characters, the user will
not be able to type more than 20 characters in the text area.
1 Select a Validation Text Area widget in the Document window.
2 In the Property inspector (Window > Properties), select the Block Extra Characters option.
Customize the Validation Text Area widget
Although the Property inspector enables you to make simple edits to a Validation Text Area widget, it does not support
customized styling tasks. You can alter the CSS for the Validation Text Area 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_sprytextarea_custom.
All CSS rules in the topics below refer to the default rules located in the SpryValidationTextArea.css file. Dreamweaver
saves the SpryValidationTextArea.css file in the SpryAssets folder of your site whenever you create a Spry Validation
Text Area 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 Text Area 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 Area widget error message text
By default, error messages for the Validation Text Area widget appear in red with a 1-pixel border surrounding the text.
❖ To change the text styling of Validation Text Area 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 Area widget background colors
❖ To change the background colors of the Validation Text Area widget in various states, use the following table to
locate the appropriate CSS rule, and then change the default background color values:
Text to change Relevant CSS rule Relevant properties to change
Error message text
.textareaRequiredState
.textareaRequiredMsg,
.textareaMinCharsState
.textareaMinCharsMsg,
.textareaMaxCharsState
.textareaMaxCharsMsg
color: #CC3333; border: 1px solid #CC3333;