Module messages are used when developers need to communicate to users the results of their interactions. The main goal of these messages is to enhance the user experience while they're interacting with the site or a module.

The above examples shows different patterns and usages of a variety of scenarios. Basically, there are four types of messages:

• Success (.dnnFormSuccess): is used to communicate if a task is performed successfully
• Informational (.dnnFormInfo): is used to provide additional information to assist users in completing a task
• Warning (.dnnFormWarning): is used to give a warning about certain results will caused that might not be reversed when user performs this action
• Error (.dnnFormValidationSummary or .dnnFormError): is used to communicate if an action performed unsuccessfully. For inline validation use .dnnFormError. Use .dnnFormValidationSummary to provide error summary report.

Depending on the type of action a user takes, it is recommended to use standard messaging as above to improve communication and prevent users from making mistakes.

The common element from this pattern is .dnnFormMessage. You must always start with this CSS selector then define the type of message (error, success, warning, or informational) by adding the appropriate CSS selector to get the desired effect. See the "View Markup" tab for the code example.

<div class="dnnFormMessage dnnFormWarning">This is a warning!</div> <div class="dnnFormMessage dnnFormInfo">This is informational!</div> <div class="dnnFormMessage dnnFormSuccess">This is a success message!</div> <div class="dnnFormMessage dnnFormValidationSummary">This is an error!</div> <div class="dnnForm"> <fieldset> <div class="dnnFormItem"> <label>A simple label</label> <input /> <span class="dnnFormMessage dnnFormError">This is invalid!</span> </div> </fieldset> </div>

.dnnFormMessage { -moz-border-radius: 3px; border-radius: 3px; padding: 10px 10px 10px 40px; line-height: 1.4; margin: 0.5em 1em; } .dnnFormMessage span { float: none; padding: 0; width: 100%; text-align: left; text-shadow: 0px 1px 1px #fff; } .dnnFormWarning { background: #feffce url(../../images/warning-icn.png) no-repeat 10px center; border: 2px #cdb21f solid; color: #41370C; text-shadow: 0px 1px 1px #fff; } .dnnFormValidationSummary { background: #f7eaea url(../../images/error-icn.png) no-repeat 10px center; text-shadow: 0px 1px 1px #fff; color: #900; border: 2px #df4a40 solid; } .dnnFormError { color: #fff !important; background: url(../../images/errorbg.gif) no-repeat left center; text-shadow: 0px 1px 1px #000; padding: 5px 20px; } .dnnFormItem span.dnnFormMessage.dnnFormError { position: absolute; left: 55%; top: 0; z-index: 9999; } .dnnFormSuccess { background: #ecffeb url(../../images/success-icn.png) no-repeat 10px center; border: 2px #64b657 solid; color: #358927; } .dnnFormInfo { background: #edf8ff url(../../images/help-icn.png) no-repeat 10px center; border: #46a3d3 2px solid; color: #085b8f; text-shadow: 0px 1px 1px #fff; }