Features

  • Allow notification to be closed
  • Opt to have close button appear on hover
  • Set width of notification
  • Hide notification after delay
  • Choose from preset color options
  • Place notification in upper right- or left-hand side of page
  • Customize notification's opacity
  • Include drop shadow
  • Dodge mode allows items under notification to be seen

Example

The Notification stack example can be seen at the top left corner of this page. We’ve opted for to allow the notification to be dismissed. Check it out and give it a try by clicking the close X icon.


Using Notifications

General

Title & Message
Set the title and text for your notification here.

Closeable
Decide whether visitors will be able to dismiss your notification. We highly recommend that they be allowed to.

Show Close Button on Hover
If you’ve made your notification dismissible you can use this feature to make the close button only show when the notification is hovered over.

Alignment
Set the placement of your notification. You can place it on the right- or left-hand side of the page.

Positioning
Allows you to set the distance from the right or left of the page as well as the top. This allows you to adjust the spacing between your notification and the edge of the browser window.

Style

Width
Set the size of your notification popup.

Opacity
You can adjust the opacity of the notification as a whole, allowing it to be slightly translucent.

Style
Allows you to choose from 3 preset styles for the notification popup.

Shadow
Add a subtle shadow to your popup to set it apart from the background.

Advanced

Hide After Delay
Allows you to have the notification go away after a period of time, which you specify.

Dodge Mode
When enabled the notification will dim itself when hovered over so that the visitor can more clearly see the page contents behind the notification.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us