Creating Notification Bars

You can add Notification Bars based on one of 10 Pre-available Templates, or create your own Custom Template. Adding and configuring either is the same except that with Custom Templates, you have the ability to select your own colors, to match your color scheme. Notification Bars are highly customizable simply by selecting the options that you wish to include.

Template Based Notification Bar

To create a new Notification Bar based off of a Pre-available Template, do the following:

  1. From your Dashboard, navigate to Notifictation Bar Pro > Add New Bar
  2. Enter the Name of Bar – select a name that will identify your Notification Bar
  3. Click on the Notification Bar Layout heading (All headings can be expanded and collapsed by clicking on the heading title)
  4. Select a Pre-available Template. There are 10 Template options that feature different color schemes. The components shown are for demonstration purposes only. You’ll select your actual components in the next step.
  5. Click on the Notification Bars Components heading
  6. You can elect to Show or Hide components for the Left, Right sides of your Notification Bar, or Add an Open Panel
    • Left Panel Options – Add Social Media Icons. Slick the Add Social Icons button, then enter the Title, Select an Icon and enter the Icon Link (URL). Click the Add Icons button when finished. Repeat as needed.
    • Right Component Options – 
      • Choose Notification Components – Options include: Text, Opt-in Form (MailChimp or Constant Contact), Twitter Tweets, Post Title, RSS Feed, Marquee Text and Custom HTML. Each option opens a configuration window for its component.
      • Content Display Mode – Choose Static Content or Multiple Content
      • Notification Bar Effects – Select from Ticker, Slider or Scroller. Each option has different settings for speed, transitions and animation.
    • Add Open Panel – Lets you build an open panel with a Header, Footer and up to 3 columns for inserting Widgets. Configure Widgets by clicking on the pencil icon.
  7. Click on the Duration to Display Notification Bar heading – Use the date pickers to select the Start Date and End Date that you want your Notification Bar to display. If a date is not specified, the notification bar will always be displayed.
  8. Click on the Notifiction Bar Position heading and select from the drop down menus for:
    • Notification Bar Position – options are Top Fixed, Top Absolute, Bottom Left and Right. Your selection will be reflected in the Preview window.
    • Notification Bar Visibility – choose from: Always Show, Show after some time, or Hide after some time. Enter the Duration in milliseconds for Showing or Hiding after some time.
    • Notification Bar Close Button – choose to Disable, Show or Hide it or allow the User to Close. Elect to Show Only Once for Showing/Hiding or User Closing
    • Show Only Once For Logged in Users? – check to enable hide notification bar forever on click close button once or on dismiss toggle button once by logged-in Users.
  9. Custom Support – Only those experienced with CSS and Javascript should make edits to this tab.

Custom Template Notification Bar

To create a new Notification Bar based off of a Custom Template, do the following:

  1. From your Dashboard, navigate to Notification Bar Pro > Add New Bar
  2. Enter the Name of Bar – select a name that will identify your Notification Bar
  3. Click on the Notification Bar Layout heading (All headings can be expanded and collapsed by clicking on the heading title)
  4. Select Custom Design Template.
  5. Click on the Notification Bars Components heading
  6. You can elect to Show or Hide components for the Left, Right sides of your Notification Bar, or Add an Open Panel
    • Left Panel Options – Add Social Media Icons. Slick the Add Social Icons button, then enter the Title, Select an Icon and enter the Icon Link (URL). Click the Add Icons button when finished. Repeat as needed.
    • Right Component Options – 
      • Choose Notification Components – Options include: Text, Opt-in Form (MailChimp or Constant Contact), Twitter Tweets, Post Title, RSS Feed, Marquee Text and Custom HTML. Each option opens a configuration window for its component.
      • Content Display Mode – Choose Static Content or Multiple Content
      • Notification Bar Effects – Select from Ticker, Slider ot Scroller. Each option has different settings for speed, transitions and animation.
    • Add Open Panel – Lets you build an open panel with a Header, Footer and up to 3 columns for inserting Widgets. Configure Widgets by clicking on the pencil icon.
  7. Click on the Duration to Display Notification Bar heading – Use the date pickers to select the Start Date and End Date that you want your Notification Bar to display. If a date is not specified, the notification bar will always be displayed.
  8. Click on the Notification Bars Design heading. Use this panel to select all colors, fonts and other styles for your Notification Bar. Use the color pickers to select colors or enter hexadecimal color values in the color fields.Default font families are used, but you can select several font sizes. The Preview example will show you what your Notification Bar background color and font will look like (to ensure adequate contrast).
  9. Click on the Notification Bar Position heading and select from the drop down menus for:
    • Notification Bar Position – options are Top Fixed, Top Absolute, Bottom Left and Right. Your selection will be reflected in the Preview window.
    • Notification Bar Visibility – choose from: Always Show, Show after some time, or Hide after some time. Enter the Duration in milliseconds for Showing or Hiding after some time.
    • Notification Bar Close Button – choose to Disable, Show or Hide it or allow the User to Close. Elect to Show Only Once for Showing/Hiding or User Closing
    • Show Only Once For Logged in Users? – check to enable hide notification bar forever on click close button once or on dismiss toggle button once by logged-in Users.
  10. Custom Support – Only those experienced with CSS and Javascript should make edits to this tab.
Posted in Notification Bars