Nwuan a̱tyin ka a li A‌̱tyunta̱m:Kambai Akau/digiclock/doc

This clock started as an experiment on my part in MediaWiki template syntax and formatting, but it also makes a nice user page gadget. To use it, copy this code and fill in the values. All the parameters are optional.
<div style="background:black; padding:5px 15px; border:3px inset cyan; -moz-border-radius:15px; -webkit-border-radius:15px; width:300px;">
{{User:Kambai Akau/digiclock|format=12|size=50|color=cyan}}
</div>
<div style="padding:0.4em 1em;border:1px dashed #2f6fab;background:#f9f9f9;color:black; font-family: monospace, monospace;">
&#123;&#123;User:Kambai Akau/digiclock<br>
|format = 12 or 24 (default: 24)<br>
|offset = number of hours + or - UTC (default: 0)<br>
|size = width of each digit in pixels (default: 70)<br>
|color = any color name or HTML color code (default: red)<br>
}}
</div>

Like other user clocks at [[WP:CLOCK]], this won't update in real time once the page has loaded, and due to the cache mechanism of the MediaWiki software, it may not update if the page is viewed often enough to be kept in the cache, unless you [[WP:Purge|purge]] the page. But despite these limitations it usually works quite well.

===Examples===
====Sizes and colors====
You can have nearly any size, though [[Commons:Seven segment display#transparent graphics|the graphics]] have a base size of 70&times;112 pixels. You can have any color so long as it contrasts with black. ;)

<table style="background:none">
<tr>
<td>{{User:Kambai Akau/digiclock|size=10|color=red}}
<td>{{User:Kambai Akau/digiclock|size=30|color=lime}}
<td>{{User:Kambai Akau/digiclock|size=65|color=cyan}}
<tr>
<td>{{User:Kambai Akau/digiclock|size=20|color=tomato}}
<td>{{User:Kambai Akau/digiclock|size=40|color=yellow}}
<td>{{User:Kambai Akau/digiclock|size=70|color=skyblue}}
<tr>
<td>{{User:Kambai Akau/digiclock|size=30|color=deeppink}}
<td>{{User:Kambai Akau/digiclock|size=45|color=orange}}
<td>{{User:Kambai Akau/digiclock|size=80|color=white}}
</tr>
</table>

====Offsets====
You can adjust the time by any number of hours and minutes. (The offset can be fractional.) E.g., offset=9.5 gives Australian Central Standard Time:
{{User:Kambai Akau/digiclock|offset=9.5|size=50}}

====12-hour====
Twelve-hour clocks get an extra segment for am/pm.
{{User:Kambai Akau/digiclock|offset=-4|format=12|size=50}}
{{User:Kambai Akau/digiclock|offset=-16|format=12|size=50}}

====Borders====
Normal HTML can be used to add borders and padding space. One tricky bit is that &lt;div> elements expand to the full width of their container, which will make the box too wide. So we must specify an exact width for it, by multiplying the segment size by 5 (for 24-hour clocks) or 6 (for 12-hour clocks):
<div style="padding:0.4em 1em;border:1px dashed #2f6fab;background:#f9f9f9;color:black; font-family: monospace, monospace;" >
&lt;div style="background:black; padding:5px 15px; border:3px inset cyan; '''width:300px;'''"><br>
&#123;&#123;User:Kambai Akau/digiclock|format=12|'''size=50'''|color=cyan}}<br>
&lt;/div><br>
</div>


<div style="background:black; padding:5px 15px; border:3px inset cyan; width:300px;">
{{User:Kambai Akau/digiclock|format=12|size=50|color=cyan}}
</div>


A proposed CSS3 property called [http://www.google.com/search?q=border-radius border-radius] allows round borders. It is not finalized but Gecko-based browsers (Firefox and friends) and Webkit-based browsers (Safari, Chrome) support early versions of it (use both).

<div style="padding:0.4em 1em;border:1px dashed #2f6fab;background:#f9f9f9;color:black; font-family: monospace, monospace;">
&lt;div style="background:black; padding:5px 15px; border:3px inset cyan; '''-moz-border-radius:15px; -webkit-border-radius:15px;''' width:300px;"><br>
&#123;&#123;User:Kambai Akau/digiclock|format=12|size=50|color=cyan}}<br>
&lt;/div><br>
</div>


<div style="background:black; padding:5px 15px; border:3px inset cyan; -moz-border-radius:15px; -webkit-border-radius:15px; width:300px;">
{{User:Kambai Akau/digiclock|format=12|size=50|color=cyan}}
</div>


See [[Wikipedia:User page design center/Style]] for more borders.


====Vertical clocks====
<div style="float:right; width:40px; border:5px solid black">
{{User:Kambai Akau/digiclock|size = 40}}
</div>
Wrapping the clock in a div with the same width as the segments will make it vertical. Borders work as normal.

<div style="padding:0.4em 1em;border:1px dashed #2f6fab;background:#f9f9f9;color:black; font-family: monospace, monospace;">
&lt;div style="float:right; '''width:40px;''' border:5px solid black"><br>
&#123;&#123;User:Kambai Akau/digiclock|'''size=40'''}}<br>
&lt;/div>
</div>
{{clear}}

====Random colors====
Parser magic can be used to pick a random color each time the page is generated. E.g., <span style="font-family: monospace, monospace;">&#123;&#123;#time:U}}</span> is the number of [[Unix time|seconds since New Year 1970]], so <span style="font-family: monospace, monospace;">&#123;&#123;#expr:&#123;&#123;#time:U}} mod 6}}</span> will produce a random number from 0 to 5. So if we put that in a [[mw:Help:Extension:ParserFunctions#.23switch|<span style="font-family: monospace, monospace;">&#123;&#123;#switch}}</span>]] we can make a list of colors to choose from:

<div style="padding:0.4em 1em;border:1px dashed #2f6fab;background:#f9f9f9;color:black; font-family: monospace, monospace;">
&#123;&#123;User:Kambai Akau/digiclock<br>
|size = 50<br>
|color = &#123;&#123;#switch:&#123;&#123;#expr:&#123;&#123;#time:U}} mod 6}} |0=red |1=orange |2=lime |3=yellow |4=cyan |5=magenta}}<br>
}}
</div>


==Suggestions?==
Message me &rarr; [[User talk:Kambai Akau]]
<!-- This template was not originally created by me but copied from User:Anakin101 -->

==See also==
{{Calendar, clock, date and time computing templates}}
__NOTOC__
__NOEDITSECTION__
<includeonly>{{Sandbox other||
<!-- to stop the edit link bunching against the vertical clock -->
[[Category:Time, date, and time zone user templates]]
}}</includeonly>