What You Need
An enhanced text editor with code highlighting makes a big difference.
Here's what you need to create Rainmeter skins:
- A text editor.
And that's all. No extra software or materials of any kind are required.
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.
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.
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
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:
Accordingly, you can identify any skin by its file path, according to a simple rule:
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
Before you continue, there is a setting in Windows Explorer that you may want to change in order to make this process easier.
Altto show the menu bar in Explorer, then select
Folder options. Click the
Viewtab, and uncheck the option labeled
Hide extensions for known file types. Press
Okto 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
Text 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
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:
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 context menu by right-clicking the tray icon, then select
(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:
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
Refresh skin in the context menu.
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.