Progress Bars WordPress Cornerstone DZS
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments
Intro - top
DZS Progress Bars is the ultimate gallery for your videos.
Features
- total freedom - customise buttons, activate scrollbar on/off, resize thumbs, everything is at your disposal with this gallery!
- hybrid - it can be a video player / example in the preview
- reusable - for flash import: easy guide in the documentation, for html import: just copy/paste a single code, no plugins required
- extensive admin panel - admin panel with lots of options to make the gallery as customizable as possible, yet easy to use. Comes with a drag & drop html5 uploader too! And awesome functionality like drag & drop for items, duplicate galleries etc. to make your life easier while editing the gallery. You can setup unlimited number of galleries in the admin as well as put them in the content.
- backup database / import, export feature - keep your database safe and do regular backups via the Export Database feature included with this plugin.
- easy to install - install and get this plugin ready in less then three minutes. Add it to your content via a simple shortcode - [progressbars id="theidyousetintheadmin"] .
- auxiliary shortcodes - want to get a single video in your post without having to go through the admin ? The [video], [youtube] and [vimeo] shortcodes are built just for that. You just have to set the id for the youtube or vimeo shortcode, or the location for the video shortcode.
What do you get?
- Progress Bars WordPress plugin - get creative!
- sample data - the preview admin configuration which you can import in your own
- documentation - extensive documentation on how to install & configure the plugin
- psd files - gallery design psd included
- free updates - even if the value of this gallery increases with upcoming updates, you will get them for free
- free support - for installation via my forum -> http://digitalzoomstudio.net/support/ this is the fastest form of support
Installation - top
There are two ways to install the plugin
Method 1 - Direct WordPress Install
- Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
- 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.
- Then in your wordpress installation, in the Plugins panel, click Add New like in this picture:
- Then click Upload, and select the zip you have downloaded from CC. Then click Activate.
- Access the admin panel from the Settings panel
- Add a new gallery from the Add Slider button.
- Start cusomizing to your needs. Have fun!
Method 2 - FTP Install
- Just download the zip from your http://activeden.net/user/yourusername/downloads directory in a folder of your choosing.
- 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.
- Then, if the folder dzs-progressbars is zipped, unzip that too. Then copy the folder in the wp-content/plugins folder
- Then in your wordpress installation, in the Plugins panel, locate DZS Progress Bars and click Activate
- Access the admin panel from your Dashboard > Progress Bars
- Add a new gallery from the Add Slider button.
- 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
- access / create your post / page
- search for the new elements
- customize the settings
- 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:
Let's analyze a simple shortcode
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
.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
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:
- .zip – Normally you could just right click and extract to a folder of choice [ on both Mac and Windows ]
- .html - Notepad++
- .js - Notepad++
- .as - Notepad++
- .fla - Flash CS5