How to use the CoolClock shortcode

Start with a default clock by pasting [coolclock /] into a Shortcode block or into a Classic block, or if you are using the Classic Editor, straight into the post/page content on a new line.

Please take care to always close the shortcode. This means either terminating with /] or when passing custom skin parameters (see below) with the longer [/coolclock].

Shortcode attributes

Default attributes

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 — hide the second hand.
  • gmtoffset — a number to define a timezone relative the Greenwich Mean Time. Do not set this parameter to make the clock default to visitor local time.
  • showdigital — show the time in 12h digital format (with am/pm) inside the analog clock too.
  • fontcolor — set the font color of the digital time (use html color name or hex value).
  • scale — must be one of these: ‘linear’ (default), ‘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’.

Note: The attribute align makes the clock carry the corresponding class: ‘alignleft’, ‘alignright’ or ‘aligncenter’. This normally should take care of the alignment/floating with margins in correspondence with your theme’s style rules. But if not, try adding these basic rules to the Additional CSS field in your theme Customizer:

.alignleft {
    float: left;
    margin: 0.3rem 2rem 2rem 0;
}
.alignright {
    float: right;
    margin: 0.3rem 0 2rem 2rem;
}
.aligncenter {
    margin: 0.3rem auto 2rem auto;
}

Example shortcode: 

[coolclock skin="chunkyswiss" radius="140" showdigital noseconds align="left" /]

[PRO] Advanced attributes

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

  • showdigital – one of these values:
    • digital12 (default) shows 12h clock (format: hh:mm am/pm)
    • digital12+ [new since v7.2] shows 12h clock with seconds (format: hh:mm:ss am/pm).
    • digital24 shows 24h clock (format: hh:mm).
    • digital24+ [new since v7.2] shows 24h clock with seconds (format: hh:mm:ss).
    • date shows date (format: depends on visitor browser locale settings).
    • text [new since v7.2] shows custom text, set in the text attribute (below).
  • text – set a custom text to show instead of digital time, must be used in combination with showdigital=”text”.
  • font[new since v7.2] set the font style of the digital time, default “15px monospace”. Example: font=”small-caps bold 16px serif”. Read more on https://premium.status301.com/coolclock-widget-settings/
  • 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: “center” since v7.2.1).
  • background_repeat – background repetition options “repeat”, “repeat-x”, “repeat-y”, “no-repeat” (default: “no-repeat” since v7.2.1).
  • background_border_radius – optional rounded corners value, higher is rounder.

Example:

[coolclock
    skin="minimal"
    showdigital="date"
    font="bold 16px monospace"
    fontcolor="red"
    radius="64"
    align="left"
    background_image="https://upload.wikimedia.org/wikipedia/commons/9/98/WordPress_blue_logo.svg"
/]

Custom skin

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

[coolclock skin="my_unique_skin_name"]
{ 
    "skin_object": { "skin_parameter": "value" }
}
[/coolclock]

Examples can be found on Creating a Custom Skin.