Notification boxes are colored boxes that allow you to differentiate content on a page.

Success Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam. In at imperdiet purus, a vestibulum risus.

Information Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam. In at imperdiet purus, a vestibulum risus.

Warning Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam. In at imperdiet purus, a vestibulum risus.

Danger Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam. In at imperdiet purus, a vestibulum risus.

NOTE: Columns were used to lay out the above sample boxes into two columns.


How to Add a Notification Box

  1. Place your cursor in the location where you wish to add the notification box.
  2. Select the Notifications Shortcode button from the editor interface.Notification shortcode button in the interface
  3. Note that there is a Toolbar Toggle button that shows and hides a collection of buttons in the interface.  Click this button if you don’t see the notifications shortcode button.
  4. Once you have clicked on the notification shortcode button, a dialog box will appear that allows you to pick a “Style.” The style options all correlate to the color of the box.  There are 4 color options:
    • Success  = Green box
    • Information = blue box
    • Warning = Yellow box
    • Danger = Red box
  5. Click the Insert Notification button and some shortcode will be added to the page.
  6. The shortcode will look something like this:
    [notification type="alert-success" close="false" ]Your Notification[/notification]
  7. Simply replace the Your Notification text with any content you want displayed in the box.  Be sure you don’t delete any of the brackets, [ or ].

Examples

Urology

They use columns to create the three-column layout and place a notification box inside each column. See the sample live on the Urology site.

notification box sample 1

TEACCH Autism Program

They use columns to create the two-column layout and place content in the first column and a notification box in the second.  See the sample live on the TEACCH web site.

notification box sample 2