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

1. Download JA Promo bar - access this link to download the module.

2. Install module - from your site back-end, go to: Extensions >> Manage, browse the module installation file and install.

For more info, please refer to the extension installation guide

Once the installation is done, go to: Extensions > Modules, open the setting panel of the module to configure.

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

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

Open the "Configuration" tab and you will see list of settings for the display of the promotion bar divided into groups.

The module provide flexible settings to build different promotion bar styles. This guide is just to show you how the module and its settings work.

1. General Settings

The panel includes settings for promo bar settings, link, styles.

1.1 Message configuration

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:

In the setting panel, 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

Configure Promotion Bar in Mobile

By default, the module is responsive but you can define which part in the promotion bar message will and 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". See the format below:

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

Front-end appearance:

1.2 Link & Styles Settings

The panel allows you to configure link (button style or text) and color settings.

Front-end appearance

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

Image Inline

You can add image like logo or icon to the promotion bar. In the "Inline Image", browse image and set size for the image.

Next, add tag {img} to the message configuration field in the "General" panel. Put the tag in any place in the message that you want to display the image in.

Front-end Appearance:

Background Settings

The module supports 2 background types: color background or image background.

In case you want to use background image, enable the "Use background image" option and browse the image you want.

Animation Setting Setting

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

Front-end appearance

Countdown settings

  • 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.