I've never really been a desktop gadgets and widgets type of person, but I often put an inspirational quote on my desktop wallpaper. Today we'll show you how to do this using Rainmeter, no matter what wallpaper you switch to. The great thing about using Rainmeter is that you can switch your wallpaper, or rotate it, and the quote stays in the same place. What we'll do is show how to create a very simple skin and customize it to fit our needs.

Creating a Simple Static Quote Rainmeter Skin

Rainmeter might seem to be confusing for many of you, but it's actually a lot simpler to use than you think. You'll want to start by heading into your Documents folder, where you'll find the Rainmeter --> Skins folder. Once you're there, create a new folder to house all of your own custom skins.

image

Then create a new folder for the new quote config---I called mine StaticQuote---and then add a .INI file with the same name to the folder. In this case, that meant creating a new text file and renaming it to StaticQuote.ini, which you can actually do directly from Notepad in the next step.

image

Open up Notepad and paste in the following text, which is all you need for this very basic configuration. You can feel free to edit the quote I've included, which is something I found in this @codinghorror post.

[Rainmeter]
Author=howtogeek [QuoteStyle]
FontColor=FFFFFFFF
FontSize=16
AntiAlias=1 [Quote]
Meter=STRING
MeterStyle=QuoteStyle
Text="Go that way, Really fast. If something gets in your way... turn."

Now head to File --> Save As, change the "Save as type" to All Files instead of the default, and then give it the filename ending in .ini as shown here:

image

It's really important to make sure the file has the .ini extension.

Activating the New Config

The easiest way to deal with loading new configurations and reloading them quickly is to open up the RainBrowser application included in Rainmeter---then click the Browse tab on the left-hand pane. You should see your skins folder, with your configuration underneath it.

image

Down near the bottom of the window, you'll see your skin, and you can simply click the Load Skin link and it will show up on the screen.

image

You should leave the RainBrowser window open, since we'll be making more changes to the skin---you can just use the Refresh Skin link to quickly reload the skin every time you change the configuration file.

Changing the Font and Color

image

The new theme should look something like this with the default settings that we gave you, but you can easily customize and change the configuration to your liking. Let's take a closer look at the style section of our configuration to understand how the different options work. Changing the Color The FontColor=FFFFFFFF line is what sets the color for the text, as you'd expect---but you'll notice that instead of the standard HTML-style color code, it's got 2 extra characters. This is because it's actually RGB(A) with the (A) being the alpha channel---so the last two characters go from 00, or fully transparent, to FF, or zero transparency. You'd ideally pick somewhere in the middle. For instance, to change the color to black, you'd change the line to the following---though you'll note that the default color is black, so that would be pointless.

FontColor=000000FF

Changing the Font Face If you don't like the default font, you can use the FontFace variable, with the name of an installed font in Windows. For instance, to change the font to Calibri, you could use this:

FontFace=Calibri

Change the Font Style If you want to use bold, italic, or even bold italics, you can use the StringStyle variable, which takes one of the following values: NORMAL, BOLD, ITALIC and BOLDITALIC. To change the font to bold, you'd do:

StringStyle=BOLD

And of course, you'll be able to change the font size by adjusting the FontSize variable, as you'd imagine.  

Adding a Drop Shadow to the Text

The only problem with the white text against the lighter colored background is that it isn't quite as noticeable as you'd like---and if you used dark text instead, you couldn't switch to a darker wallpaper without causing visibility problems. The solution is to use the StringEffect variable to set a shadow or a border on the text, making it much more visible against any background. For instance, to set a drop shadow on the text, you'd use the following---to set a border instead, you'd replace SHADOW with BORDER.

StringEffect=SHADOW

Here's an example of what it looks like normally, then with a drop shadow, and then with a border instead:

image


image


image

If you wanted to use a darker text, you can use a light border or drop shadow by using the FontEffectColor variable. For instance, for a black text with a white border, you'd use:

FontEffectColor=FFFFFFFF
FontColor=000000FF
StringEffect=BORDER

There's a lot more configuration settings that you can choose from, all of which can be found in the Rainmeter manual. Congrats, you've created your first Rainmeter skin! Stay tuned, we'll be covering how to do even more powerful skins in the future.


This is the fourth part in our series explaining how to use Rainmeter. If you haven't already, make sure to read the previous three parts in the series:

Got any specific Rainmeter questions you'd like answered? Leave your question in the comments and we'll see if we can help.