Stacks4Stacks

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 FloatingContent, Gateway or TopBox instead. All three have many more customisable style settings and support for cookie tracking. The benefit with cookie tracking is that the stack will remember when it has been closed, and will not show again within a predetermined length of time.

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.

Here are four more AlertBar stacks; set to display within the normal page flow, styled with Twitter Bootstrap:

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 WebYep, Pulse 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.