This is a simple weather skin that shows the current weather using MSN Weather. The other major site used is Yahoo Weather. The measures are from Poiru's upcoming Gnometer suite.

-Same old, same old

[Rainmeter]
Author=Varelse
Update=1000

-The first three variables are used to set your location, hi or lo temperature, and what units the temperature is to be displayed in. weather.LH-valid values for this are Hi or Lo. WeatherCode is the most important variables. It is used to find your location. Go to MSN Weather, and set your location. Look for the little RSS icon on the right. The RSS url will have your WeatherCode in it. The url will look like hxxp://weather.msn.com/RSS.aspx?wealocations=wc:#WeatherCode#&weadegreetype=#TemperatureUnit#. Your WeatherCode is the string between #WeatherCode#. Lastly, TemperatureUnit displays the temperature in Fahrenheit or Celcius; valid values are C or F.

Color=White is part of the path to the weather icons. The filepath to the icons that I'm using is #CURRENTPATH##Color#. #CURRENTPATH# is the filepath to the active skin. In this example the filepath is ..DocumentsRainmeterSkinsTutorialsWeather. #Color# allows me to switch between different folders with different colored icons if I want to change the color of my theme. So the entire filepath ends up being ..DocumentsRainmeterSkinsTutorialsWeatherWhite in this example. If you don't plan on using different color icons you can just dump the weather icons in the folder with the skin .ini ignore using a filepath to the icons.

The rest of the variables are just settings text and background settings.

[Variables]
weather.LH=Lo
WeatherCode=USMO0970
TemperatureUnit=F

FONTCOLOR=200,200,200,220
SIZE=8
SIZE2=15
FONT=Trebuchet MS
WIDTH=150
HEIGHT=25
BGCOLOR=0,0,0,200

Color=White

;===========================
;         MEASURES
;===========================

-Webparser, the heart every of skin that uses the internet. Update rate sets how often the skin is updated, in this case, once every half hour. Don't set it lower than 900. You don't need to see if your weather is changing faster than that. If you have the update set too low, the sites bandwidth (in this case MSN) will increase dramatically and they will shut down the feed. That's why Accuweather shut down/is going to shut down their Rainmeter weather feed. Because people kept hitting their servers once a second.

Ahem. Url sets the address of the RSS feed. Regexp makes the magic happen. It parses the RSS feed and stores the information as StringIndexes for Rainmeter to use. This regexp actually parses enough information for a 3 day forecast. To find out more about RegExp go here.


[MeasureWeather]
Measure= Plugin
Plugin= PluginsWebParser.dll
UpdateRate=1800
Url=hxxp://weather.msn.com/RSS.aspx?wealocations=wc:#WeatherCode#&weadegreetype=#TemperatureUnit#
RegExp="(?siU)<link>(.*)</link>.*src=".*/(d+).gif".* title="(.*)".*. (.*)&.*src=".*/(d+).gif".* title="(.*)".*#weather.LH#: (.*)&.*src=".*/(d+).gif".* title="(.*)".*#weather.LH#: (.*)&.*src=".*/(d+).gif".* title="(.*)".*#weather.LH#: (.*)&.*</r(.*)s>"

Adding Debug=1 to [MeasureWeather] and activating the log file, we can see what information is stored in what StringIndexes. If you set your WeatherCode and the other two variables correctly you should see something like this in the Log File.

DEBUG: (16:49:32.879) WebParser: (Index 0) [Redacted for personal information]
DEBUG: (16:49:32.879) WebParser: (Index 1) [Redacted for personal information]
DEBUG: (16:49:32.879) WebParser: (Index 2) 11
DEBUG: (16:49:32.879) WebParser: (Index 3) Rain
DEBUG: (16:49:32.879) WebParser: (Index 4) 52
DEBUG: (16:49:32.879) WebParser: (Index 5) 4
DEBUG: (16:49:32.879) WebParser: (Index 6) T-storms
DEBUG: (16:49:32.879) WebParser: (Index 7) 51
DEBUG: (16:49:32.879) WebParser: (Index 8) 11
DEBUG: (16:49:32.879) WebParser: (Index 9) Showers
DEBUG: (16:49:32.879) WebParser: (Index 10) 40
DEBUG: (16:49:32.879) WebParser: (Index 11) 11
DEBUG: (16:49:32.879) WebParser: (Index 12) Rain
DEBUG: (16:49:32.879) WebParser: (Index 13) 38
DEBUG: (16:49:32.879) WebParser: (Index 14) s

- is the number code for the current Weather Icon. 5 is the Weather Icon for today's weather. 3 is the description of the Weather, and 4 is the current temperature. The pattern repeats for each different forecast-Current, Today's, Tomorrow's, Day After. Index 14 is used to display the degrees symbol. Url= is the name of the main Webparser measure. Every StringIndex you want to use must be called by a separate measure.

[MeasureCIcon]
Measure= Plugin
Plugin= PluginsWebParser.dll
Url=[MeasureWeather]
StringIndex=2

-Uses StringIndex 3 to display the current weather conditions. It uses a Substitute key to replace a blank space with a N/A if the current weather condition can't be read. Also gets rid of |.

[MeasureCText]
Measure= Plugin
Plugin= PluginsWebParser.dll
Url=[MeasureWeather]
StringIndex=3
Substitute="":"N/A","|":""

-Uses StringIndex 4 to display the current weather temperature.

[MeasureCTemp]
Measure= Plugin
Plugin= PluginsWebParser.dll
Url=[MeasureWeather]
StringIndex=4
Substitute="":"N/A","|":""

-Uses StringIndex 14 to display the degrees symbol.

[MeasureSign]
Measure= Plugin
Plugin= PluginsWebParser.dll
Url=[MeasureWeather]
StringIndex=14
Substitute="s":"°"

;-------STYLES------------

-Text style section

[Text]
StringStyle=Bold
StringAlign=Left
FontColor=#FONTCOLOR#
FontSize=#SIZE#
FontFace=#FONT#
AntiAlias=1

;=========================
;         Meters
;=========================

-Background

[BG]
Meter=Image
SolidColor=#BGCOLOR#
X=0
Y=0
H=#HEIGHT#
W=#WIDTH#

-Takes the number from [MeasureCIcon] and displays a corrisponding image. This meter also shows a way to use DynamicVariables to display an image.  If you have your icons in the same folder as the skin's .ini you can just use ImageName=[MeasureCIcon].png.  You'll have to be careful which weather icon pack you use.  Yahoo and MSN use different icon codes.  I like to use Flat Weather Icons by LavAna.

[CurrentImage]
Meter=IMAGE
ImageName=#CURRENTPATH##Color#[MeasureCIcon].png
X=5
Y=0
W=23
H=23
DynamicVariables=1

-Displays the information for [MeasureCTemp] and [MeasureSign]

[CurrentTemp]
Meter=String
MeasureName=MeasureCTemp
MeasureName2=MeasureSign
X=R
Y=1
FontSize=#SIZE2#
MeterStyle=Text
Text=%1%2

-Displays the current conditions. There are H and W constraints on this meter to allow for longer text that fits the background.

[CurrentConditions]
Meter=String
MeasureName=MeasureCText
MeterStyle=Text
X=R
Y=r
H=25
W=50
ClipString=1

There you have it, a completed weather skin. Check out the Manual for more information about Meters and Measures.

When I first started using Rainmeter I scoured Deviant Art for skins that fit what I was looking for. I didn’t find any. So I ended up dissecting skins, reading the help file, and discovered that it’s not nearly as complicated as it looks.

The goal of this series is to show how easy it is to make your own skins. I’ll be showing simple skins and code and talking about everything from basic skin creation to some of the more complicated things you can do with Rainmeter.





The skin I’ll be demonstrating is probably the simplest notes skin you can create. The skin is fundamentally made by combining different blocks of code. Each block as its own unique name. Each block of code is either a Measure or a Meter. Measures can be thought as a piece of code that stores information, and a Meter is one that displays something. The skin also shows the use of several different features, all of which I’m going to explain. These features are MeterStyle and position formulas. All skins are made up of two different types of blocks, meters and measures.

To make this code work, open up Notepad or similar program (I use Notepad++) and save the code in a file named Notes.ini in the Rainmeter Skins folder in your Documents. In the same folder you saved in, save a file named . Write something in the text file. “Hello World” would be good. It helps to have file extensions turned on.

[Rainmeter]-In this section you can define the Update rate, Author, and few other things that I never use.

[Rainmeter]
Author=Varelse
Update=1000

This section contains all the variables I’ll be using in the skin. WIDTH and HEIGHT are the dimension of the background image. NOTESPATH tells Rainmeter what text file to read the notes out of. The next several define the size, font, and color of the text displayed. TITLE is the title of the skin, obviously.

[Variables]
WIDTH=180
HEIGHT=200
NOTESPATH=#CURRENTPATH#notes.txt
FONT=Trebuchet MS
TEXTCOLOR=255,255,255
FONTSIZE=10
FONTSIZE2=8
TITLE=NOTES

This is the piece of code that tells Rainmeter to display the notes. As you can see, it references NOTESPATH. To reference a variable you have to enclose the variable name with #VariableName#. FileFilter tells it to look for a text file.

[MeasureNOTES]
Measure= Plugin
Plugin= PluginsQuotePlugin.dll
PathName=#NOTESPATH#
Subfolders=1
FileFilter=*.txt
Separator=¶

-The box that displays behind the text. SolidColor defines the color, in this case black, and transparency of the color. H and W are the height and width.

[BackGround]
Meter=Image
X=0
Y=0
W=#WIDTH#
H=#HEIGHT#
SolidColor=0,0,0,100

-This is style section. It isn’t a meter or a measure. It’s just a section of code for other meters to reference. This style defines several parameters that are common to the Title and the Notes. This makes coding easier by being able to reference a block of code instead of having identical lines of code in different meters.

[TextStyle]
FontColor=#TEXTCOLOR#
StringStyle=Bold
AntiAlias=1
FontFace=#FONT#
FontSize=#FONTSIZE#
StringAlign=CENTER

-Displays the title. Simple enough. It references [TextStyle], so [Title] has all the attributes that it does. Every meter needs an X and Y position. What’s interesting about this is how the X dimension is set. X= (#WIDTH#/2) means that the Title will always be centered relative to the width of the skin. Of course, the position could have been any other number or formula. If you are using a position formula, it has to be in parenthesis, otherwise it won’t work. And formulas can be very complex if you want them to be.

[Title]
Meter=String
MeterStyle=TextStyle
X= (#WIDTH#/2)
Y=10
Text=#TITLE#
LeftMouseDownAction=!Execute ["#NOTESPATH#"]

-Display what [MeasureNotes] reads from the text file. Since we want the text to be within the background we need to set the Height and Width dimensions of the meter. Y=5R which means it is five pixels below the meter above it. I went with a 5 pixel border, so the Width becomes (#WIDTH#-10) and X=5. 5 pixels on the left and 5 on the right, so subtract 10 from the width of the background meter. Height wasn’t so easy. I basically had to guess and fiddle with it till I got what I wanted.

[NotesText]
Meter=String
MeasureName=MeasureNOTES
MeterStyle=TextStyle
X=5
Y=5R
H= (#HEIGHT#-40)
W= (#WIDTH#-10)
StringAlign=LEFT
FontSize=#FONTSIZE2#
ClipString=1




For further reading and clarification on the options below each section, measure, and meter read the Manual. For more on skin creation read Rainmeter 101.

I'm very pleased with the encouragement that the first Rainmeter Workshop got. I'm even happier with people's questions and requests. Last time I was asked to do a Winamp skin, talk more about String meters, and elaborate on measures. If you want me to cover a topic, just ask in the comments. Without further ado:





I'll skip the introduction and the basics this time since I covered them pretty well last time. This skin demonstrates using Plugins, drawing circles, using Calc measures. I'll also talk more in depth about using measures and String meters. This is a much more complicated skin than last time. Every Winamp skin that displays time has a heavy emphasis on Calc measures; this one is no different.

-Nothing has changed from last time.

[Rainmeter]
Author=Varelse
Update=1000

-SOLIDCOLOR defines the background color, in this case black, and COLOR defines the Text color and the progress bar color. HEIGHT defines the FontSize and NAME defines the FontFace.

[Variables]
SOLIDCOLOR=0,0,0
COLOR=255,255,255
HEIGHT=10
NAME=Trebuchet MS

Onto the Measures.

-This measure does nothing more than return 1. The only reason it is used is because Roundline Meters have to be bound to a measure.

[MeasureAlways1]
Measure=Calc
Formula=1

The next several measures get information from Winamp using the WindowMessagePlugin. You'll notice that Measures read or manipulate data.

-Allows Rainmeter to interact with Winamp. You'll see how Rainmeter does this further down. It also returns the Artist and Title of the current track. I have mine set up a little different so it also shows the Album name. This can be changed in Winamp.

[MeasureCommand]
Measure= Plugin
Plugin= PluginsWindowMessagePlugin.dll
WindowClass=Winamp v1.x
Substitute="[Paused]":""," - Winamp":"","[Stopped]":""

-This measure returns the total time of the Track in seconds. You'll notice that all these measures are pretty much the same, just that the WindowMessage is different.

[MeasureProgressFull]
Measure= Plugin
Plugin= PluginsWindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 1 105

-Returns the current position of the Track in milliseconds.

[MeasureProgressCurrent]
Measure= Plugin
Plugin= PluginsWindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 0 105

Now for the fun calc measures.

These Calc Measures take the current position of the song and transform the milliseconds into minutes.

-Finds the minutes of the current position. Suppose that the current song has been playing for 1:35 minutes. Winamp would tell Rainmeter that the song has been playing for 95000 milliseconds. The formula returns the number of minutes. It takes the current position (i.e. 95000) and divides that by 1000 giving 95 seconds. It then subtracts anything above a minute off of the total time. It then returns the number of minutes the song has been playing. In this case 1 minute. If it had been playing for 128000 milliseconds, the Calc Measure would return 2.

[MeasureTMinute]
Measure=Calc
Formula= ((MeasureProgressCurrent / 1000) - ((MeasureProgressCurrent / 1000) % 60)) /60

- Finds the number of seconds that have elapsed between minutes. This is an example of how Rainmeter does If/Then statements. It's basically saying 'If the remainder of [MeasureProgressCurrent] in seconds is equal to 60, then [MeasureTSecond] equals 0. If [MeasureProgressCurrent] in seconds is not 60, then return the remainder of [MeasureProgressCurrent] divided by 60. Using 95000 again, the measure would return 35 seconds.

[MeasureTSecond]
Measure=Calc
Formula= (MeasureProgressCurrent / 1000) % 60 = 60 ? 0 : (MeasureProgressCurrent / 1000) % 60

-Corrects the way that the elapsed time would be displayed. Since [MeasureTSecond] returns the number of seconds in a minute (0-59), the string meter that will eventually read these measures will show 9:9 for 9:09. It just adds a 0 before the numbers less than 10.

[MeasureTZero]
Measure=Calc
Formula= (((MeasureProgressCurrent) / 1000) % 60) < 10 ? 0 : 1
Substitute="1":""

These measure find the total time that the song playing has left.

-Finds the time left in seconds. I only used DynamicVariables because it wouldn't work otherwise. If you use DynamicVariables the measure's name has to be in brackets and DynamicVariables=1 has to be added to the measure or meter, but that's a discussion for another time.

[TimeLeft]
Measure=Calc
Formula=[MeasureProgressFull]-([MeasureProgressCurrent]/1000)
DynamicVariables=1

,, and are basically identical to the other measures and transform the time remaining into minutes and seconds.

[MeasureTMinute2]
Measure=Calc
Formula= ([TimeLeft] - ([TimeLeft] % 60)) /60
DynamicVariables=1

[MeasureTSecond2]
Measure=Calc
Formula=[TimeLeft] % 60 = 60 ? 0 : [TimeLeft] % 60
DynamicVariables=1

[MeasureTZero2]
Measure=Calc
Formula=[TimeLeft] % 60 < 10 ? 0 : 1
Substitute="1":""
DynamicVariables=1

That's it for the measures and math. Now onto Meter Styles.

-Since this skin doesn't use any images, the Webdings font is used for the controllor buttons( Play, Pause, etc.). This Style defines how the Webdings will be displayed. They have the same color as the background, and a FontSize big enough to be easily clicked on.

[Webding]
StringStyle=Bold
StringAlign=Left
FontColor=#SOLIDCOLOR#
FontSize=12
FontFace=Webdings

-This style defines how the Track and Artist will be displayed. Both of these styles section define a string. Some of the keys are self explanatory, like FontColor, but some aren't so simple. Clipstring cuts off a string at the Height and Width specified. AntiAlias will keep the text from looking pixilized. StringStyle has four different options- Normal, Bold, Italic, or BoldItalic. StringAlign defines from what side of the Meter the text will be displayed. The options are Center, Left, or Right. You'll have to play around with the X position using different StringAligns.

[Text]
StringStyle=Bold
StringAlign=Left
FontColor=#COLOR#
FontSize=#HEIGHT#
FontFace=#NAME#
AntiAlias=1
ClipString=1

Now onto displaying all this stuff.

-This is the circular background for the progress bar. Several different keys have to be defined for Roundlines. H and W are the height and width, obviously. The MeasureName, this one's tied to [MeasureAlways1]. StartAngle defines where the circle will begin. Rotation Angle defines where the Circle will stop. The angles are in radians. LineStart defines the inner radius and LineLength defines the outer radius.

[DurationBG]
Meter=Roundline
MeasureName=MeasureAlways1
W=60
H=60
StartAngle=0
RotationAngle=6.28
LineLength=30
LineStart=25
AntiAlias=1
LineColor=#SOLIDCOLOR#

-This shows the current progress of the song. It is tied to MeasureProgress. As you can see the Start and Rotation angle are different from DurationBG as well as the inner and outer radius.

[DurationBar]
Meter=Roundline
MeasureName=MeasureProgress
MeterStyle= DurationBG
StartAngle=0.3
RotationAngle=5.7
LineLength=29
LineStart=26
LineColor=#COLOR#

-Just a solid black bar that serves as a background for the song title and artist.

[TitleBar]
Meter=Image
X=25
Y=23
H=14
W=300
SolidColor=#SOLIDCOLOR#

-A string meter that displays the song title and artist. It's tied to MeasureCommand. It uses the style Text for it's attributes.

[Track]
Meter=STRING
MeasureName=MeasureCommand
X=5r
Y=-1r
H=14
W=295
MeterStyle=Text

The next three meters are for the player controls.

-The previous track button. It's meter style is Webding. The mouse action tells Winamp to go to the previous song.

[Back]
Meter=String
MeterStyle=Webding
Text=7
X=130
Y=R
LeftMouseDownAction=!RainmeterPluginBang "MeasureCommand SendMessage 273 40044 0"

-This is actually kind of cheating. It show both the play and pause button, but what it really does is toggle play/pause.

[Play]
Meter=STRING
X=-2R
Y=r
MeterStyle=Webding
Text=";4"
LeftMouseDownAction=!RainmeterPluginBang "MeasureCommand SendMessage 273 40046 0"

-Skips to the next track. It's just like the other two meters, just with a different mouse command.

[Next]
Meter=STRING
X=-2R
Y=r
MeterStyle=Webding
Text="8"
LeftMouseDownAction=!RainmeterPluginBang "MeasureCommand SendMessage 273 40048 0"

These two meter show the time elapsed and time left.

-Displays the elapsed time. It's tied to the 3 measures that transform the time in milliseconds to minutes and seconds. The information from the measures is displayed using Text=%1:%2%3. This means the it displays the minutes, a colon, then checks if the seconds is less than 10, and displays the seconds. Since the FontColor is different than the referenced style, I overrode the style settings using FontColor=#SOLIDCOLOR#. And I don't want the time to be cut off so I set Clipstring to 0.

[Time]
Meter=STRING
MeasureName=MeasureTMinute
MeasureName2=MeasureTZero
MeasureName3=MeasureTSecond
X=65
Y=37
FontColor=#SOLIDCOLOR#
MeterStyle=Text
Text="%1:%2%3"
ClipString=0

-The same as [Time], but displays the time left.

[Time2]
Meter=String
MeasureName=MeasureTMinute2
MeasureName2=MeasureTZero2
MeasureName3=MeasureTSecond2
MeterStyle=Text
FontColor=#SOLIDCOLOR#
ClipString=0
X=150R
Y=r
Text="%1:%2%3"

There you have it, a completed Winamp skin. Check out the Manual for more information about Meters and Measures. And for more information on radians go to here.

I've been beating my head against a wall working on a new suite.  The hardest, and most tedious thing has been making the skins resizable.  It involves a lot of simple math, and trial and error.  Over the course of the next few Workshops I'm going to share some of the things that I've learned about resizing skins, as well as other cool things to do with position formulas and dynamic variables.  They'll start off pretty basic and work towards more complicated topics.

Simple Taskbar





I keep seeing taskbar skins that fit only one specific desktop resolution.  It's possible to make a skin fit any resolution, and usually it's  fairly simple.  A decent grasp on simple algebra, geometry and arithmetic helps greatly though.  The taskbar below fits any resolution.  I'm assuming that you're somewhat familiar with Rainmeter coding.

I strongly recommend downloading the skin and changing the values of the HEIGHT and FONTSIZE variable to many different things to see how the skins adjusts.

[Rainmeter]
Author=Varelse
Update=1000

[Variables]
WIDTH=#SCREENAREAWIDTH#
HEIGHT=30

SCREENAREAWIDTH is the width of the resolution your monitor is set at.  This allows the skins to fit any resolution.  HEIGHT is the height of the skin.  It can be any number.

COLOR1=15,15,15,200
TEXTCOLOR=150,150,150
FONTSIZE=10

Those three variables above are for the text and the background.  COLOR1 is the color of the taskbar.  FONTSIZE is set at 10, but that can be changed.  Keep in mind that the fontsize is not in pixels, but in point size.  This is important later.

PROG1=firefox
PROG2=notepad
PROG3=calculator
LINK1=firefox.exe
LINK2=notepad.exe
LINK3=calc.exe

Variables for the launcher.  There's only three shortcuts because I wanted to keep the .ini file uncomplicated.

[BG]
Meter=Image
SolidColor=#COLOR1#
H=#HEIGHT#
W=#WIDTH#

This meter is the background for the taskbar.  Height (H) is determined by #HEIGHT#, and width (W) is determined by #WIDTH#.  The dimensions of the taskbar can be changed by editing the respective variables.

[Text]
SolidColor=0,0,0,1
StringStyle=BOLD
StringAlign=CENTER
FontColor=#TEXTCOLOR#
FontSize=#FONTSIZE#
StringCase=Upper
FontFace=Trebuchet MS
Y=r

MeterStyle section for the text.

The key to automatic scaling is making the position of individual meters a function of some input variable.  I usually use a length and make the position a percentage of that length. For this skin it is the width.  

[Link1]
Meter=String
MeterStyle=Text
Text=#PROG1#
X= (#WIDTH#*0.4)
Y= (#HEIGHT#/2-(#FONTSIZE#*0.8))
LeftMouseDownAction=!Execute ["#LINK1#"]

[Link2]
Meter=String
MeterStyle=Text
Text=#PROG2#
X= (#WIDTH#*0.5)
LeftMouseDownAction=!Execute ["#LINK2#"]

[Link3]
Meter=String
MeterStyle=Text
Text=#PROG3#
X= (#WIDTH#*0.6)
LeftMouseDownAction=!Execute ["#LINK3#"]

So, the links are centered around the middle of the taskbar.  This makes the X position of [Link1] #WIDTH#*0.5.  [Link1] and [Link3] are separated by 0.1*#WIDTH# from [Link2].  This makes [Link1] have a X position of 0.4*#WIDTH# and [Link3] have 0.6*#WIDTH#.  These are pretty much arbitrary.  Change them to what you like.

The most complicated part of this skin is making sure that the text stays centered in the Y direction.  That's what the Y= formula in [Link1] does.  The formula was derived mostly through trial and error.  #HEIGHT#/2 finds the midpoint of the taskbar in the Y direction.  #FONTSIZE*0.8 is approximately half the height in pixels of the text.  Subtracting the two yields the distance from the top of the skin that the text needs to be to keep it centered.  Or as I like to call it–Magic.  The 0.8 may need to be changed depending of the font and the font size that you are using, but it seems to work fairly well for the few fonts I've tried it on.  (The font that I'm using for the suite I'm working on uses 0.9 so you're mileage may vary.)

[MeasureClock]
Measure=Time
Format="%I.%M %p"

[Clock]
Meter=String
MeasureName=MeasureClock
MeterStyle=Text
StringAlign=Right
X= (#WIDTH#-(#HEIGHT#/2-#FONTSIZE#*0.8))

And to make this not just a dock, a clock is added.  (#HEIGHT#/2-#FONTSIZE#*0.8) is the distance from the top of the skin to the top of the text.  Subtracting this from the WIDTH allows the clock to keep an equal distance from all sides. Symmetric.

Postmortem

While all this fuss over position formulas and automatic resizing seems like a needless complication, I think that it adds a lot to your skin, as well as being pretty awesome. Once you become familiar enough working with position formulas, they'll take much less time to do.