Messages
Messages provide the user with information after performing an action. The messages fall into four categories - error, warnings, informational and confirmation.
The default message type is an error message.
Error Message (default)
Warning Message
Information Message
Confirmation Message
Classes
- lotusMessage - gives you the default error message
- lotusWarning - additional class for warning message
- lotusInfo - additional class for informational message
- lotusConfirm - additional class for confirmation message
- lotusDelete - class for optional close icon
Basic Implementation
Create a div and assign it the class lotusMessage.
Put the appropriate image inside the div, and wrap the message text in a span tag.
If a close button is desired, add a link surrounding a blank image (see code tab, error message example) assigned the lotusDelete class.
Variations
See the above classes for additional classes to use on the lotusMessage div.
Examples
Sample HTML - Error Message
Sample HTML - Warning Message
Sample HTML - Information Message
Sample HTML - Confirmation Message
CSS (messages.css)
Theme CSS (messagesTheme.css)
April 2007: added optional close icon to the error message.
We used to just have one message box. Now we have 4 different types of messages.