Our first skin will be really simple. To do it all we need is Notepad and MS Paint which comes with Windows.

As you get the hang of things, you can make it more complicated.  For fun, let’s make Windows look like Windows 3.1? Remember Windows 3.1? It looked like this:

Look carefully at this picture. Think about how the user interface can be broken into pieces. You have the title bar and the borders of the window. Then you have the title bar buttons. Then you have the push buttons.

WindowBlinds works this way. A skin is a collection of bitmaps (.bmp files) and a skin file (.uis). The .uis file tells WindowBlinds where and how to use those bitmaps.

Step 1: Create a directory called Windows31

Now that you’ve installed WindowBlinds go to your \program files\object desktop\windowblinds directory. Create a directory called Windows31.  This is where our skin is going to be stored.

Step 2: The Frame of your Window

If you’re making a skin where the interface already exists (such as Windows 3.1) then just find some screenshots of it and load it into your favorite paint program. If you have an original design, then you can make a mockup. Let’s start with the Horizontal border of the window:

WindowBlinds reads the bitmaps in a very specific way.  In the case of UIS1 on the horizontal borders, it reads Active and InActive bottom border (hence the two skinny borders at the top of the image) and then the Active and Inactive title bars.

Let’s map that out:

So now we have a bitmap that contains the top and bottom parts of a typical window. Save this bitmap as horizontal.bmp

Now we need to make the vertical ones. This is a bit easier. Save this one as vertical.bmp.

Here it’s Active left border, InActive left border, Active Right Border, InActive right border. They’re all the same in this example.

Note that borders of windows need to be 4 pixels in width.  By default, the title bar needs to be 23 pixels in width (they can be any size you want but to keep our example simple, we’ll stick with the default). If you look at the sample you’ll find that the ho

Step 3: Putting buttons on your title bar

Without title bar buttons, your UI won’t be able to do much. You need a minimize button, a maximize button, and a close button.

Minimize. Up state, down state, and disabled state.

Maximize. Up state, down state, and disabled state.

Close . Up date, down state, disabled state.

But we’re forgetting one other button – the restore button. That’s what shows up when you maximize a window.

That’s the up state, down state, and disabled state.

Now we have all the graphics we need to create a very simple skin.  So let’s now create the .uis file.  We’ll call it Windows31.uis and put it in that directory we created along with the bitmaps we created.

A WindowBlinds UIS1 skin in its most basic form is made up of 4 main sections. These sections have []’s around them.

These sections are:

[TitleBarSkin]
This is where you name your skin and give yourself credit along with including a preview for users.

[Borders]
That’s the part we just created

[Caption]
This is the part where we explain how the title bar is configured.

[ButtonX]
This is where we define the title bar buttons where X is which title bar button.

Here’s our skin:

That's it! That's all it takes.

All done!

That’s it. We have our skin.  Now go to your Display Properties dialog and choose the Skins tab (if you have Windows XP go to your appearance tab) and you should find a Windows 3.1 skin listed. Apply it.  It’ll look something like this:

The completed skin can be found here.