Nice Notifications

Multi-use Responsive Notification Bars

Version 0.6

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Installing Nice Notifications is as easy as installing any other WordPress plugin. First thing you need to do is to extract the contents of the package file you downloaded from CodeCanyon on your hard-drive. You will find only 2 folders in it.

The documentation folder holds this User Manual, while the plugin folder holds a .zip file with the plugin itself.

Next important step is to login into your WordPress administration panel (wp-admin folder). Once you are in, on the navigation menu to your left there is a menu called Plugins. In the plugins section, you will find an Add New plugins button on top of the page.

There are several ways to add a new plugin: to upload it, to search on the WordPress repository or to upload it via FTP. We are going to use the first option (and easiest). So click on the upload option on top of the page. Once in the upload page, you have to select the .zip file located on the script folder you just extracted, and click on Install Now.

The uploading of the file may take a few moments depending on your internet speed, but it shouldn't take too long. Once the file was uploaded and installed, you will be prompted with several options. You should click on Activate plugin to start using it.

If you want to be sure the plugin was successully installed, you should check a new Nice Notifications menu has been created on the navigation bar on the left of your screen.

Congratulations! You have installed the plugin.

 

There is no better way to get started with using a plugin that to get your hands dirty on it. So here we will learn how to create a very simple Notification Bar while we also learn what each option we use means. If you feel this is too easy for you, feel free to continue to the next section of this User Manual. Now let's get started!

Getting Started

To start with our new Notification bar we will head to the Nice Notifications menu on the left sidebar. If you hold your mouse still on top of it, a menu should popup. Click on the Add New button.

A new Notification Bar editor page will open. You will notice 4 important areas on this page:

  1. Notification name: It's not necessary, but very important that you give your new notification bar an unique and descriptive name. It will let you recognize what notification bar you are working on when setting up other options on other sections of your WordPress administration panel.
  2. Global options: this set of options affect the whole Notification Bar and not one of it's layers. Here you can set global information like the background color, position, behavior, etc. More information on what each option means next.
  3. Alert Designer Preview: here you will see, real time, any changes you make on the next section. This preview block will let you see exactly (or pretty much) how your notification bar is going to look.
    Note: this preview block doesn't show animations whatsoever. To preview the animations you need to check them on your website.
  4. Layers: here is a list of your Notification Bar's current layers. This is where you manage every caption, image, icon, button or widget area on your bar. 

 

Working with the Layers

As maybe you have noticed already, layers are a very important part of Nice Notifications. Each layer represents an element on your notification panel. Under the preview block you can find a + New Layer button to create new layers to work with. Once created, you can choose what type of layer it will be. There are 5 types of layers: captioniconbuttonimage and widget area.

  • Caption: a caption layer is nothing but a text layer. You can use this layer to write anything from one word to a complete paragraph. You can use HTML code in it, so if you know HTML, I highly 
    recommend using it to make things look great.
  • Icon: an icon layer is just an Icon, and you can select it from a list of over 360 amazing Icons provided by Awesome Icons library. For a complete (easy to view) list of the Icons available, check out Awesome Icons webpage at http://fortawesome.github.io/Font-Awesome/icons/ .
  • Button: by setting your layer as a button, you will get a new set of options like padding, background color, hover colors, and of course, a link where the button points to.
  • Image: the image layer allows you to upload an image directly into the Notification Panel without having to manage your media through the WordPress Media editor.
  • Widget Area: a widget area is an area where you can embed Widgets like post lists, latest tweets, social icons, etc. There are countless free widgets available from the WordPress repository.

Each type of layer has a different set of options. Some are common to them all, but some represent certain properties that you can't find in the rest. For this example we don't care about each option, but you can read in detail about them in the Options section of this help file.

For this example, we will create a Notification that welcomes our visitors to our site, and gives them the option to go to another page. So, what we will need is 2 layers (one caption and one button).

You will find there is a default layer already. This layer is a Caption type layer, and you see it both on the Preview and on the Layer list. To see the options on this layer you can either double-click on it on the Preview, or click on the blue arrow button on the right of the layer. Once you have opened the layer's properties you will see an option called "Caption". This is the text your layer will display. Lets type in something like "Hello visitor, welcome to our site". You can then drag and drop the text on the preview block and position it wherever you like. Let's center it.

Next thing we can do is changing the font, text color and font-size to anything we want. If you have experience with other text or image manipulation program, you will find some shortkeys that help you compose your design easier and faster. For example, to change the font-size you can just delete and replace the number on Font Size option, but you can also increase or decrease the number using your scroll-wheel. You can do the same thing over the preview block, when your mouse is positioned over a layer.

Once you have done this, we will work a litte on the Animations. We will make our text appear with a fadeInDown effect 2 seconds after the page finished loading. For this, we select the fadeInDown animation from the Load animation list box, and select a delay of 2000 (remember, we are using miliseconds, not seconds). We can also set a speed of 500 miliseconds to be sure our animation looks nice.

We are done with our caption layer, so now we will make a "Read more" button to go with our text. To start with our button, you need to create a new layer using the + New Layer (1*) button on top of the layer list. A new layer will appear on to bottom of the list and activate itself automatically. You will also notice a new caption appeared on the preview block. This is because all new layers are by default captions. Next thing we have to do is to change the layer type to a button type (2*). As soon as we change the type, you will notice the preview caption text turns into a 'click me' (3*).

Maybe you didn't notice it, but also a new set of options appared on the layer options block. These are the options for the button type. We are going to change the background to something darker, lets say, blue,. and the color to white. You can also change the :hover colors to something similar. These hover attributes are the colors the button will turn to when you move your mouse over it. Its important to set a color slightly different so your visitor knows it's a button that actually works.

Other attributes we want to change are the Size, the Padding and the Border-radius. For this example we are going to set Size to 18, Padding to 10 and Border-radius to 5. So your button should look something like this right now.

To position the button you can just drag & drop it like any other layer, but since we are going to be positioning our button to the right of the Notification bar, it's important we let the script know we want it to be always there even in responsive mode (for example, in mobile devices or smaller screens). So, we will be setting the Alignment option to 'Align from the right', and then we are going to drag & drop it to where we want it (bottom right margin of the container is a good place).

So, we are done with our first banner. To save it you have to click on Publish button to the right of the screen, and Voilá.

It's important to understand what each option means to take advantage of all the power the plugin has to offer. So, here is a list of options and what they do.

Global Options

Global options are those that affect the Notification Bar itself and not any of its layers individually. They are on top of the edit screen, right below the title bar. Below, there is a list of all the options available here and what each option is.

OPTIONS DEFAULT VALUE DESCRIPTION
Height 100 px Height for the notification bar.
Width 960 px Width for the content zone of the notification bar.
Background #FFFFFF (white) Background color.
Position Top of page

Other available options are 'Float top' and 'Float bottom'.

Top of page: notification bar will be position on top, inside the BODY of the page.

Float top: notification bar will be floating outside of the BODY of the page, fixed on top of the screen.

Float bottom: notification bar will be floating outside of the BODY of the page, fixed on bottom of the screen.

Close button Yes

Other available options: no

Sets if the close (X) button is shown or hidden.

Close button color #FFFFFF (white) Color for the close button (X) to be set.
Remember closed... No

Other available options: yes

Remembers whether the visitor closed the notification bar or not. If set to yes, once the bar is closed, the site will remember the visitor's choise and won't show the alert again. If set to no, the bar will be shown every time.

Display All pages & Posts

Other available options: only pagesonly postsselected pages

This options decides the moment when your Notification bar will be shown. On all pages and posts equally, only on pages, only on posts, or on any given page you decide. In this last case, you will find a metabox on the page / post / anything-else editor page where you can choose what Notification bar to display.

Entrance animation fadeIn Select what type of animation the bar will be displayed with.
Entrance delay 0 The amount of time (in miliseconds) the script will wait before launching the notification bar.
Exit animation fadeOut Select what type of animation the bar will be hidden with.
Exit when... close button is clicked

Other available options: automatically

You can set the Notification bar to automatically hide after a given amount of time, or only when the button is clicked.

Exit delay 0 The amount of time (in miliseconds) the script will wait before closing automatically the notification bar.
Custom Class null A custom CSS class that will be included in your notification bar HTML.
CSS Styles null You can use this editor to add custom CSS styles to your notification bar.

When you click on Edit CSS button, a CSS code editor will popup. You will find there is some CSS code already in it. This is because the ID of the notification bar is set automatically by WordPress, and so the script adds you the base code to help you start.

 

Common layer options

  • Load Animation: just like the global Notification bar's options, you can give each layer an entrance  animation. You can also set a delay for the animation to start and an animation speed. Both these options should be set in miliseconds (1000 miliseconds = 1 second). Disabled means there will be no animation at all and the layer will just appear from the beginning.
  • Unload Animation: you can decide how long your layer will stay visible and what animation you want it to dissapear with. If set to Disabled, your layer will stay there forever.
  • Alignment: this option tells the script related to what side of the notification bar it should position your layer. For example, let's imagine you have a Text layer and a Button layer. You want your text positioned on the left and the button on the right. You could just drag & drop your layers using left aligntment and the Notification Bar will look great, but on Responsive mode, things might not look so smoothly. By giving your Layers a more intelligent alignment, you make sure your Bars look great on any device and screen size.
  • Position X: this is the amount of pixels from the LEFT or RIGHT borders your layer is positioned at. Depending on the value of your Alignment option, pixels will be counted from one side or the other.
  • Position Y: This is the amount of pixels from the TOP of the Notification bar. You can change it from if drag & drop isn't as sensible as you need.
  • Z-index: This is the Z axis of your layer,. this means, the depth of your layer related to the others. For example, a layer with a z-index of 1000 will be above one of a z-index of 900.
  • Custom Class: a custom CSS class to add to your layers. This is great for when you use external CSS or Javascript files and you want to be able to style or bind events to your layers.
  • Inline Styles: If you dont want to use external CSS files, you can put your styles here.

 

Caption layer options

Some options are exclusive for each type of layers, and others, although they are not common to all, are shared between two or more layer types. Here we will see on details all the non-common options for the Caption layer type.

  • Caption: here you can set the text to display on the caption. It can be one word or a whole paragraph. You can (and should) use HTML tags to make your text look nicer.
  • Font: here you can select from one of the available Google Web Fonts to be set to your caption. Some font combinations look better than others. Play around with it until you get to know them all.
  • Size: font size set in pixels.
  • Color: the color of the text.
  • Line height: this is the height of a line of text set in pixels. This is particularly important when writing a paragraph. You will notice sometimes the different lines of text appear to be too close or far from each other. Changing the line height you can set this.

 

Icon layer options

Some options are exclusive for each type of layers, and others, although they are not common to all, are shared between two or more layer types. Here we will see on details all the non-common options for the Icon layer type.

  • Icon: here is a list of all the Awesome Icons available for use. There are over 360 of them.
  • Size: font size set in pixels.
  • Color: the color of the text.
  • Line height: this is the height of a line of text set in pixels.
  • Link: you can set if you want the Icon to act as a link or not.
  • Link URL: the web address for the link.

 

Image layer options

Some options are exclusive for each type of layers, and others, although they are not common to all, are shared between two or more layer types. Here we will see on details all the non-common options for the Image layer type.

  • Image: you can either set a known url for an image or upload your own image.
  • Width: the width for your new image. Deleting the value will let you use the original size of the image.
  • Height: the height for your new image. Deleting the value will let you use the original size of the image.
  • Link: you can set if you want the Icon to act as a link or not.
  • Link URL: the web address for the link.

 

Button layer options

Some options are exclusive for each type of layers, and others, although they are not common to all, are shared between two or more layer types. Here we will see on details all the non-common options for the Button layer type.

  • Button text: sets the text shown on the button itself.
  • Size: the size of the text.
  • Color: the color of the text on resting mode.
  • Color:hover: the color of the text when you move your mouse on top of the button.
  • Background: the color of the button background on resting mode.
  • Background:hover: the color of the button background when you move your mouse on top of the button.
  • Line height: this is the height of a line of text set in pixels.
  • Padding: this is the amount of pixels you want between the text and the border of the button.
  • Link URL: the web address the button links to.

 

Widget Area layer options

Some options are exclusive for each type of layers, and others, although they are not common to all, are shared between two or more layer types. Here we will see on details all the non-common options for the Widget area layer type.

  • Width: the width for your widget area.
  • Height: the height for your widget area.

 

 

Adding Widgets

Adding widgets to our Notification bars is quite simple. First thing you need to do is to create a new layer and set it as a Widget Area layer. Just like we saw on the quick start guide, position it using drag & drop and set it's height and width using the layer properties. For the example, Im using something like this:

Notice I changed the name of the layer from Layer #0 to Widget Layer. Giving your layers different names, as well as giving your Notification bar a name is important because this way you will find them in other pages. To add an actual widget to your new Notification bar, we will go to the Widgets area of the WordPress administration panel. On the left sidebar, go to Appearance > Widgets

You will notice to the right of your screen a new Sidebar. If you click on it it will expand and you will be able to read to what notification bar and layer it belongs to. In this case, it is for My test notification bar > Widget Layer. You can add any widget from the list and it will appear on your notification bar the moment you save.

 

Adding Social Icons

When adding social icons on an alert bar, you don't have to use the 'icon layer' to create each of them. Nice Notifications includes a Social Icons widget a lot easier to use. What you have to do is create a new Alert Notification, include a Widget Area layer (don't forget to name both your alert and your widget area layer) and save/publish the alert. Then go to Appearance / Widgets and on the right sidebar you will find a Nice Notiication widget area. If you have more than one, expand them to read the description that tells you what alert and layer it belongs to. Once you found your widget area, on the left column, the widgets list, search for Nice Notification :: Social Widget. Drag and drop it on your widget area. Fill the addresses for your favourite socials and select the options you want.

When you are done save it, and refresh your website to see the changes on the notification bar.

 

Adding Forms to your Notification Bars

Nice Notifications Caption layers accept HTML code as well as WordPress Shortcodes. This said, we are going to consider you are using a plugin to manage your forms. Most form plugins let you create your form from the WordPress administration panel, and then give you a shortcode to copy/paste anywhere you want the form to be displayed. If you still don't have a form plugin installed, we recommend that you use Contact Form 7, since it's the most used plugin and it has been tested and working with Nice Notifications.

Once you have installed the Contact Form 7 plugin and created your first form, copy the shortcode it gives you, and paste it within a caption layer in your notification bar. Remember, you might need to style your form using CSS since Contact Form 7 styles its forms to be displayed vertically.

 

Adding Videos to your Notification Bars

Nice Notifications Caption layers accept HTML code as well as WordPress Shortcodes, this means you can insert videos on your notification bars either using the youtube/vimeo embed code, or using a plugin that does it for you and creates a shortcode.

The easiest way is to copy/paste the embed HTML code from your favourite video and paste it on a caption layer.

 

Adding a Notification on a single page

Sometimes you just want to create a Notification to let your visitors know something extra about a given page or article. This is possible setting your Notification display option to Only on selected pages.

Once your new notification has this property set, you need to let the script know on what posts or pages you want to display it. To achieve this you just need to go to the editor of that certain post or page, and at the bottom you will find a new section called Nice Notifications Options. You will see a list of all the available notifications where you can set active or inactive to any given number of them.