All included skins

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.