JA Promo Bar - Free Joomla 2.5 and Joomla 3 extension documentation | Joomla Templates and Extensions Provider

JA Promo Bar

Free Joomla 3 and Joomla 2.5 module to display promotion bar in your site

If you are new to Joomla, you can check our detail guide of how to install extensions in your Joomla site. This guide shows you not only how to install extensions but also how to set up the new installed extensions.


Publish Module

Open module setting panel, in the detail tab, publish the module then assign to a position

Assign module

In the "Menu Assignment", tick on the menu items that you want to display the module on.

In the message box, you can add button and countdown to any position by adding {button} and {countdown}.

<span>JA Promo Bar Module demo on normal screen</span>{countdown} {button}

Front-end appearance

On normal screen

On small screens like Mobile

You can define which part in the promotion bar message will not be displayed in mobile by using class class="hidden-phone".

Put things that you don't want to display in mobile inside class class="hidden-phone".

<span>Demo for JA Promotion Bar Module</span>
<span class="hidden-phone">{countdown}{button}</span>

Front-end appearance

Color Settings

You can change the background color, text color, border color, control button color.

Other settings

You can make the Promo bar sticky or not, you can also set transparent for promo bar when you scroll your site down.

  • Sticky Promo Bar: make promo bar sticky on top when scrolling down
  • Sticky Transparent: set transparent level for promo bar when scrolling down
  • Push Page Down ?: if enabled, your site space will be pushed down for Promo bar space.
  • Custom Style: add custom code to style for the Promo bar.

Front-end appearance

The button settings allow you to add link for link label. You can select style for the button: text link or button. You can also select color for link text, button background.

Front-end appearance

You can display button in any position in message box by adding tag {button} to the position you want.

Fist, select speed of animation: fast or slow then select animation type: Linear, swing, cubic ...

Front-end appearance

  • Step 1: enable Promo bar then set end date
  • Step 2: enter text when countdown is over
  • Step 3: select color for countdown background, text, number, number background ...


When configuring the Display format, please follow the format in the table below.

Directive Blank-padded Description
%Y %-Y Years left *
%m %-m Monts left *
%w %-w Weeks left
%d %-d Days left (w/o weeks)
%D %-D Total amount of days left
%H %-H Hours left
%M %-M Minutes left
%S %-S Seconds left

For more detail, you can check it out at: http://hilios.github.io/jQuery.countdown/documentation.html#formatter

Front-end appearance

You can display countdown in any position in message box by adding tag {countdown} to the position you want.