This plugin requires at least WordPress 3.0
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
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
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.
From this section you can define the countdown settings.
Attribute | Description |
General settings | |
Begin Date | The date when the contdown start. YEAR: 4 digists year |
End Date | The date when the contdown ends. YEAR: 4 digists year |
Use Server Time | Possible values: |
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: |
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. |
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 |
Image | URL to the large image |
Link For The Image | You can specify a link associated to the image |
Link Target | Possible values: *** 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 |
The shortcode is:
[circular_countdown settings_id='1']
where
settings_id is the slider ID defined in "Manage Showcases" section