CoolClock widget settings

RavanH

BASIC SETTINGS

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

Title

The usual widget title. Optional.

Skin

Choose one of the predefined CoolClock skins to change the clock appearance:

  • Swiss Rail (default skin)
  • Chunky Swiss
  • Chunky Swiss White for dark backgrounds
  • Fancy
  • Machine
  • SimonBaird.com
  • Classic by Bonstio.net
  • Modern by Bonstio.net
  • Simple by Bonstio.net
  • SecurePHP by SecurePHP
  • Tes2 by SecurePHP
  • Lev by SecurePHP
  • Sand by SecurePHP
  • Sun by SecurePHP
  • Tor by SecurePHP
  • Cold by SecurePHP
  • Babosa by SecurePHP
  • Tumb by SecurePHP
  • Stone by SecurePHP
  • Disc by SecurePHP
  • Watermelon by Yoo Nhe
  • Mister by Carl Lister

If the Advanced extension is added, there is also Minimal available. This skin is designed to work with a custom background image.

Or choose the option Custom and then add custom skin parameters in the field below.

Custom skin parameters

Add your own full skin parameters in JSON format here. Learn more about creating a custom CoolClock skin. And if you’re just too happy about the looks of your own clock, you’re welcome to share your design there too 🙂

Radius 

Set the clock radius. Do not add ‘px’ or any other measure descriptor. Default radius is 100 pixels, which makes a clock of 200px by 200px.

Please note that the clock is designed to remain inside the widget area, which might cause the clock to render smaller than you set here, depending on your theme’s maximum widget area width.

Hide second hand

Check this box to hide the second hand.

Align

Sets alignment of the clock:

  • none
  • float left
  • float right
  • center

Subtext

0ptional text, centered below the clock. Minimal styling is allowed by way of HTML tags : <strong></strong>, <em></em>, <br> and <a href="" title="" target=""></a>

ADVANCED SETTINGS

GMT offset

A number to define a timezone relative the Greenwich Mean Time. If not set, the clock will default to visitor local time.

Please note: GMT offset will not take local summer time into account.

Scale

Changes the clock time scale:

  • Linear (default)
  • Logarithmic
  • Logarithmic reversed

Show digital 

Set to time (am/pm) to how the time in 12h digital clock (format hh:mm am/pm) inside the analog clock. With the CoolClock – Advanced extension there are more options available.

Digital color 

Set the font color of the digital time. Use a valid html color name, like darkred, or a hex value, like #8B0000. See https://www.rapidtables.com/web/color/color-picker.html

[PRO] MORE ADVANCED SETTINGS

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

Show digital (additional)

Additional options:

  • time + seconds (am/pm) shows 12h clock with seconds (format hh:mm:ss am/pm).
  • time (24h) shows 24h clock (format hh:mm).
  • time + seconds (24h) shows 24h clock with seconds (format hh:mm:ss).
  • date shows date (format depends on visitor browser locale settings).
  • text shows custom text, set in the text attribute (below).

Font

You can use the font property to specify a number of text settings such as style, weight, size, and font. The properties must be set in the following order and separated by a space.

  1. Font style can be normal (default), italic, or oblique
  2. Font variant can be normal (default) or small-caps
  3. Font weight can be normal (default), lighter, bold, bolder or a value between 100 and 900.
  4. Font size can be in pixels or %, (defaults to 8px or 50% on a clock with 100px radius). Note: font size is relative to the clock canvas size, meaning a 30px font on a clock with a 100px radius will be the same size as a 15px font on a clock with 200px radius.
  5. Font family is best set to a generic font family: “sans-serif”, “serif”, “monospace” (default), “cursive” or “fantasy” but may also be a web safe font like “Arial”, “Verdana”, “Times News Roman” or “Courier New”.

Example font setting :

italic 600 12px sans-serif

Note: when the order of properties is not respected, some properties may not be taken into account. For example with “sans-serif 12px” the size will be ignored.

Digital custom text

Set a custom text to show instead of digital time, must be used in combination with Show digital set to ”text” (above). This can only be plain text, no markup allowed. Styling can be set through the Font option (above).

Background

General background area options:

  • Width – give a width in pixels (default: clock width).
  • Height – give a height in pixels (default: clock plus subtext height).
  • Color – define a CSS color value in hex, rgb(a) format, or color name.
  • Border radius – optional rounded corners value, higher is rounder.

Background image

Image URL

Paste the full URL or relative path (from your site root) to an image to serve as background.

Go to Media > Add new and upload a background image to your site media library. Click the image and find its full URL under the “Copy Link” or “File URL” field. Copy this URL with Ctrl+c. Go back to Appearance > Widgets and paste with Ctrl+v in the Background image field.

Stretching

Use background stretching to make the background image fit the background area. Options are:

  • No
  • cover
  • contain

Position

When not using background stretching, its start position can be set with these options:

  • top left
  • left
  • bottom left
  • top
  • center
  • bottom
  • top right
  • right
  • bottom right

default: center

Repeat image

When not using background stretching, you can activate the image repeat option to fill a larger background area.

  • No repeat
  • Repeat
  • Repeat horizontally
  • Repeat vertically
  • Repeat & distribute — The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images
  • Repeat & fit — The background-image is repeated and squished or stretched to fill the space (no gaps)

default: No repeat

Clock position relative to background

Set a left and top offset in pixels for fine adjustment of the clock’s position over the background image.