Getting started

Quick guide  on getting this plugin into work (requirements and steps).

Included Files

After downloading the theme package un-zip it. Inside the package you will find the following files:

  • Izy Dashboard ( izy-dashboard.zip )
  • Pro Social Bar (with Navigation) ( pro-social-bar.zip )
  • Documentation (documentation.zip)
  • Licensing ( Licenses files )

How to install the plugin ?

We assume that you already have the wordpress installed in your server.
  1. Login to your wordpress admin panel
  2. Then go to Plugins which is at the left side of admin dashboard
  3. Click on "Add New" and then "Upload Plugin"
  4. Browse the recently unzipped folder, find "izydashboard.zip".
  5. Then press “Install now”.
  6. Repeat the same process but in step 4, choose another file "ProSocialBar.zip"

You must have "redux Framework" installed with your wordpress to complete the process.

After the plugin has been successfully installed, click on activate for installed plugins.

After activating the plugin, new section with name “Izyoption” appears at the left sidebar of admin dashboard.
And you are ready to use the highly customizable, easy to use “Pro social Bar (with navigation)”

If you have not installed "Redux Framework",
Go to plugins> Add New> search "Redux Framework". Then click on "Install Now".
( No need to activate this plugin, just install it. )

Redux is a simple, truly extensible and fully responsive options framework for WordPress themes and plugins.
Read more here : https://wordpress.org/plugins/redux-framework/

For more details on installing plugin, visit : Wordpress Plugin Installation.

(A) General

This section deals with the general setting of this plugin including position of bar, logo size of icon & bar, setting custom messages.

1. Disable Social Sharing Bar

This is a one click show/hide Pro Social Bar. If you click on “YES”, the social bar will be hidden from all page ( except short codes if have been used in posts).

2. Show Social Sharing Bar only in Post page

Choosing option “YES” will let you display the Pro Social Bar only in post page and keep it hidden in other pages like home page, contact page, about us page etc. You can also opt to control more of this bar from “Extras” tab.

3. Show Navigation & Social Sharing Bar

This option can be used to set the position of bar.

3.1 ALWAYS FIXED

Choosing this option will keep the Pro Social bar floating at the top of page despite of scrolling down or up.

3.2 ON SCROLL

This option works like “Always Fixed” option but gives you a control over social bar on managing how and when does the Pro Social Bar appears.

When this option is selected, more option will appear as below.

3.2.1 Show Top bar On :
On this section, you can choose when should the social bar be shown like 250px, 300px, 400px etc. You can use the slider to choose any numerical value you like.

This option works only when the Pro Social Bar is set to appear at the top. General> Position of Bar> Top

3.2.2 Transition Effect
You can also set the transition effect when appearing the social bar as

“Normal” – Pro social Bar appears without any effect,
“Slide down” – Pro Social Bar appears moving from top &
“Fade in” – Pro Social Bar appears as a fade in effect

3.2.3 Duration of Transition
You can also choose the duration of transition which will slow down or fasten the transition period of social bar when appearing. Default value is “250” milliseconds.

3.3 ON TOP OF PAGE

This option will fix the social bar at the top of page which will not float along with the scrolling of page. Choosing “On Top of Page” will automatically disable “Position of Bar”.

As shown in the example, the social bar is above the menu, and header which is fixed on the top of page – non floatable.

4. POSITION of BAR

Position of social bar can be set into all four directions i.e top, bottom, left & right.

5. Keep Topmost

Checking "YES" allows Pro Social Bar to appear at the top of any other bar.
Checking "NO" allows other bar of theme (basically menu bar) to appear over the Social Pro bar as shown in example.

Social Bar on Topmost

6. Background Full Width

Checking "YES" will allow social bar to cover full width of the device. Checking "NO" will set the Pro Social Bar to the size set in "Max-Width of Top bar".

Background Full Width

9. Position of Icon & Navigation

With this button, you can choose the position of Icons & Navigation buttons. Given Options are self explanatory.

Social Icons on Right

Social Icons on Right

Both (Social Icon & Navigations on right)

Social Icon and Navigations on right

10. Max-Width of Top Bar

You have the flexibility to choose the max-width of the social bar.
Default value is 960px but you can change it to smaller size or bigger than that too. Put value 0px to remove max-width limit and fit any screen.
Max. width full
Maximum Width : Full
Max. width full
Maximum Width : 1100 px
Max. width 700px
Maximum Width : 700 px

11. Padding/Spacing

You can change the height of social bar by increasing or decreasing the padding in a bar, default value is 10 px. Height is adjusted in top and buttom.

Social Bar Padding 10 px
Padding used : 10px
Social Bar Padding 10 px
Padding used : 30px

12. Message at the top part of Social bar

You can also display your custom message at the top part of Pro Social Bar. This section supports html property. Message can be displayed at the left, middle or right side.

Pro Social Bar message at top

Pro Social Bar message at top center

Pro Social Bar message at top right

13. Message at the middle part of Social bar

You can also display your message in the middle part of the Pro Social Bar. This section also supports html property.

Pro Social Bar message at middle left

14. Message at the bottom part of Social bar

You can also display your custom message at the bottom part of Pro Social Bar. This section also supports html property. Message can be displayed at the left, middle or right side.

Pro Social Bar message at bottom left


Pro Social Bar message at bottom middle

Pro Social Bar message at bottom right

(B) SOCIAL ICONS

This section gives user a power to control the various function of social icons used.

1. Hide Social Icons

You can click "YES" to hide all social icons only at once.

Hide Social Icons

2. Hide Social Sharing Count

Since the social bar have functionality to track social count. You can disable this functionality by clicking "YES".

Hide Social Sharing Count

With Social Sharing Count

3. Disable Icon Hover Effect

By default, whenever a mouse is pointed at the social icon a effect is seen – icon gets dimmed by certain percent. If you want to disable this effect, click "YES".

without hover effect

With hover-effect

4. Icon border

You can give some effect to your social icons.
You can give thickness to the border of Social icon. Thickness increases with the increase in numerical value.
Next to border thickness, you can choose type of border - solid, dashed, dotted & none.
Next to type of border, you can choose color of border which can be selected from color picker.

Social Icon with Borderdashed white borderdotted borderdashed borderSolid BorderIcon BorderIcon BorderSocial Icon BorderSocial Icon BorderSocial Icon BorderSocial Icon Border

5. Border Corner Radius

You can also set the radius/roundness of border according to your need.
Icon Border
Icon Border
Social Icon Border

6. Enable icon Background

Enabling this option gives a background color between icon and icon border. Enabling this option will show up a next option "Icon Background Color" through which you can choose the background color.

Social Icon BorderSocial Icon Border

7. Choose Your Icon Style

Set of social Icon is included with this plugin from which you can use any set.

8. Social Network

You can easily drag and drop the social network to the "disabled" area that you want to be disabled (hide from bar)
You can also interchange the position of social icons just by dragging and dropping.
Interchanging Social Icons
Backend Preview

Interchanging Social Icons
Adding/removing Social Icon 1

Interchanging Social Icons
Adding/removing Social Icon 2

9. Your own custom social networks icon

You can also upload custom social icons for listed social networks. Just click on "upload" and set you desired icons.
Social Icons uploading
Backend of Social Icon uploading

(C) NAVIGATION BUTTONS

This section gives you a control over navigation buttons.

1. Hide all Navigation buttons

Social bar contains a navigation buttons – Next, Previous & Random buttons. You can easily show/hide navigations buttons all at once. Clicking "ON" for "Hide all navigation buttons" will hide all navigation buttons.

Navigation Button Hidden
Without Navigation buttons

With Navigation Button
With Navigation buttons

2. Hide Random Button Only

Marking "ON" will hide random button only and keep next & previous button displayed.

Random Button Hidden

3. Choose Your Button Style

This social bar is loaded with 2 sets of navigation button styles. You can choose from that set or use a custom navigation buttons.

Navigation button Set 1Navigation button Set 2

(D) STYLING OPTIONS

This section is all about providing the required styles (shadow, border color, font customization, background property)

1. CSS3 Shadow

As you can give shadow to the bar. You can show or hide shadow of the bar in one click.

Pro Social Bar shadow
If you choose to show the shadow, two more option will appear.
 
  • You can give any color as a shadow to the bar through color picker.

  • Intensity of Shadow :
    You can also set the transparency of the shadow. Higher the percent, higher will be the intensity.




2. Border Line Properties

A border can be given to the social bar along with the shadow. Option available for shadow are size, type and color.
Size of border can be set in numerical value.
Next to Size of border is "type" and the type of border available are solid, dashed, dotted and can be chosen 'none' if border is not required.
Next to type of border is color of border which is easy to use as its a color picker.

Solid Border
Dotted Bar Border

dotted bar border

dashed bar border
Solid Bar Border


Solid Border

Orange Solid Bar Border

Small solid border

3. Text Properties

You can determine the property of texts thats used in the social bar Message box.

Font family

One can set the font of text used in message box. Choose the font that you want to use through drop down menu.
* Fonts chosen should be supported by browser otherwise default font of browser will be used.

 

Font weight & style :

One can also set the style and give weight to the font. The option is available in drop down menu next to "Font Family".

Text Align :

Texts used in social bar can be aligned in various ways as given in drop down menu. i.e. inherit, center, left, right, justify, initial

Font Size :

Adjusting the font size is easy by entering the desired numerical value in the given box.

 

Font Color :

You can also give some twist to your text by choosing the color through the color picker.

4. Background Properties

As a part of making this social bar very customizable, we have provided a option to use any color in the background, you can choose the color of background as well as set the transparency value of the Pro Social Bar.

White BackgroundGreen Background
Yellow BackgroundRed Bar BackgroundSemi-transparent reb background

*Choosing the transparency value will only change the transparency of background, not the social icons, navigation buttons and custom messages.


Not only background color, you can upload and set the desired picture as social bar background. If you have the exact size of picture that fits the screen that’s good and stays at the centre but you can use "repeat" option if the picture is smaller in size and display the desired bar width.

Blue gradient Background
 
Yellow gradient Background

Scene Bar Background

Multi-color bar background

Blue gradient background

5. Background Transparency

You can set the transparency value of the social bar background in percent (%) whether that is a picture or a color background.
Semi Transparent Color Background

Semi Transparent Color Background

(E) EXTRAS

This section gives access to some extra features that might be very useful to some users i.e hiding social bar from particular page, custom CSS and adsense settings.

1. Hide this bar from

You can use this option to hide the social bar from particular page
   
    • homepage   
    • blog
    • category archive page
    • tag archive page.


Checking the option will hide and unchecking this option will "display" the bar.

2. Custom CSS

You can also use custom CSS to manupulate the styles of objects displayed in social bar.
We recommend to play with custom CSS only if you know what you are doing exactly.

3. Adsense Code

You can use your adsense code to display in social bar. Just generate a code from google adsense, copy the code and paste it in this box.

Adsense bottom left
Adsense text linkAdsense Top MiddleAdsense link Top left

4. Show Adsense Only

As you know that adsense code can be displayed in the social bar, you can use this option to hide other option and display only adsense in the bar.

(F) THEMES

This social bar comes with readymade set of themes which you can use it instantly and if required – modify them as per your requirement.
If you like any theme listed there, just click "Activate" to use that theme.

(G) Addons

This section shows the new addons released for Pro Social Bar.

(H) Import/Export

This section deals with importing/exporting the settings of Pro Social Bar.

1. Import Options

  • Import from file

    If you have saved the settings earlier, click on “Import from File” and text box opens then copy and paste saved settings and then click on “Import”.

  • Import from URL

    As well as you can also import the settings from URL.

    For example, if you have made some settings and you like that setting, you can either save that setting or click on “Copy link” which is available in “Export Option”. You can save that link (without saving the file) and use it later or can send it to other users to use it in their Pro Social Bar.

WARNING! This will overwrite all existing option values, please proceed with caution!

2. Export Options

You made some settings and you liked it but you want to use it later, you will have 3 options what to do with that settings.

  • Copy

    Click on “copy” and settings will be copied in clipboard. Then you can save it in any file.

  • Copy Link

    You can copy the link and save it. Using this option, you don’t have to save the whole settings. You can only save the link and use it yourself later or you can forward it to someone who use Pro Social Bar.