How do I display 2 bars in QAB?

We have had many requests for the ability to display more than one Quick Announcement Bar per page. While we're working on an official feature for that, here is a work around. It does require a little coding, but I'll try and keep it as simple as possible.

So the reason this hasn't been possible in the past is that the app can only insert one bar into a page. So even though you can have many bars active, only one will be displayed. The benefit to having multiple active bars is being able to to target bars and rotate bars.

That limitation is still true. But what we can do is create one bar that looks like multiple bars. That's what I'll walk you through.

The first thing you need to do is set the bar's padding to 0. So down in the style configuration section, below the font options, you'll see this area:

This is where you'll set the Bar padding to 0.

Now go back up to the message. The next thing to do is to remove any buttons. Do this by setting the Bar clickable option to Do not make bar clickable.

Now it's time to build the message. Under the message bar, click on (More options)

The message box will become larger:

Now clear the text inside the box:

Now we're set to begin building our bars.

For every bar you wish you display, paste this generic code in:

<div style="padding:14px; margin-left:-10px; width:100vw; background-color:gray; color:white">Message One!!</div>

In the preview you'll see this result:

The bar looks off centre and is going way off screen. That's ok for now. This is a work around, and so it looks a bit wonky now, but should look ok on the page. But what you can see are the colours and the message. All of that is set in the line of code you pasted.

background-color:gray; and color:white determine the colour of the bar and the text. If you scroll down in the configuration, you'll find the colour settings. These no longer apply since we're now building our bars with code, BUT! you can use them to get a colour code.

Using the colour picker, say you find a shade of blue you like. You can copy the colour code (also known as a hex code):

Now you can paste that in the message like this:

background-color: #226caa;

And the bar will then be that colour:

You can do the same for the colour of the text, which is the property "color".

At the beginning of the properties, you can see 'padding: 14px;'. That is the amount of space around the text. You can adjust the number to your liking. For example:

padding: 4px;
padding: 14px;
padding: 18px;
padding: 24px;

Whatever you like.

Finally, the actual message in the bar is that section between the > <.

Whatever you write in that space will be the message in the bar.

As for the font, you can still use the font picker in the configuration:

But it will apply to all bars. If you want each bar to have a different font, or one/some of the bars to have a particular font, you can set it as an attribute like you did for the colour.

font-family: Arial; is how you would do it. Just replace Arial with whichever font you would like:

And it doesn't matter what order the attributes are in.

Now just Save and test on your page.

As mentioned before, you can add new bars by pasting in that generic line:

<div style="padding:14px; margin-left:-10px; width:100vw; background-color:gray; color:white">Message One!!</div>

You can do this, theoretically, as many times as you like.