Creating a Custom Skin for CoolClock

Note: as of version 7.2, all skin parameters must be in JSON format. This means opening and closing with curly braces {}, and wrapping all parameter names and text values in double quotes.

On All included skins you can find an overview of the included preset skins and their parameters. Copy the code beside any one of these as a starting point to customize and create your own clock face.

If nothing fits your site, start with something relatively simple like:

"outerBorder": { "lineWidth": 8, "radius": 90, "color": "black", "alpha": 1 },
"hourHand":    { "lineWidth": 8, "startAt": 0, "endAt": 60, "color": "black", "alpha": 1 },
"minuteHand":  { "lineWidth": 8, "startAt": 0, "endAt": 80, "color": "black", "alpha": 1 },
"secondHand":  { "lineWidth": 8, "startAt": 80, "endAt": 86, "color": "red", "alpha": 1 }


Set the widget skin to Custom and paste the chosen parameters in the “Custom skin parameters” field. Then save the widget and check the result on your site.

Next, you can start tweaking parameter values to see what happens. Do not forget to save your widget each time before checking out the resulting clock.


Create a shortcode with custom skin like this:

[coolclock skin="Cogs" radius="200"]
"outerBorder":      { "lineWidth": 8, "radius": 90, "color": "black", "alpha": 1 },
"smallIndicator":   { "lineWidth": 4, "startAt": 85, "endAt": 88, "color": "white" },
"largeIndicator":   { "lineWidth": 8, "startAt": 80, "endAt": 86, "color": "black" },
"hourHand":         { "lineWidth": 8, "startAt":  0, "endAt": 60, "color": "black", "alpha": 1 },
"minuteHand":       { "lineWidth": 8, "startAt":  0, "endAt": 80, "color": "black", "alpha": 1 },
"secondHand":       { "lineWidth": 8, "startAt": 80, "endAt": 86, "color": "red", "alpha": 1 },
"secondDecoration": { "lineWidth": 8, "startAt":  0, "radius": 8, "color": "black", "fillColor": "white" }

Note that you must add a skin=”…” parameter to the shortcode or else it will default to the Swiss Rail skin and it must be a unique name (whatever you want except any of the pre-set skin names) or the skin with that pre-existing name will be used instead.

The result of the above example looks like:

Next, you can start tweaking the custom skin parameters. You can use the Preview button in the post/page editor to see your changes while tweaking but do not forget to Publish/Update your post/page once you are happy with the resulting clock face.

Skin elements and their parameters

The skin code is made up of elements and their parameters. Each element has the general parameters ans some have dedicated parameters. See the descriptions below.

General parameters

  • lineWidth – the width (or height, depending on the effect of other parameters) of the element in pixels.
  • startAt – start point of the element in percentage from the center (0) to the border (100); can be a negative value or larger than 100.
  • endAt – end point of the elementin percentage from the center (0) to the border (100); can be a negative value or larger than 100.
  • radius – shape element as a circle; value represents the elements radius in pixels. endAt will be ignored when radius is used.
  • color – the color code of (the border of) the element; can be a RGB hex value or HTML color name. *
  • fillColor – the color of the center of the element if presented as a circle (with the radius parameter); can be a RGB hex value or HTML color name. *
  • alpha – the transparency value of the element, must be between 0 (transparent) and 1 (opaque).

*) You can use online color pickers like to find the code or combination of colors you want.

Available elements and special parameters

  • outerBorder – Draws a circle based on the radius as distance from center of the clock in percentage; does not have startAt or endAt parameters.
  • largeIndicator – Draws the 5 minute indicators.
  • smallIndicator – Draws the remaining minute indicators.
  • hourHand – Draws the element that moves according to the hours.
  • minuteHand – Draws element that moves according to the minutes.
  • secondHand – Draws element that moves according to the seconds.
  • secondDecoration – Draws a second element that moves according to the seconds. Can be used for decoration on the second hand.

Example custom 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 }

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

Share your custom skin

Do you have any custom skins you want to share? Please use the comments below to paste your parameters and feel free to share a link to your site to show the live result!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.