Copyright AlchemyThemes 2013
made with the Documenter v2.0
made with the Documenter v2.0
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!
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:
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: caption, icon, button, image and widget area.
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 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 pages, only posts, selected 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
