To modify the clock appearance, the following settings are available:
The usual widget title. Optional.
Choose one of the predefined CoolClock skins to change the clock appearance:
- Swiss Rail (default skin)
- Chunky Swiss
- Chunky Swiss White for dark backgrounds
- 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 🙂
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.
Sets alignment of the clock:
- float left
- float right
0ptional text, centered below the clock. Minimal styling is allowed by way of HTML tags :
<a href="" title="" target=""></a>
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.
Changes the clock time scale:
- Linear (default)
- Logarithmic reversed
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.
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)
- 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).
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.
- Font style can be normal (default), italic, or oblique
- Font variant can be normal (default) or small-caps
- Font weight can be normal (default), lighter, bold, bolder or a value between 100 and 900.
- 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.
- 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).
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.
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.
Use background stretching to make the background image fit the background area. Options are:
When not using background stretching, its start position can be set with these options:
- top left
- bottom left
- top right
- bottom right
When not using background stretching, you can activate the image repeat option to fill a larger background area.
- No 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.