Alongside different style and positioning options, a very useful feature in AlertBar is the 'content aware' setting, which can be combined with a CMS. This can be configured to allow you (or a client) to quickly broadcast an important message without access to RapidWeaver. With content aware enabled, AlertBar can be permanently kept in a page and will hide if the stack contains no message text. However, as soon as paragraph (<p>) tags are detected, then AlertBar will display. A number of free and paid CMS services can be used and the CMS Token field can let you define the name of the editable area, in the stack settings.

If you want a more powerful popup message stack which can be dismissed, then consider using Gateway instead. Gateway has many more customisable style settings and support for cookie tracking.

Please note, AlertBar requires a minimum of RapidWeaver 6 and Stacks 3. AlertBar will not function in older versions of Stacks or RapidWeaver. Bootstrap styles require a RapidWeaver theme with Bootstrap support, like all the themes we provide through ThemeFlood.

Examples

There are six AlertBar stacks demonstrated on this page. One is set to permanently display at the bottom of the page at all times. The second is displayed below and becomes fixed to the top of the page, when the page is scrolled up.
Hello World! I am an AlertBar, set to display fixed at the bottom of the page.
Hello World! I am a semi-transparent AlertBar, set to become fixed at the top of the page, when the page is scrolled up.
Here are four more AlertBar stacks; set to display within the normal page flow, styled with Twitter Bootstrap:
Danger!
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Information!
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Success!
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Warning!
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Setup

To setup an AlertBar stack, please carefully follow these instructions:
  1. Once AlertBox is installed into Stacks and RapidWeaver, click onto a Stacks page type or add a new Stacks page to your project
  2. Open the Stacks library. Drag and drop a copy of AlertBar into your Stacks page
  3. Where 'Drop stacks here' is shown, drag-and-drop a simple stack type, like styled text, Markdown, HTML code, columns, floats or images
  4. In the AlertBar settings, adjust any of the desired options like position, style, content width, content padding and alignment
  5. Preview your page in RapidWeaver to test AlertBar. Export or publish your project when done.

You can safely use multiple AlertBar stacks on the same webpage. However you cannot use multiple AlertBar stacks that share the same top or bottom positioning.

Adding CMS support

If you only want your AlertBar to display when there is content placed within it, then enable the Content Aware setting. This will check for the presence of <p> tags and content inside AlertBar, and display AlertBar if true.

Potentially a number of different CMS services could be used with AlertBar. The CMS Token setting can be used if your CMS requires you to define areas of your page that are editable by the CMS. CMS tokens could include ones like editable, cushy, surreal etc. Alternatively you may have a CMS stack you can drop directly into AlertBar, like DropCMS or PageLime. Anything that will present content inside a pair of paragraph <p> tags should work fine for content aware. If you are not using content aware, then almost any CMS stack can work.

Styling

By default, AlertBar uses a custom style, which permits you to adjust the bar background colour and text colour. If your RapidWeaver theme uses Bootstrap, then you can use one of the predefined Bootstrap styles instead (all ThemeFlood themes include Bootstrap). Further styling can be applied using custom CSS code.

When AlertBar is using fixed positioning, a z-index value of 9999 is applied. This should be more than adequate in most setups. However if you are finding AlertBar is going behind other page elements, you may need to adjust the positioning of those other elements on the page or inflate the z-index of AlertBar further with custom CSS code:

.alertBar {
z-index: 9999 !important;
}

Print / PDF support

AlertBar is automatically hidden when the page is printed or saved as a PDF. If you have content you want displayed on your printouts, you can use the UsefulStack to define this content.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.