CoolClock – Advanced

This is version 5.0, released on June 6 2014, of the plugin that extends the CoolClock WordPress plugin with advanced options:

  • Premium support
  • More digital options: 24h time or date
  • One extra skin: Minimal. This skin serves well with background images.
  • A custom background image field. Allows for setting an URL to an image that will serve as background to the clock. This can be any kind of image, it's completely up to you!
  • Background options: color, position, size (if your background image is larger than the clock) and repeat options.
  • Clock position: this will allow you to control the exact position of the clock in respect to the background image.
  • Custom skin support in shortcode

Please make sure you have the free CoolClock for WordPress plugin and it is working correctly on your site before ordering the Advanced extension. Choose the appropriate license for a single domain or for multiple domains, checkout and download plugin installation package (ZIP) file:

Order CoolClock - Advanced extension v5.0

The steps

Please follow these steps to assure your satisfaction with your purchase:

  1. First, install the free CoolClock for WordPress plugin, activate it and add an Analog Clock widget to your sidebar. If you are sure the free plugin works well on your site, then come back here to continue with step 2. If it does not work well, please ask for help on the  CoolClock plugin page.
  2. Purchase the Advanced extension by hitting the Add to Cart button. Make sure you check the option "Sign me up for the site..." during checkout. It will serve you to get premium support on http://status301.net/support/forum/coolclock-pro/ and allow you to re-download in the future. After checkout, you'll receive a confirmation e-mail with download instructions.
  3. Download the zip file and use your WordPress plugin installation page (Plugins > Add new > Upload) to install the plugin.
  4. Activate your new plugin CoolClock - Advanced extension.
  5. Go back to your previously (step 1) configured Analog Clock sidebar widget and find your new options!

What you get

After following the steps above, you'll have two plugins: The free CoolClock plugin plus the Advanced extension that brings advanced options to the table. These extra options allow you to customize your clock with your own background image.

The following examples shows how you can create your custom clock.

Example #1: Widget with background image

Image #1: the CoolClock default widget

Image #1a: the CoolClock default widget

Let's say, you added an Analog Clock widget with all the default options to your sidebar. It should look like image #1a.

Now, with the Advanced extension activated, go back to your WordPress Appearance > Widgets admin page and open the widget to edit its settings.

Change the skin (theme) to the new one called 'Minimal' at the bottom of the dropdown list (image #1b) and the option Radius to 65 (image #1c) to better fit the coming background image. Next, fill out http://i35.tinypic.com/990wtx.png in the Image URL field (image #1d) under the new Background options.

CoolClock widget settings - Skin

Image #1b: CoolClock widget settings - Skin

Image #3: CoolClock widget settings - Radius

Image #1c: CoolClock widget settings - Radius

Image #4: CoolClock widget settings - Background image URL

Image #1d: CoolClock widget settings - Background image URL

Image #5: CoolClock widget on WordPress logo

Image #1e: CoolClock widget on WordPress logo

Then hit Save and admire the result on your site: A clock without a border and no minute or hour markers that fits snugly over a 125 by 125 pixel large WordPress logo.

But of course, you can choose your own logo or any other image. :)

Example #2: Shortcode with background image

The shortcode responsible for the minimalist clock at the top of this page is [coolclock align=right skin=minimal /] which uses the new skin Minimal.

When appended with the new parameters background_image="http://i35.tinypic.com/990wtx.png" showdigital="date" the result is visible here on the left.

These new shortcode parameters are available in the Advanced extension:

  • showdigital extended with "digital24" or "date" options
  • background_image - define full URL or path to an image to serve as background
  • background_height - give a height in pixels (default: clock plus subtext height)
  • background_width - give a width in pixels (default: clock width)
  • background_color - define a CSS color value in hex, rgb(a) format, or color name
  • background_position - CSS positioning like "left top", "bottom", "10% 70%" or "10px 20px" (default: "left top")
  • background_repeat - background repetition options "repeat", "repeat-x", "repeat-y", "no-repeat" (default: "no-repeat")
  • background_border_radius - optional rounded corners value, higher is rounder

Example #3: Shortcode with custom skin

Let's take the shorcode from example #2 [coolclock align=right skin=minimal /] and adapt it to use a custom skin. First change the skin parameter to a unique name like skin="gimme_some_skin". See "How can I create a custom skin?"  under the FAQ's on http://status301.net/wordpress-plugins/coolclock/ for an example of how to create custom skin parameters. Now wrap your custom skin parameters into the shortcode like this:

[coolclock align=right skin=gimme_some_skin] largeIndicator: { lineWidth: 10, radius:5, startAt: 78, endAt: 98, color: "#4647fb", alpha: 1 },
hourHand: { lineWidth: 7, startAt: 10, endAt: 47, color: "#36d77b", alpha: 1 },
minuteHand: { lineWidth: 5, startAt:10, endAt: 65, color: "#f6777b", alpha: 1 },
secondHand: { lineWidth: 3, startAt: 0, endAt: 92, color: "#f6e70b", alpha: 1 }
[/coolclock]

 These parameters are basicly those of the Mister skin but with some color. The result here on the right...

Order

Please choose the appropriate license for a single domain or for multiple domains, checkout and download plugin installation package (ZIP) file:

Order CoolClock - Advanced extension v5.0