Header Notification Bar

Introduction

Header Notification Bar is a Joomla module which allows you to display a customizable notification bar at the top or bottom of your Joomla site. This documentation covers the installation, configuration, and usage of the Header Notification Bar module.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: HeaderNotificationBar_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the HeaderNotificationBar_UNZIP.zip package. After unzipping, you will find the following contents:

• Folder Joomla 3 & 4: This folder contains the installation file mod_header_bar_X.x.zip compatible with Joomla 3.x and Joomla 4.x.
• Folder Joomla 5: This folder contains the installation file mod_header_bar_X.x.zip compatible with Joomla 5.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Basic Settings

After installation go to Extensions > Module Manager and open Header Notification Bar. You will find the following options in the first tab.

• Change the "Title of the module if you want.
• Set show title to Hide
• Select an existing template position
• Choose the Status to Published

Which position should you activate the Header Notification Bar?

You can activate the extension in any of the existing positions of your template. It is recommended to activate the module in "debug" position if available.

Module Settings

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Extensions > Modules, and find Header Notification Bar in the list.

Module Settings

• Test Mode: Select whether to enable test mode to avoid setting cookies during testing.
  • Options: ON, OFF
• Notification Position: Choose the position of the notification bar.
  • Options: Header, Footer, Header Pushed
• Distance from Top (px): Set the distance from the top of the page in pixels (only for Header and Header Pushed positions).
• Distance from Bottom (px): Set the distance from the bottom of the page in pixels (only for Footer position).
• Appear on: Choose whether the notification should appear on page load or on scroll.
  • Options: On Page Load, On Page Scroll
• Scroll Amount: Enter the scroll amount after which the notification will show (only for On Page Scroll).
• Use: Choose whether to use a cookie or session to control the notification.
  • Options: Cookie, Session
• Cookie Expires in Days: Set the number of days before the cookie expires (only for Cookie).

Content Settings

• Message: Enter the message to be displayed in the notification bar.
• Button Text: Enter the text for the button (if any).
• Button URL: Enter the URL the button should link to.
• Button Target: Select whether the link should open in the same window or a new window.
  • Options: Same Window, New Window

Styling Settings

• Notification Bar Style: Option to choose the notification bar style to shadow or flat
• Shadow Color of Bar: Select the shadow colour of the notification bar. ( Visible when Notification Bar Style is set to Shadow)
• Background colour of Bar: Select the background colour of the notification bar. You can adjust the opacity here.
• Text Font: Option to set the font to user-defined or a Google font.
• Font: If the font is set to google font then choose a font from Google Fonts and enter the name of the font into this field. Example: Open Sans, Raleway.
• Text Color of Bar: Select the text color for the notification bar using the color picker.
• Text Size: Set the size of the text for the notification bar. Example: 14 which means 14 pixels.
• Text Align: Option to set the text to left, right or center of the notification bar.
• Hide Close Button: Option to show or hide the close button which is present at the right top corner.

• Notification Bar Style: Choose the style of the notification bar.
  • Options: Flat, Shadow
• Shadow Color: Set the color of the shadow (only for Shadow style).
• Background Color of Bar: Set the background color of the notification bar.
• Bar Padding: Set the padding around the bar (in pixels).
• Text Font Type: Choose the font type for the text.
  • Options: User Defined, Google Font
• Text Font: Specify the font for the text (if User Defined is selected).
• Text Color of Bar: Set the color of the text.
• Text Size: Set the size of the text.
• Text Align: Choose the alignment of the text inside the notification bar.
  • Options: Left, Center, Right
• Hide Close Button: Choose whether to hide the close button.
  • Options: No, Yes
• Button Settings:
  • Button Color: Set the color of the button.
  • Button Hover Color: Set the color of the button on hover.
  • Button Text Color: Set the color of the button text.
  • Button Text Size: Set the size of the button text.
  • Button Radius: Set the radius of the button corners.
  • Button Class: Add a custom class to the button for additional styling.

Advanced

• Module Class Suffix: Add a suffix to the module class for additional styling.
• Add Extra CSS: Add any extra CSS needed for further customization.

Features

Once configured, the Header Notification Bar module will display a notification bar according to your settings. You can customize the content, appearance, and behavior to fit your needs.

Features

• Customizable Notification Bar: Adjust the position, content, and appearance of the notification bar.
• Flexible Display Options: Choose when and how the notification bar appears (on load or scroll).
• Content and Button Support: Include custom messages and buttons with configurable links.
• Advanced Styling: Customize the background, text, and button styles.

FAQ

• How do I change the position of the notification bar?

  • Adjust the Notification Position setting under Module Settings.

• Can I make the notification bar appear on scroll?

  • Yes, set Appear on to On Page Scroll and specify the Scroll Amount.

• How do I customize the button in the notification bar?

  • Configure the Button Settings under Styling Settings.

• Can I hide the close button?

  • Yes, set Hide Close Button to Yes under Styling Settings.

Troubleshoot

• Notification Bar Not Displaying: Ensure the module is published and assigned to a visible position.
• Styling Issues: Check the Styling Settings and any custom CSS for conflicts.
• Content Not Updating: Clear the Joomla cache and browser cache to see changes.