Progress Bars WordPress Cornerstone DZS

Created: 03/04/2016
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments
Thank you for purchasing our component. If you have any questions that are beyond the scope of this help file, you can ask them in the Item Discussions.

Intro - top

DZS Progress Bars is the ultimate gallery for your videos.

Features

What do you get?

 

 

Installation - top

There are two ways to install the plugin

Method 1 - Direct WordPress Install

  1. Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
  2. Unzip it with your preffered unziping utility. On Windows, there can be some warnings while unziping. Those are nothing to worry about if they appear, they are just Mac OS X files that cannot be read by Windows.
  3. Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
  4. Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
  5. Access the admin panel from the Settings panel
  6. Add a new gallery from the Add Slider button.
  7. Start cusomizing to your needs. Have fun!

Method 2 - FTP Install

  1. Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
  2. Unzip it with your preffered unziping utility. On Windows, there can be some warnings while unziping. Those are nothing to worry about if they appear, they are just Mac OS X files that cannot be read by Windows.
  3. Then, if the folder dzs-progressbars is zipped, unzip that too. Then copy the folder in the wp-content/plugins folder
  4. Then in your wordpress installation, in the Plugins panel, locate DZS Progress Bars and click Activate
  5. Access the admin panel from your Dashboard > Progress Bars
  6. Add a new gallery from the Add Slider button.
  7. Start cusomizing to your needs. Have fun!

_______________

You can now add video galleries you create in the Progress Bars Admin into any post or page. You'll have these extra CornerStone elements

 

 

 

 

 

Adding to the Post / Page - top

  1. access / create your post / page
  2. search for the new elements
  3. customize the settings
  4. All done!

 

 

Special Features- top

Several examples are included in the package, 6 skins are included in the builder so you can quick start your editing. You can have variables that are replaced dinamically while the progress bars animate. Might be overwhelming to understand them all but you can search the examples for easily understanding. A cheatsheet can be found below:

 

The Settings
{{perc}}
outputs the current percentage, for exaample if the progress is at 47% it will output 47%
 
{{perc-decimal}}
outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47
 
{{perc100-decimal}}
it's the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%
 
{{center}}
it will center the element, currently available only for the Top property
 
{{percmaxnr}}
outputs the current number relative the percent, you set the number in the <strong>Animation Number</strong> field.
 
 
Let's analyze a simple shortcode
[dzsprogressbar skin="prev1" arg1_perc="52" arg2_maxnr="300"]{{perc}} {{percmaxnr}}[/dzsprogressbar]

skin – the selected skin

arg1_perc – the percent at which the circle animates

arg2_maxnr – the final number ( will only come to this exact value when perc is animated finally to 100 )

- – the rest of the variables can be inside the content

 

{{perc}} -outputs the current percentage, for exaample if the progress is at 47% it will output 47%

{{perc-decimal}} – outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47

{{perc100-decimal}} – it’s the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%

{{center}} – it will center the element, currently available only for the Top property

{{percmaxnr}} – outputs the current number relative the percent, you set the number in the Animation Number field.

 
 
How to use the builder

You can create multiple skins and save them via the included builder.

 
How to use special font on the progress bars text

Just write this in your WP Dashboard > Zoom Progress Bars > Settings , Extra CSS field

<style>
.dzs-progress-bar{
font-family: "Open Sans", sans-sarif;
font-weight: 300;
}
</style>

 

How to setup a multi column

Like so:

Youu can use a page builder ( like Visual Composer ) .. or if you don't have one. You can just select the Text editor in the post edit screen and write this html code

<div style="font-size:0;"> <div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="150"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div><div style="display:inline-block; width: 25%;"> [dzsprogressbar skin="prev3" arg1_perc="100" arg2_maxnr="100"][/dzsprogressbar] </div> </div>

 

How to place a number counting to the max number

 

When modifying the skin you want to use, or creating a new one, just click the number you want to go to max number.

Then make sure it reads {{percmaxnr}}

 

Developer Tips / advanced usage - top

This gallery provides source files ( in the source folder ) so if you are developer you can start customizing it.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend: