How to create "skins"

Warning:
Never use bitmaps from other artists in your "skin", without their prior written consent. And when they give you their consent always give them the credit of the design ownership.

If you want to create your own "skin" you don't need to be a good programmer but... an artist.
Keep in mind that a good looking "skin" must never dominate your window content.
Try as much as possible to use a soft color set. Even if you can use large borders, try to keep them small to ensure your window will fit on any screen size.
Never use true color bitmaps. Use 256 colors, or less if possible (256, 128, 64, 32, 16), keep each bitmap's size as small as possible.

To create a "Skin" DLL for WinLIFT, just compile these two lines of code:

#COMPILE DLL "WinLIFT.SKL"
#RESOURCE "MySkin.pbr"

Your default skin DLL (extension ".SKL") must be named WinLIFT.SKL. It is specific to your EXE files. Never put it in any Windows system directory, but in the same directory as your application.

We will explain below how to create the "MYSKIN.RC" resource file.

A "skin" resource file is made of several bitmaps to draw each part of the window:

1. The caption:
Three bitmaps are used to draw the whole caption.

capleft.bmp	capmid.bmp	capright.bmp
This bitmap must be large enough to hold the program icon. Its left part must match the bitmap being used to draw the left border size. Its right part must match "capmid.bmp".	This bitmap is tiled on the X axis to paint the caption area where the program name and the status led will be displayed.	This bitmap must be large enough to hold the system buttons, minimize, restore/maximize, close. Its right part must match the bitmap being used to draw the right border size. Its left part must match "capmid.bmp".

2. The left and right sides:
If you wish, left and right sides can use different widths, but their heights must match exaclty

The top of the left side must match the left part of the "capleft.bmp", the bottom must match the left part of "capbottm.bmp".

The top of the right side must match the right part of the "capright.bmp", the bottom must match the right part of "capbottm.bmp".

3. The bottom side:
This bitmap is tiled on the X axe to paint the bottom of the window frame.

The left and right side of this bitmap must match respectively the bottom of "sidleft.bmp" and "sidright.bmp"

4. The menu bar:
This bitmap is tiled on the X axis to paint the menu bar background.

The menu height will correspond to the height of this bitmap. If it doesn't use a motif on the X axis it could be as small as one pixel width.

5. The pop-up menu backround:
This bitmap is tiled on both X and Y axes to paint the background of a pop-up menu item.

If you don't want this bitmap to be tiled on the X axis, make it as long as the largest text item that could be displayed in a pop-up menu item.

6. The status bar:
This bitmap is tiled on the X and Y axes to paint the status bar background.

The height of the status window could be different from the height of this bitmap. If it doesn't use a motif on the X axis it could be as small as one pixel width.

7. The background:
This bitmap is tiled on both the X and Y axes to paint the window background.

The bitmap you use to tile the window background should not dominate your window content. Its color should also match the 3D colors being used by Windows to draw its frame controls.

8. The push buttons:
This bitmap holds the four states being used to display all push buttons (even the system buttons).

First = default state, second = push state, third = focus hover state, fourth = disable state.

9. The radio buttons:
The magenta color, RGB(255,0,255), is being used as the transparent color. This means that it won't be displayed, thereby leaving the corresponding background intact.

This bitmap holds the four states that could be used to display a radio button.

10. The check buttons:
The magenta color, RGB(255,0,255), is being used as the transparent color. This means that it won't be displayed thereby leaving the corresponding background intact.

This bitmap holds the four states that could be used to display a check button.

11. The focus led:
The magenta color, RGB(255,0,255), is being used as the transparent color. This means that it won't be displayed thereby leaving the corresponding background intact.

This bitmap holds the two leds that are used to show the window focus state (On/Off).

Example of resouce file to save as "MySkin.rc":

#define SK_CYSTATUS 3
#define SK_CXSIZE 7
#define SK_CYSIZE 8
#define SK_CXSYSBUT 9
#define SK_CYSYSBUT 10
#define SK_CYCAPTEXT 12
#define SK_XBUT3DBORDER 13
#define SK_YBUT3DBORDER 14
#define SK_BUTLEDON 15
#define SK_CXSYSICON 16

#define SK_CYSYSICON 21
#define SK_CYCAPLED 22
#define SK_AUTHOR 99

#define SKCOLOR_CAPTIONTEXT 101
#define SKCOLOR_INACTIVECAPTIONTEXT 102
#define SKCOLOR_ACTIVECAPTION 103
#define SKCOLOR_INACTIVECAPTION 104
#define SKCOLOR_3DHILITE 105
#define SKCOLOR_3DSHADOW 106
#define SKCOLOR_MSGBOX 107
#define SKCOLOR_BTNTEXT 108
#define SKCOLOR_BTNHILITE 109
#define SKCOLOR_POPMENUTEXT 110
#define SKCOLOR_POPMENUHILITE 111
#define SKCOLOR_WINDOW 112
#define SKCOLOR_WINDOWTEXT 113
#define SKCOLOR_HILITEBACK 114
#define SKCOLOR_HILITETEXT 115
#define SKCOLOR_ACTIVMENU 116
#define SKCOLOR_INACTIVMENU 117
#define SKCOLOR_3DLEFTTOP 118
#define SKCOLOR_3DRIGHTBOTTOM 119
#define SKCOLOR_STATUSTEXT 120
#define SKCOLOR_STATUSLEFTTOP 121
#define SKCOLOR_STATUSRIGHTBOTTOM 122
#define SKCOLOR_SHADOW 123
#define SKCOLOR_POPMENUITEM 124

CTLBACK     BITMAP CTLBACK.BMP
MENUBAR     BITMAP MENUBAR.BMP
MENUBACK    BITMAP MENUBAK.BMP
BUTTON      BITMAP BUTTON.BMP
CAPTIONL    BITMAP CAPTIONL.BMP
CAPTIONM    BITMAP CAPTIONM.BMP
CAPTIONR    BITMAP CAPTIONR.BMP
SIDEL       BITMAP SIDEL.BMP
SIDEB       BITMAP SIDEB.BMP
SIDER       BITMAP SIDER.BMP
RADIOBUT    BITMAP RADIOBUT.BMP
CHECKBUT    BITMAP CHECKBUT.BMP
CAPTIONLED BITMAP CAPLED.BMP
STATUSBACK BITMAP STATUSBK.BMP
PROGRESSBAR BITMAP PROGRESS.BMP
CPOPUPR     BITMAP CPOPUPR.BMP

STRINGTABLE LOADONCALL MOVEABLE PURE DISCARDABLE
BEGIN

   SK_CYSTATUS "18"     // SIZE: height of status bar. Std = 18
   SK_CXSIZE "23"       // SIZE: X size of system buttons. Std = 16
   SK_CYSIZE "23"       // SIZE: Y size of system button. Std = 16
   SK_CXSYSBUT "3"      // SIZE: X right pos of system buttons
   SK_CYSYSBUT "3"      // SIZE: Y pos of system buttons
   SK_CYCAPTEXT "7"     // SIZE: Y pos of caption text
   SK_CYCAPLED "7"      // SIZE: Y pos of caption led
   SK_XBUT3DBORDER "9" // Horizontal non stretched button border
   SK_YBUT3DBORDER "11" // Vertical non stretched button border
   SK_BUTLEDON "0"      // Set button's LED 0 = Off, 1 = On
   SK_CXSYSICON "5"     // SIZE: X pos of system icon.
   SK_CYSYSICON "7"     // SIZE: Y pos of system icon.

   SKCOLOR_CAPTIONTEXT "246,246,180"       // RGB active caption text color.
   SKCOLOR_INACTIVECAPTIONTEXT "206,206,140" // RGB inactive caption text color.
   SKCOLOR_ACTIVECAPTION "206,84,10"       // RGB active caption background color.
   SKCOLOR_INACTIVECAPTION "173,60,34"     // RGB inactive caption background color.
   SKCOLOR_3DHILITE "242,207,178"          // RGB hilite color for 3D display.
   SKCOLOR_3DSHADOW "150,150,150"          // RGB shadow color for 3D display.
   SKCOLOR_MSGBOX "192,192,192"            // RGB pop-up child window background.
   SKCOLOR_BTNTEXT "92,10,3"               // RGB font color to use in button.
   SKCOLOR_BTNHILITE "250,190,5"           // RGB font color to use in focus button.

   SKCOLOR_POPMENUTEXT "255,233,188"       // RGB PopMenu and Status text color.
   SKCOLOR_POPMENUHILITE "49,27,17"        // RGB PopMenu 3D color.

   SKCOLOR_WINDOW "62,59,58"               // RGB default main window background color.
   SKCOLOR_WINDOWTEXT "235,230,225"        // RGB default main window text color.
   SKCOLOR_HILITEBACK "90,79,76"           // RGB active item background in control.
   SKCOLOR_HILITETEXT "242,207,178"        // RGB active item text in control.
   SKCOLOR_ACTIVMENU "246,246,180"         // RGB active menu bar text color.
   SKCOLOR_INACTIVMENU "244,196,112"       // RGB inactive menu bar text color.

   SKCOLOR_3DLEFTTOP "78,78,78"            // RGB skDrawRect3D left top color.
   SKCOLOR_3DRIGHTBOTTOM "187,187,187"     // RGB skDrawRect3D right bottom color.

   SKCOLOR_STATUSTEXT "255,255,255"        // RGB status text color.
   SKCOLOR_STATUSLEFTTOP "78,78,78"        // RGB status 3D left top color.
   SKCOLOR_STATUSRIGHTBOTTOM "187,187,187" // RGB status 3D right bottom color.

   SKCOLOR_SHADOW "0,0,0"                  // RGB shadow color.

   SKCOLOR_POPMENUITEM "255,64,0"          // RGB active item for translucent popup menu.

   SK_AUTHOR "||Skin design: <Your Name> E-mail: YourName@YourMailBox"
END