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.

Overview


Swiss Rail (swissRail)

outerBorder:      { lineWidth: 2, radius: 95, color: "black", alpha: 1 },
smallIndicator:   { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
largeIndicator:   { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
hourHand:         { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }

Chunky Swiss (chunkySwiss)

outerBorder:      { lineWidth: 4, radius: 97, color: "black", alpha: 1 },
smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }

Chunky Swiss Black (chunkySwissOnBlack) for dark backgrounds

outerBorder:      { lineWidth: 4, radius: 97, color: "white", alpha: 1 },
smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }

Fancy (fancy)

outerBorder:      { lineWidth: 5, radius: 95, color: "green", alpha: 0.7 },
smallIndicator:   { lineWidth: 1, startAt: 80, endAt: 93, color: "black", alpha: 0.4 },
largeIndicator:   { lineWidth: 1, startAt: 30, endAt: 93, color: "black", 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", alpha: 1 },
smallIndicator:   { lineWidth: 4, startAt: 80, endAt: 95, color: "white", alpha: 1 },
largeIndicator:   { lineWidth: 14, startAt: 77, endAt: 92, color: "#dd6655", alpha: 1 },
hourHand:         { lineWidth: 18, startAt: -15, endAt: 40, color: "white", alpha: 1 },
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", alpha: 1 },
smallIndicator:   { lineWidth: 2, startAt: 89, endAt: 94, color: "#3366CC", alpha: 1 },
largeIndicator:   { lineWidth: 4, startAt: 83, endAt: 94, color: "#3366CC", alpha: 1 },
hourHand:         { lineWidth: 5, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 4, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: .85 },
secondDecoration: { lineWidth: 3, startAt: 0, radius: 2, fillColor: "black", color: "black", alpha: 1 }

Modern by Bonstio (modern)

outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
smallIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
largeIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }

Simple by Bonstio (simple)

outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
smallIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
largeIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }

SecurePHP (securephp)

outerBorder:      { lineWidth: 100, radius: 0.45, color: "#669900", alpha: 0.3 },
smallIndicator:   { lineWidth: 2, startAt: 80, endAt: 90 , color: "green", alpha: 1 },
largeIndicator:   { lineWidth: 8.5, startAt: 20, endAt: 40 , color: "green", alpha: 0.4 },
hourHand:         { lineWidth: 3, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 2, startAt: 0, endAt: 75, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: -10, endAt: 80, color: "blue", alpha: 0.8 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "blue", color: "red", alpha: 1 }

Tes2 (Tes2)

outerBorder:      { lineWidth: 4, radius: 95, color: "black", alpha: 0.5 },
smallIndicator:   { lineWidth: 1, startAt: 10, endAt: 50 , color: "#66CCFF", alpha: 1 },
largeIndicator:   { lineWidth: 8.5, startAt: 60, endAt: 70, color: "#6699FF", alpha: 1 },
hourHand:         { lineWidth: 5, startAt: -15, endAt: 60, color: "black", alpha: 0.7 },
minuteHand:       { lineWidth: 3, startAt: -25, endAt: 75, color: "black", alpha: 0.7 },
secondHand:       { lineWidth: 1.5, startAt: -20, endAt: 88, color: "red", alpha: 1 },
secondDecoration: { lineWidth: 1, startAt: 20, radius: 4, fillColor: "blue", color: "red", alpha: 1 }

Lev (Lev)

outerBorder:      { lineWidth: 10, radius: 95, color: "#CCFF33", alpha: 0.65 },
smallIndicator:   { lineWidth: 5, startAt: 84, endAt: 90, color: "#996600", alpha: 1 },
largeIndicator:   { lineWidth: 40, startAt: 25, endAt: 95, color: "#336600", alpha: 0.55 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }

Sand (Sand)

outerBorder:      { lineWidth: 1, radius: 70, color: "black", 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, color: "black", alpha: 0.9 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }

Sun (Sun)

outerBorder:      { lineWidth: 100, radius: 140, color: "#99FFFF", alpha: 0.2 },
smallIndicator:   { lineWidth: 300, startAt: 50, endAt: 70, color: "black", alpha: 0.1 },
largeIndicator:   { lineWidth: 5, startAt: 80, endAt: 95, color: "black", alpha: 0.65 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 90, color: "black", alpha: 1 },
secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }

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, color: "black", alpha: 0.65 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: -73, endAt: 73, color: "black", alpha: 0.8 },
secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }

Cold (Cold)

outerBorder:      { lineWidth: 15, radius: 90, color: "black", 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, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
secondDecoration: { lineWidth: 5, startAt: 30, radius: 10, fillColor: "black", color: "black", alpha: 1 }

Babosa (Babosa)

outerBorder:      { lineWidth: 100, radius: 25, color: "blue", alpha: 0.25 },
smallIndicator:   { lineWidth: 3, startAt: 90, endAt: 95, color: "#3366CC", alpha: 1 },
largeIndicator:   { lineWidth: 4, startAt: 75, endAt: 95, color: "#3366CC", alpha: 1 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 60, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 85, color: "black", alpha: 1 },
secondHand:       { lineWidth: 12, startAt: 75, endAt: 90, color: "red", alpha: 0.8 },
secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }

Tumb (Tumb)

outerBorder:      { lineWidth: 105, radius: 5, color: "green", alpha: 0.4 },
smallIndicator:   { lineWidth: 1, startAt: 93, endAt: 98, color: "green", alpha: 1 },
largeIndicator:   { lineWidth: 50, startAt: 0, endAt: 89, color: "red", alpha: 0.14 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "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, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "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", alpha: 1 },
hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
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: .75 },
smallIndicator:   { lineWidth: 2, startAt: 50, endAt: 70, color: "#d93d04", alpha: .75 },
largeIndicator:   { lineWidth: 2, startAt: 45, endAt: 94, color: "#a9bf04", alpha: 1 },
hourHand:         { lineWidth: 5, startAt: -20, endAt: 65, color: "#d93d04", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: -20, endAt: 80, color: "#a9bf04", alpha: .9 },
secondHand:       { lineWidth: 2, startAt: 70, endAt: 94, color: "#d93d04", alpha: .75 },
secondDecoration: { lineWidth: 1, startAt: 70, radius: 3, fillColor: "#d93d04", color: "#d93d04", alpha: .75 }

Mister by Carl Lister (mister)

largeIndicator:   { lineWidth: 10, radius: 5,  startAt: 78, endAt: 98, color: "#76777b", alpha: 1 },
hourHand:         { lineWidth: 7, startAt: 10, endAt: 47, color: "#76777b", alpha: 1 },
minuteHand:       { lineWidth: 5, startAt: 10, endAt: 65, color: "#76777b", alpha: 1 },
secondHand:       { lineWidth: 3, startAt: 0, endAt: 92, color: "#76777b", alpha: 1 }
 

Minimal (minimal) *

hourHand:         { lineWidth: 5, startAt: -15, endAt: 50, color: "black", alpha: 1 },
minuteHand:       { lineWidth: 3, startAt: -15, endAt: 65, color: "black", alpha:1 },
secondHand:       { lineWidth: 1, startAt: -20, endAt: 75, color: "red", alpha:1 },
secondDecoration: { lineWidth: 1, startAt: 0, radius: 4, fillColor: "red", color:"red", alpha:1 }

*) 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.