How to use the CoolClock shortcode

Start with a default clock by pasting [coolclock /] into a post.

To modify the clock appearance, the following parameters are available:

  • skin — must be one of these: ‘swissRail’ (default skin), ‘chunkySwiss’, ‘chunkySwissOnBlack’, ‘fancy’, ‘machine’, ‘simonbaird_com’, ‘classic’, ‘modern’, ‘simple’, ‘securephp’, ‘Tes2’, ‘Lev’, ‘Sand’, ‘Sun’, ‘Tor’, ‘Cold’, ‘Babosa’, ‘Tumb’, ‘Stone’, ‘Disc’, ‘watermelon’ or ‘mister’. If the Advanced extension is added, there is also ‘minimal’ available.
  • radius — a number to define the clock radius. Do not add ‘px’ or any other measure descriptor.
  • noseconds — set to true (or 1) to hide the second hand
  • gmtoffset — a number to define a timezone relative the Greenwhich Mean Time. Do not set this parameter to default to local time.
  • showdigital — set to ‘digital12’ to show the time in 12h digital format (with am/pm) too
  • digitalcolor — set the font color of the digital time (use html color name or hex value)
  • scale — must be one of these: ‘linear’ (default scale), ‘logClock’ or ‘logClockRev’. Linear is our normal clock scale, the other two show a logarithmic time scale
  • subtext — optional text, centered below the clock
  • align — sets floating of the clock: ‘left’, ‘right’ or ‘center’


[coolclock skin="chunkySwissOnBlack" radius="140" showdigital="digital12" align="left" /]

Then there are extra parameters and options availabe in the CoolClock – Advanced extension which allow for more customisation:

  • showdigital – extended with ‘digital24′ and ‘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_stretch – CSS backround size options “cover” or “contain”
  • 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


[coolclock skin="minimal" radius="63" align="left" background_image="" /]

Custom skin

When you wish to give the clock a custom skin, wrap the skin parameters in an opening and closing shortcode.

An example can be found on Creating a Custom Skin.

Leave a Reply

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