An overview of clock skins included with CoolClock for WordPress plugin + Advanced extension
Beside each clock you’ll fint the corresponding name as it shows in the Analogue Clock widget and between parenthesis the name to use with the [coolclock skin="…" /] shortcode.
And you’ll find the parameters that make up each clock face. You can use these as a starting point for making your own Custom Clock Skin.
Note: these skin parameters are in JSON format as used in CoolClock for WordPress 4.3+
Overview
Swiss Rail (swissrail)
{
"outerBorder":{
"lineWidth":2,
"radius": 5
},
"smallIndicator":{
"lineWidth":2,
"startAt":88,
"endAt":92
},
"largeIndicator":{
"lineWidth":4,
"startAt":79,
"endAt":92
},
"hourHand":{
"lineWidth":8,
"startAt":-15,
"endAt":50
},
"minuteHand":{
"lineWidth":7,
"startAt":-15,
"endAt": 75
},
"secondHand":{
"lineWidth":1,
"startAt":-20,
"endAt":85,
"color":"red"
},
"secondDecoration":{
"lineWidth":1,
"startAt":70,
"radius":4,
"fillColor":"red",
"color": "red"
}
}
Chunky Swiss (chunkyswiss)
{
"outerBorder":{
"lineWidth":4,
"radius":97
},
"smallIndicator":{
"lineWidth":4,
"startAt":89,
"endAt":93
},
"largeIndicator":{
"lineWidth":8,
"startAt":80,
"endAt":93
},
"hourHand":{
"lineWidth":12,
"startAt":-15,
"endAt":60
},
"minuteHand":{
"lineWidth":10,
"startAt":-15,
"endAt":85
},
"secondHand":{
"lineWidth":4,
"startAt":-20,
"endAt":85,
"color":"red"
},
"secondDecoration":{
"lineWidth":2,
"startAt":70,
"radius":8,
"fillColor":"red",
"color":"red"
}
}
Chunky Swiss Light (chunkyswissonblack) for dark backgrounds
{
"outerBorder":{
"lineWidth":4,
"radius":97,
"color":"white"
},
"smallIndicator":{
"lineWidth":4,
"startAt":89,
"endAt":93,
"color":"white"
},
"largeIndicator":{
"lineWidth":8,
"startAt":80,
"endAt":93,
"color":"white"
},
"hourHand":{
"lineWidth":12,
"startAt":-15,
"endAt":60,
"color":"white"
},
"minuteHand":{
"lineWidth":10,
"startAt":-15,
"endAt":85,
"color":"white"
},
"secondHand":{
"lineWidth":4,
"startAt":-20,
"endAt":85,
"color":"red"
},
"secondDecoration":{
"lineWidth":2,
"startAt":70,
"radius":8,
"fillColor":"red",
"color":"red"
}
}
Fancy (fancy)
{
"outerBorder":{
"lineWidth":5,
"radius":95,
"color":"green",
"alpha":0.7
},
"smallIndicator":{
"lineWidth":1,
"startAt":80,
"endAt":93,
"alpha":0.4
},
"largeIndicator":{
"lineWidth":1,
"startAt":30,
"endAt":93,
"alpha":0.5
},
"hourHand":{
"lineWidth":8,
"startAt":-15,
"endAt":50,
"color":"blue",
"alpha":0.7
},
"minuteHand":{
"lineWidth":7,
"startAt":-15,
"endAt":92,
"color":"red",
"alpha":0.7
},
"secondHand":{
"lineWidth":10,
"startAt":80,
"endAt":85,
"color":"blue",
"alpha":0.3
},
"secondDecoration":{
"lineWidth":1,
"startAt":30,
"radius":50,
"fillColor":"blue",
"color":"red",
"alpha":0.15
}
}
Machine (machine)
{
"outerBorder":{
"lineWidth":60,
"radius":55,
"color":"#dd6655"
},
"smallIndicator":{
"lineWidth":4,
"startAt":80,
"endAt":95,
"color":"white"
},
"largeIndicator":{
"lineWidth":14,
"startAt":77,
"endAt":92,
"color":"#dd6655"
},
"hourHand":{
"lineWidth":18,
"startAt":-15,
"endAt":40,
"color":"white"
},
"minuteHand":{
"lineWidth":14,
"startAt":24,
"endAt":100,
"color":"#771100",
"alpha":0.5
},
"secondHand":{
"lineWidth":3,
"startAt":22,
"endAt":83,
"color":"green",
"alpha":0
},
"secondDecoration":{
"lineWidth":1,
"startAt":52,
"radius":26,
"fillColor":"#ffcccc",
"color":"red",
"alpha":0.5
}
}
SimonBaird.com (simonbaird_com)
{
"hourHand":{
"lineWidth":80,
"startAt":-15,
"endAt":35,
"color":"magenta",
"alpha":0.5
},
"minuteHand":{
"lineWidth":80,
"startAt":-15,
"endAt":65,
"color":"cyan",
"alpha":0.5
},
"secondDecoration":{
"lineWidth":1,
"startAt":40,
"radius":40,
"color":"#fff",
"fillColor":"yellow",
"alpha":0.5
}
}
Classic by Bonstio (classic)
{
"outerBorder":{
"lineWidth":185,
"radius":1,
"color":"#E5ECF9"
},
"smallIndicator":{
"lineWidth":2,
"startAt":89,
"endAt":94,
"color":"#3366CC"
},
"largeIndicator":{
"lineWidth":4,
"startAt":83,
"endAt":94,
"color":"#3366CC"
},
"hourHand":{
"lineWidth":5,
"startAt":0,
"endAt":60
},
"minuteHand":{
"lineWidth":4,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":1,
"startAt":-20,
"endAt":85,
"color":"red",
"alpha":0.85
},
"secondDecoration":{
"lineWidth":3,
"startAt":0,
"radius":2,
"fillColor":"black"
}
}
Modern by Bonstio (modern)
{
"outerBorder":{
"lineWidth":185,
"radius":1,
"color":"#E5ECF9"
},
"smallIndicator":{
"lineWidth":5,
"startAt":88,
"endAt":94,
"color":"#3366CC"
},
"largeIndicator":{
"lineWidth":5,
"startAt":88,
"endAt":94,
"color":"#3366CC"
},
"hourHand":{
"lineWidth":8,
"startAt":0,
"endAt":60
},
"minuteHand":{
"lineWidth":8,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":5,
"startAt":80,
"endAt":85,
"color":"red",
"alpha":0.85
},
"secondDecoration":{
"lineWidth":3,
"startAt":0,
"radius":4,
"fillColor":"black"
}
}
Simple by Bonstio (simple)
{
"outerBorder":{
"lineWidth":185,
"radius":1,
"color":"#E5ECF9"
},
"smallIndicator":{
"lineWidth":10,
"startAt":90,
"endAt":94,
"color":"#3366CC"
},
"largeIndicator":{
"lineWidth":10,
"startAt":90,
"endAt":94,
"color":"#3366CC"
},
"hourHand":{
"lineWidth":8,
"startAt":0,
"endAt":60
},
"minuteHand":{
"lineWidth":8,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":5,
"startAt":80,
"endAt":85,
"color":"red",
"alpha":0.85
},
"secondDecoration":{
"lineWidth":3,
"startAt":0,
"radius":4,
"fillColor":"black"
}
}
SecurePHP (securephp)
{
"outerBorder":{
"lineWidth":100,
"radius":0.45,
"color":"#669900",
"alpha":0.3
},
"smallIndicator":{
"lineWidth":2,
"startAt":80,
"endAt":90,
"color":"green"
},
"largeIndicator":{
"lineWidth":8.5,
"startAt":20,
"endAt":40,
"color":"green",
"alpha":0.4
},
"hourHand":{
"lineWidth":3,
"startAt":0,
"endAt":60
},
"minuteHand":{
"lineWidth":2,
"startAt":0,
"endAt":75
},
"secondHand":{
"lineWidth":1,
"startAt":-10,
"endAt":80,
"color":"blue",
"alpha":0.8
},
"secondDecoration":{
"lineWidth":1,
"startAt":70,
"radius":4,
"fillColor":"blue",
"color":"red"
}
}
Tes2 (tes2)
{
"outerBorder":{
"lineWidth":4,
"radius":95,
"alpha":0.5
},
"smallIndicator":{
"lineWidth":1,
"startAt":10,
"endAt":50,
"color":"#66CCFF"
},
"largeIndicator":{
"lineWidth":8.5,
"startAt":60,
"endAt":70,
"color":"#6699FF"
},
"hourHand":{
"lineWidth":5,
"startAt":-15,
"endAt":60,
"alpha":0.7
},
"minuteHand":{
"lineWidth":3,
"startAt":-25,
"endAt":75,
"alpha":0.7
},
"secondHand":{
"lineWidth":1.5,
"startAt":-20,
"endAt":88,
"color":"red"
},
"secondDecoration":{
"lineWidth":1,
"startAt":20,
"radius":4,
"fillColor":"blue",
"color":"red"
}
}
Lev (lev)
{
"outerBorder":{
"lineWidth":10,
"radius":95,
"color":"#CCFF33",
"alpha":0.65
},
"smallIndicator":{
"lineWidth":5,
"startAt":84,
"endAt":90,
"color":"#996600"
},
"largeIndicator":{
"lineWidth":40,
"startAt":25,
"endAt":95,
"color":"#336600",
"alpha":0.55
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65,
"alpha":0.9
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80,
"alpha":0.85
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":85
},
"secondDecoration":{
"lineWidth":2,
"startAt":5,
"radius":10,
"fillColor":"black"
}
}
Sand (sand)
{
"outerBorder":{
"lineWidth":1,
"radius":70,
"alpha":0.5
},
"smallIndicator":{
"lineWidth":3,
"startAt":50,
"endAt":70,
"color":"#0066FF",
"alpha":0.5
},
"largeIndicator":{
"lineWidth":200,
"startAt":80,
"endAt":95,
"color":"#996600",
"alpha":0.75
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65,
"alpha":0.9
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80,
"alpha":0.85
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":85
},
"secondDecoration":{
"lineWidth":2,
"startAt":5,
"radius":10,
"fillColor":"black"
}
}
Sun (sun)
{
"outerBorder":{
"lineWidth":100,
"radius":140,
"color":"#99FFFF",
"alpha":0.2
},
"smallIndicator":{
"lineWidth":300,
"startAt":50,
"endAt":70,
"alpha":0.1
},
"largeIndicator":{
"lineWidth":5,
"startAt":80,
"endAt":95,
"alpha":0.65
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65,
"alpha":0.9
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80,
"alpha":0.85
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":90
},
"secondDecoration":{
"lineWidth":2,
"startAt":5,
"radius":10,
"fillColor":"black"
}
}
Tor (tor)
{
"outerBorder":{
"lineWidth":10,
"radius":88,
"color":"#996600",
"alpha":0.9
},
"smallIndicator":{
"lineWidth":6,
"startAt":-10,
"endAt":73,
"color":"green",
"alpha":0.3
},
"largeIndicator":{
"lineWidth":6,
"startAt":73,
"endAt":100,
"alpha":0.65
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":1,
"startAt":-73,
"endAt":73,
"alpha":0.8
},
"secondDecoration":{
"lineWidth":2,
"startAt":5,
"radius":10,
"fillColor":"black"
}
}
Cold (cold)
{
"outerBorder":{
"lineWidth":15,
"radius":90,
"alpha":0.3
},
"smallIndicator":{
"lineWidth":15,
"startAt":-10,
"endAt":95,
"color":"blue",
"alpha":0.1
},
"largeIndicator":{
"lineWidth":3,
"startAt":80,
"endAt":95,
"color":"blue",
"alpha":0.65
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":85,
"alpha":0.8
},
"secondDecoration":{
"lineWidth":5,
"startAt":30,
"radius":10,
"fillColor":"black"
}
}
Babosa (babosa)
{
"outerBorder":{
"lineWidth":100,
"radius":25,
"color":"blue",
"alpha":0.25
},
"smallIndicator":{
"lineWidth":3,
"startAt":90,
"endAt":95,
"color":"#3366CC"
},
"largeIndicator":{
"lineWidth":4,
"startAt":75,
"endAt":95,
"color":"#3366CC"
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":60
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":85
},
"secondHand":{
"lineWidth":12,
"startAt":75,
"endAt":90,
"color":"red",
"alpha":0.8
},
"secondDecoration":{
"lineWidth":3,
"startAt":0,
"radius":4,
"fillColor":"black"
}
}
Tumb (tumb)
{
"outerBorder":{
"lineWidth":105,
"radius":5,
"color":"green",
"alpha":0.4
},
"smallIndicator":{
"lineWidth":1,
"startAt":93,
"endAt":98,
"color":"green"
},
"largeIndicator":{
"lineWidth":50,
"startAt":0,
"endAt":89,
"color":"red",
"alpha":0.14
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":80
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":85,
"alpha":0.8
},
"secondDecoration":{
"lineWidth":5,
"startAt":50,
"radius":90,
"fillColor":"black",
"alpha":0.05
}
}
Stone (stone)
{
"outerBorder":{
"lineWidth":15,
"radius":80,
"color":"#339933",
"alpha":0.5
},
"smallIndicator":{
"lineWidth":2,
"startAt":70,
"endAt":90,
"color":"#FF3300",
"alpha":0.7
},
"largeIndicator":{
"lineWidth":15,
"startAt":0,
"endAt":29,
"color":"#FF6600",
"alpha":0.3
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":75
},
"secondHand":{
"lineWidth":1,
"startAt":0,
"endAt":85,
"alpha":0.8
},
"secondDecoration":{
"lineWidth":5,
"startAt":50,
"radius":90,
"fillColor":"black",
"alpha":0.05
}
}
Disc (disc)
{
"outerBorder":{
"lineWidth":105,
"radius":1,
"color":"#666600",
"alpha":0.2
},
"smallIndicator":{
"lineWidth":1,
"startAt":58,
"endAt":95,
"color":"#669900",
"alpha":0.8
},
"largeIndicator":{
"lineWidth":6,
"startAt":25,
"endAt":35,
"color":"#666600"
},
"hourHand":{
"lineWidth":4,
"startAt":0,
"endAt":65
},
"minuteHand":{
"lineWidth":3,
"startAt":0,
"endAt":75
},
"secondHand":{
"lineWidth":1,
"startAt":-75,
"endAt":75,
"color":"#99CC00",
"alpha":0.8
},
"secondDecoration":{
"lineWidth":5,
"startAt":50,
"radius":90,
"fillColor":"#00FF00",
"color":"green",
"alpha":0.05
}
}
Watermelon by Yoo Nhe (watermelon)
{
"outerBorder":{
"lineWidth":100,
"radius":1.7,
"color":"#d93d04",
"alpha":0.75
},
"smallIndicator":{
"lineWidth":2,
"startAt":50,
"endAt":70,
"color":"#d93d04",
"alpha":0.75
},
"largeIndicator":{
"lineWidth":2,
"startAt":45,
"endAt":94,
"color":"#a9bf04"
},
"hourHand":{
"lineWidth":5,
"startAt":-20,
"endAt":65,
"color":"#d93d04"
},
"minuteHand":{
"lineWidth":3,
"startAt":-20,
"endAt":80,
"color":"#a9bf04",
"alpha":0.9
},
"secondHand":{
"lineWidth":2,
"startAt":70,
"endAt":94,
"color":"#d93d04",
"alpha":0.75
},
"secondDecoration":{
"lineWidth":1,
"startAt":70,
"radius":3,
"fillColor":"#d93d04",
"color":"#d93d04",
"alpha":0.75
}
}
Mister by Carl Lister (mister)
{
"largeIndicator":{
"lineWidth":10,
"radius":5,
"startAt":78,
"endAt":98,
"color":"#76777b"
},
"hourHand":{
"lineWidth":7,
"startAt":10,
"endAt":47,
"color":"#76777b"
},
"minuteHand":{
"lineWidth":5,
"startAt":10,
"endAt":65,
"color":"#76777b"
},
"secondHand":{
"lineWidth":3,
"startAt":0,
"endAt":92,
"color":"#76777b"
}
}
Minimal (minimal) *
{
"hourHand":{
"lineWidth":5,
"startAt":-15,
"endAt":50
},
"minuteHand":{
"lineWidth":3,
"startAt":-15,
"endAt":65
},
"secondHand":{
"lineWidth":1,
"startAt":-20,
"endAt":75,
"color":"red"
},
"secondDecoration":{
"lineWidth":1,
"startAt":0,
"radius":4,
"fillColor":"red",
"color":"red"
}
}
*) only available in the Advanced extension
Custom skin
Copy the parameter code beside any of the clocks and head over to how to make your own clock skin.