Creating Skins

What You Need

An enhanced text editor with code highlighting makes a big difference.

Here's what you need to create Rainmeter skins:

  1. Rainmeter.
  2. A text editor.

And that's all. No extra software or materials of any kind are required.

Text Editor

That being said: while you can edit skins using Windows' built-in text editor, Notepad, we strongly recommend downloading an enhanced text editor, such as Notepad++ or Sublime Text. These applications come with powerful features like tabs, auto-completion, embedded file browsers and more. You can even download extensions that add Rainmeter-specific code highlighting, which makes it much faster and easier to read a skin's code and spot errors.

For more information, see Notepad Alternatives.

Image Editor

Depending on the kind of skin you want to make, you may also want to find a good piece of image editing software. Rainmeter can create text by itself, as well as simple shapes, like rectangles and circles, with solid colors or color gradients. But anything more complex will require a separately-created image file.

Adobe Photoshop is the usual gold standard for image editing, but there are other, less expensive alternatives worth considering, such as Paint.NET, GIMP, or Inkscape.

Configs

A skin can grow to become an enormously complex project by the time it's done. It may accumulate any number of images, icons, fonts, plugins, addons, scripts, and even included code that is strewn across multiple files and shared by other skins.

But at the core of every skin is a single .ini file. Named SkinName.ini—where "SkinName" is the name of the skin—this is a text file that contains the fundamental code that Rainmeter uses to create a working skin.

Because a skin may have any number of variants, skins are typically identified not by their file name, but by the folder where they are located. This is known as the skin's config name. To quickly find out a skin's config name, just check the context menu—the first item is the config name. For example, the illustro "Clock" skin's config name is illustro\Clock.

Each skin also has a root config folder. This refers to the one folder that contains all of the skins belonging to a "suite," such as illustro. When the skins in a suite are organized together in this way, they can be exported to a package, and then installed on another system, as a single collection. They can also share fonts, images and other resources in a way that separate skins cannot. For a simple skin that is not part of such a "suite," the config and root config are the same.

Here's a quick reference chart to help you remember the relationship between skins, configs, variants and roots, using illustro as an example:

Root config folders are all organized in Rainmeter's main Skins folder:

C:\Users\YourName\Documents\Rainmeter\Skins1

Accordingly, you can identify any skin by its file path, according to a simple rule:

C:\Users\YourName\Documents\Rainmeter\Skins\ConfigName\SkinName.ini

The illustro "Clock" skin is organized in the Skins folder. Remember that skins are identified by their config name, e.g. "illustro\Clock".

1. For Windows Vista, 7 and 8. For default folder locations on Windows XP, see Installing Rainmeter.

Your First Skin

Until now, you have been working with the pre-made illustro skins that come with Rainmeter. Now, you're going to create a new skin from scratch. You will use this same skin throughout the tutorials that follow.

Open your Skins folder in Windows Explorer, and create a new folder. Call it MyFirstSkin. Next, you're going to create MyFirstSkin.ini.

Before you continue, there is a setting in Windows Explorer that you may want to change in order to make this process easier.

Press Alt to show the menu bar in Explorer, then select ToolsFolder options. Click the View tab, and uncheck the option labeled Hide extensions for known file types. Press Ok to apply the change.

You can now see the "extensions" that signify different file types in Windows Explorer, such as .txt and .ini. This also allows you to change the extension when you rename a file.

Open your new "MyFirstSkin" folder. Right-click inside the empty folder, and select NewText Document. Windows will create the new file, and allow you to type in a new name. Type MyFirstSkin.ini. Make sure to remove the ".txt" at the end of the file name. Windows will ask you if you're sure about changing the extension; click Yes.

Finally—open the Rainmeter context menu and click Refresh all to make Rainmeter see the new skin in your library. Then, open the skin in your text editor.

The "Hello, World!" Skin

The very first thing you're going to add to your skin is the [Rainmeter] section. This is a skin's "header" property, like the <head> tag in an HTML webpage. For now, your [Rainmeter] section will be mostly empty, except for one option:

[Rainmeter]
Update=1000

The Update option is what sets the length of the skin's update cycle. The length is given in milliseconds, or 1/1000ths of a second, so Update=1000 means that the skin will update once per second. Updating is how the skin will react to changes in information. You'll see how this works in more detail later on.

Now that you've given your skin a "head," it's time to give it a "body." You're going to create a string meter. This is one of the most common types of meters, and it is used to create text.

[Rainmeter]
Update=1000

[MyMeter]
Meter=String
Text=Hello, world!

The Meter option is required to tell Rainmeter that this section is, in fact, a meter. All meters have this option. The value of the option determines what type of meter it is.

The Text option, on the other hand, is unique to the string meter. As you might have guessed, this is where you provide a string of text for Rainmeter to display.

Believe it or not, what you have now is a complete, valid, working Rainmeter skin! Let's load it to see what it looks like. Load the skin using one of the methods that you learned before. You can either:

  • Open the Manage window by left-clicking the Rainmeter tray icon, find MyFirstSkin in the skins list, then click the Load button in the upper-right.

  • Open the context menu by right-clicking the tray icon, then select SkinsMyFirstSkinMyFirstSkin.ini.

(As you get comfortable with Rainmeter's user interface, you'll decide whether you prefer working with the context menu or the Manage window.)

Now, look up in the top-left corner of your desktop. There's your skin!

Can you see me?

It's... not very big. Or pretty. Meters without any options tend to be very simple and unimpressive. So let's add some formatting.

[MyMeter]
Meter=String
Text=Hello, world!
AntiAlias=1
FontColor=255,255,255
FontFace=Segoe UI
FontSize=20

Here's what we've added:

  • AntiAlias
    A general meter option that smooths out the edges of a meter. This almost always improves the appearance of a string meter.

  • FontColor
    A color option that changes the color of the text in this meter.

  • FontFace
    An option that changes the font used for this meter. Rainmeter can use any font that you have installed in Windows, or another font in a skin's @Resources folder—but we'll get to that.

  • FontSize
    The size of the font.

Now, let's apply these changes by refreshing the skin. Once again, you can either press Refresh in the Manage window, or MyFirstSkinRefresh skin in the context menu.

Much nicer.

 

Congratulations! You have just created a new skin. You are now ready to move on to the Basic Tutorials. This series will guide you through the entire process of creating several example skins, while teaching you about the fundamental elements of a Rainmeter skin.

 

« Back to: Customizing