This plugin requires at least WordPress 3.0

 

 

1. Video Tutorials

Installation - http://www.youtube.com/watch?v=Vtd2oQA0sRY
How To Manage the Social Channels - http://www.youtube.com/watch?v=_BAYq9tO5nU
How To Create a Countdown for Your Website and Enable Maintenance Mode - http://www.youtube.com/watch?v=FLAKvdpdu5Y
How To Create a Countdown For Product Launch and Include It In Your Pages - http://www.youtube.com/watch?v=AUUJiSFJbxM
How To Create an Electronic Countdown - http://www.youtube.com/watch?v=v5CD3YBBUHs

 

2. Plugin Instalation

Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive circular_countdown.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [circular_countdown settings_id='1']
click here for more details regarding the shortcode

 

3. Manage Showcases

From this section you can define the countdowns.
If you need to include multiple countdowns in your pages with different settings you can define the countdowns and manage the settings for each one.
If you need only one slider in your website, just edit the default one.

 

4. Showcase Settings

From this section you can define the countdown settings.

Attribute Description
General settings
Begin Date

The date when the contdown start.
The date will have this form: YEAR,MONTH,DAY

YEAR: 4 digists year
MONTH: 1-12
DAY: 1-31
HOURS: 0-24
MINUTES: 0-60
SECONDS: 0-60

End Date

The date when the contdown ends.
The date will have this form: YEAR,MONTH,DAY,HOURS,MINUTES,SECONDS

YEAR: 4 digists year
MONTH: 1-12
DAY: 1-31
HOURS: 0-24
MINUTES: 0-60
SECONDS: 0-60

Use Server Time

Possible values:
true - the server time will be used
false - the computer time will be used

Responsive
Possible values:
true - the plugin will responsive
false - the plugin will not be responsive
plugin Font Family plugin font-family. You can use Google fonts: http://www.google.com/fonts
Plugin Font Family Google Link plugin font-family link. You can use Google fonts: http://www.google.com/fonts
Logo The logo
Logo Link The logo link
Logo Target

Possible values:
'_blank' - the logo link will open in a new window
'_slef'- the logo link will open in the same window

Circle Radius Circle radius
Circle Line Width Circle line width
Behind Circle Line Width Expand Behind circle additional size
Circle Top Bottom Padding Circle line top and bottom padding
Circle Left Right Padding Circle line left and right padding
Number Size Circle number size, for Days, Hours, Minutes, Seconds
Number Additional Top Padding Circle number additional top padding in case you want to change its vertical position
Text Size Text font size, for Days, Hours, Minutes, Seconds
Text Margin Top Top Margin, for Days, Hours, Minutes, Seconds
Text Padding Padding, for Days, Hours, Minutes, Seconds
Top Margin for All Circles All Circles Top Margin
Bottom Margin for All Circles All Circles Bottom Margin
Social Bg OFF State The share icon OFF state background image
Social Bg ON State The share icon ON state background image
Line Separator Img The Header and social line separator
CallBack Function

The function which will run when the countdown ends.
Example:
function() { alert( 'Done!' ); window.open("http://www.google.com","_blank") }

Enable Maintenance Mode Possible values:
true - maintenance mode will be enabled
false - maintenance mode will be disabled
Page Body Background - Hexa
(available only when you set Enable Maintenance Mode - true)
The page background color. It will be used only if Enable Maintenance Mode
Page Body Background - Img
(available only when you set Enable Maintenance Mode - true)
The page background image. If you load an image, Page Body Background - Hexa will be ignored. It will be used only if Enable Maintenance Mode
   
Days Settings
Translate Days The DAYS text, used if you want to translate it in another language
Div Background Days - Hexa Days div background color - hexa
Div Background Days - Img Days div background - image. You can choose a pattern and Div Background Days - Hexa will be ignored
Border Top Color Days Days div top border color, in hexa
Border Right Color Days Days div right border color, in hexa
Border Bottom Color Days Days div bottom border color, in hexa
Border Left Color Days Days div left border color, in hexa
Circle Color Days Days Circle color, in hexa
Circle Alpha Days Days Circle alpha, in percents. Posible values 0-100
Behind Circle Color Days Days Behind Circle color, in hexa
Behind Circle Alpha Days Days Behind Circle alpha, in percents. Posible values 0-100
Number Color Days Days Number color, in hexa
Text Color Days Days Text color, in hexa
Text Background Days - Hexa Days text background color - hexa.
Text Background Days - Img Days text div background - image. You can choose a pattern and Text Background Days - Hexa will be ignored
 
Hours Settings
Translate Hours The HOURS text, used if you want to translate it in another language
Div Background Hours - Hexa Days div background color - hexa
Div Background Hours - Img Days div background - image. You can choose a pattern and Div Background Hours - Hexa will be ignored
Border Top Color Hours Hours div top border color, in hexa
Border Right Color Hours Hours div right border color, in hexa
Border Bottom Color Hours Hours div bottom border color, in hexa
Border Left Color Hours Hours div left border color, in hexa
Circle Color Hours Hours Circle color, in hexa
Circle Alpha Hours Hours Circle alpha, in percents. Posible values 0-100
Behind Circle Color Hours Hours Behind Circle color, in hexa
Behind Circle Alpha Hours Hours Behind Circle alpha, in percents. Posible values 0-100
Number Color Hours Hours Number color, in hexa
Text Color Hours Hours Text color, in hexa
Text Background Hours - Hexa Hours text background color - hexa.
Text Background Hours - Img Hours text div background - image. You can choose a pattern and Text Background Hours - Hexa will be ignored
 
Minutes Settings
Translate Minutes The MINUTES text, used if you want to translate it in another language
Div Background Minutes - Hexa Days div background color - hexa
Div Background Minutes - Img Days div background - image. You can choose a pattern and Div Background Minutes - Hexa will be ignored
Border Top Color Minutes Minutes div top border color, in hexa
Border Right Color Minutes Minutes div right border color, in hexa
Border Right Color Minutes Minutes div bottom border color, in hexa
Border Left Color Minutes Minutes div left border color, in hexa
Circle Color Minutes Minutes Circle color, in hexa
Circle Color Minutes Minutes Circle alpha, in percents. Posible values 0-100
Behind Circle Color Minutes Minutes Behind Circle color, in hexa
Behind Circle Alpha Minutes Minutes Behind Circle alpha, in percents. Posible values 0-100
Number Color Minutes Minutes Number color, in hexa
Text Color Minutes Minutes Text color, in hexa
Text Background Minutes - Hexa Minutes text background color - hexa.
Text Background Minutes - Img Minutes text div background - image. You can choose a pattern and Text Background Minutes - Hexa will be ignored
 
Seconds Settings
Translate Seconds The SECONDS text, used if you want to translate it in another language
Div Background Seconds - Hexa Days div background color - hexa
Div Background Seconds - Img Days div background - image. You can choose a pattern and Div Background Seconds - Hexa will be ignored
Border Top Color Seconds Seconds div top border color, in hexa
Border Right Color Seconds Seconds div right border color, in hexa
Border Bottom Color Seconds Seconds div bottom border color, in hexa
Border Left Color Seconds Seconds div left border color, in hexa
Circle Color Seconds Seconds Circle color, in hexa
Circle Alpha Seconds Seconds Circle alpha, in percents. Posible values 0-100
Behind Circle Color Seconds Seconds Behind Circle color, in hexa
Behind Circle Alpha Seconds Seconds Behind Circle alpha, in percents. Posible values 0-100
Number Color Seconds Seconds Number color, in hexa
Text Color Seconds Seconds Text color, in hexa
Text Background Seconds - Hexa Seconds text background color - hexa.
Text Background Seconds - Img Seconds text div background - image. You can choose a pattern and Text Background Seconds - Hexa will be ignored
   
H tags settings
H2 Content H2 text
H2 Size CountDown H2 size
H2 Color CountDown H2 size, in hexa
H2 Weight CountDown H2 font weight.
Possible values:
- normal
- bold
H2 Top Margin CountDown H2 margin-top
   
H3 Content H3 text
H3 Size CountDown H3 size
H3 Color CountDown H3 size, in hexa
H3 Weight CountDown H3 font weight.
Possible values:
- normal
- bold
H3 Top Margin CountDown H3 margin-top
   
H4 Content H4 text
H4 Size CountDown H4 size
H4 Color CountDown H4 size, in hexa
H4 Weight CountDown H4 font weight.
Possible values:
- normal
- bold
H4 Top Margin CountDown H4 margin-top
   

 

5. Social Channels

Image URL to the large image
Link For The Image You can specify a link associated to the image
Link Target

Possible values:
'_blank' - the link will open in a new window
'_slef'- the link will open in the same window

*** If all your links will behave the same, you can ignore this parameter and use Target Window For Link from Showcase Settings

Image Title / Alternative Text alternative text used to populate "alt" and "title" tags

 

6. ShortCode

The shortcode is:
[circular_countdown settings_id='1']
where
settings_id is the slider ID defined in "Manage Showcases" section