version 0.9.8 supports skins to customize the look of the classic start
menu. The skin can change things like:
Version 1.9.0 introduces many new features:
- The background image of the main menu
- The background color of the sub-menus
- The font and text color for the main menu and the sub-menus
- The font, text color and glow color for the caption
- The image or color used to highlight the current menu item
- The image to use for the menu separators
- The sub-menus can have a background image like the main menu
- Full glass support, even behind the menu items
- More skinnable elements - the sub-menu arrows, the scroll buttons,
the vertical separator
- Skins can provide customization options (small or large icons,
add/remove caption, and many more)
All information about a skin is stored in a .skin file. The skin files must be
installed in the Skins
directory of Classic Shell (for example C:\Program Files\Classic Shell\Skins).
Anatomy of a skin file
The skin file is a DLL that contains specific resources like bitmaps,
icons, etc. The only mandatory resource is a text resource with ID=1
and type="SKIN". It is the text that describes the skin. The
description can refer to other resources like bitmaps and icons.
The easiest way to create a new skin is to start from an existing .skin
file. Make a copy of one of the default skins and save it under a new
name. Then open it in Visual Studio's resource editor, or another
resource editor like Resource
A great feature of Resource Hacker is that it lets you edit the text
directly inside. When you are done, press the "Compile Script" button,
then save the file.
To replace a bitmap resource, select Action
-> Replace Bitmap. Then pick your new bitmap file, pick the
ID of the bitmap resource you want to replace, click Replace and save. You can replace an
icon resource in a similar way.
To add a new bitmap, select Action
-> Add a new Resource. Pick the new bitmap file, enter a new
name (must be a number), and you can leave the language blank. Finally
click Add Resource and save.
The start menu uses bitmap resources for its graphical elements. Since
the start menu is not fixed size (it is resized depending on the number
of menu items, the font size, etc) and bitmaps are fixed size, we need
a way to resize the bitmap to fill a given area. Simply stretching the
whole bitmap will not work because fine details around the border will get blurred.
That's where the "slicing" system comes in. Each bitmap is split into
slices horizontally and vertically:
The 4 corners are never stretched. The left and right slices are
stretched only vertically. The top and bottom slices are stretched only
horizontally. And the middle portion can be stretched in any direction.
This lets us get any size background without sacrificing the sharp
edges or the smooth gradient in the middle:
Some images can have more than 3 slices. The main menu background has 6
slices - 3 for the caption area and 3 for the menu area.
Some images don't need both vertical and horizontal slices. The menu
separator image is only split horizontally because all separators have
the same height.
The main menu can use a solid color for its background or use a bitmap.
If you want solid color, use this in the skin description:
Main_opacity=solid - the menu is a solid rectangle
- green color
The color (and all colors in this file) are in the #RRGGBB hexadecimal format. This is
the same format that is used by HTML text.
To specify a bitmap, use:
- use bitmap resource 1
- use glass effect
- the horizontal slices
- the vertical slices
Main_opacity can be solid, region, alpha, glass, fullalpha or fullglass. Solid means the menu will be filled
with the Main_background color
and the bitmap will be drawn on top. Region
means the pixels with alpha=0 will be transparent, and the rest will be
opaque. Alpha means that the bitmap will be alpha-blended with the
desktop behind it. Glass means
the pixels with alpha=0 will be transparent, all the rest will blend
between the glass color and the pixel color (alpha=1 is full glass,
alpha=255 is fully opaque). Fullalpha and fullglass are the same as alpha/glass but inform the start menu that the background behind the menu items can be transparent.
The bitmap must follow certain restrictions:
To create a 32-bit bitmap with alpha channel you need an image
editor like Photoshop or GIMP. In Photoshop the alpha channel goes here:
- The bitmap can be either 24-bit or 32-bit with alpha channel.
- For 32-bit images don't premultiply the alpha channel. If you
don't know what "premultiply the alpha" means, never mind
- The area where the menu items are going to be must be completely
opaque if fullalpha or fullglass are not used
- For region, alpha, glass,
fullalpha or fullglass modes there is a limitation where the fully transparent (alpha=0)
pixels can be. For every horizontal line of the bitmap there can be
transparent pixels on the left end and on the right end, but not in the
middle. The non-transparent (alpha>0) pixels must be contiguous with
right-to-left versions of Windows (like Arabic and Hebrew)
the bitmap will be mirrored. Any text or directionally-sensitive
graphics (like a logo) will be backwards. If you want to support
right-to-left Windows, either don't use such graphics or provide an option that uses alternative image
When saving the bmp file make sure you pick the 32-bit file format.
The first 3 numbers of Main_bitmap_slices_X
relate to the caption area. Set them all to 0 if you don't want
caption. If you do want caption, set the numbers to to the left, middle
and right slice of the caption area of the bitmap.
The second 3 numbers of Main_bitmap_slices_X
are for the left, middle, and right slice of the menu area.
The 3 numbers of Main_bitmap_slices_Y
are for the top, middle and bottom slice of the whole menu. The
same numbers are used for the caption and the menu.
Here's an example of how the slices should look:
The highlighted vertical slices are single pixel wide and are stretched
to fill the width of the caption area and the menu area.
The caption section
The caption is the area on the side of the menu that shows text like Windows 7 Home. If you want caption
you must provide a bitmap for the main menu. There are few parameters
related to the caption:
- the name, weight and size of the
- the color of the caption text
- the color of the glow behind the
- the size of the glow (0 - no glow)
- the padding on the left, top, right
and bottom of the caption
The font weight can be normal or bold.
The font size is given in points. A point is 1/72 of an inch. So the
font size in pixels is:
point_size * DPI / 72
where DPI is the current DPI display setting.
The font size can be negative or positive. A negative size measures the
character height and a positive size measures the cell height of the
font. Since the cell is usually taller than a character, a font size -10 is usually slightly larger than 10.
The padding is the number of pixels to leave on each side of the
The menu section
The menu section is where the menu items are. The parameters are:
Main_large_icons=1 - 1 - use large icons, 0 -
use small icons
the name, weight and size of the menu font
- the color for normal, selected,
disabled and disabled+selected text
- the size of the glow (0 - no glow). The glow is always white
- the color for normal and selected sub-menu arrows
- the padding on the left, top, right and
bottom of the menu items
Main_thin_frame=1 - use thin frame instead of the thick 3D frame (for Classic mode only)
- the resource ID of the selection
bitmap, or a selection color
Main_selection_slices_X=3,1,3 - the horizontal slices of
the selection bitmap
- the vertical slices of the selection bitmap
- the resource ID of the
sub-menu arrow bitmap
- the resource ID of the
Main_separator_slices_X=3,34,3 - the horizontal slices of
the separator bitmap
- the resource ID of the pager
bitmap. The pager handles the 2 scroll buttons that appear at the top
and bottom of the menu when it doesn't fit on screen
Main_pager_slices_X=3,1,3 - the horizontal slices of
the pager bitmap
- the vertical slices of the pager bitmap
- the resource ID of the pager arrows
The menu text needs 4 colors - for normal text, selected text, disabled
text and disabled+selected text.
Main_selection can be either an
ID of a bitmap resource or a solid color in the hexadecimal format #RRGGBB. For example:
Use Main_separator to provide
an alternative look for the menu separator. For example:
The height of the bitmap determines the height of the separator. If no
separator bitmap is given the menu uses the default etched line.
The arrows bitmap (Main_arrow) needs 2 have 2 arrow images like this:
The top half is used for the normal arrow and the bottom half is for the selected arrow.
The pager has 2 bitmaps. The first one (Main_pager) has the normal and selected backgrounds for the scroll buttons:
The second one (Main_pager_arrows) must have 4 arrow images like this:
The top 2 point up, the bottom 2 point down, the left 2 are normal and the right 2 are selected.
More on padding
The start menu uses multiple padding settings to correctly align all graphical elements. You can see from this image:
Tweak the numbers to get the desired alignment of the caption, or the gap between the icon and the text, etc.
Together with the background bitmap you can provide a color mask bitmap
of the same size that will control how the first bitmap will be
combined with the system glass color and the system menu color. The
mask bitmap must have the same dimensions and layout as the background.
The red channel controls how much of the glass color to use and the
green channel controls how much of the menu color to use:
In this example the first image is the background, the second is the
mask and the third is the end result. The red portions of the mask
blend the glass color (purple) with the background. The green portions
blend the menu color (gray) with the background. By varying the
intensity of red and green in the mask image we control how much the
colors are blended.
Some skins can support two columns in the main menu, similar to the
Windows XP start menu. The main bitmap must have 6 vertical slices,
just like if the menu has a caption. But instead of having a caption
section and the menu section, there are the first column section and
the second color section. Use Main_2columns=1 to enable the two-column mode:
- enable two-column mode
- set the vertical slices for the columns
The second column can have its own set of properties to specify a different font, colors, selection bitmap, etc.:
These properties are optional. If something is not set, the values from the first column will be used.
The start menu can also show the user picture. You enable it by setting
the size of the user picture. All original skins use 48x48 pixels, but
you can choose any size up to 128x128:
You must also set the position of the image inside the menu:
position is measured from the left and top, and negative
numbers are from the right and the bottom. So "-10,6" means 10 pixels
from the right and 6 pixels from the top. The horizontal position can
also be "center", "center1" or "center2". Then the image will be
centered over the whole menu, or over the first column, or over the
- center on top of the second column
Optionally, you can specify a frame bitmap:
- the resource ID of the frame bitmap
- how many pixels between the top/left corner of the frame and the top/left corner of the user picture
The frame is drawn on top of the user picture,
so it must have a hole where the picture is supposed to be. That means
the frame bitmap must have alpha channel.
By default the user picture is drawn opaque. You can control the transparency of the picture with this property:
- set the transparency to 200 (out of 255)
The start menu can also show the user name. To enable that feature you
have to provide the location of the name inside the menu, its font and alignment:
four number are the left, top, right and bottom offsets of the
rectangle. Positive numbers mean offsets from the left and top.
Negative numbers mean offsets from the right and bottom. In this
example the rectangle will be 10 pixels from the left, 15 from the top,
75 from the right and the bottom will be 55 from the top.
Since the top and bottom numbers (second and fourth) are both positive,
the rectangle will be aligned to the top of the menu and will always be
40 pixels tall.
Unlike other fonts in the skin, the font for the user name does not
scale when the screen DPI changes. The font will alway assume DPI=96.
The font needs to have the same pixel size at all times because it must
fit inside the User_name_position box, which is always the same height.
The alignment can be center, center1, center2, left, left1, left2, right, right1 or right2. If this setting is missing, the name is centered by default. Center, left and right align the name relative to the whole menu. Center1, left1 and right1 align inside the first column, and center2, left2 and right2 align inside the second column.
The user name is usually taken from the system. For systems that
provide full name it will be something like "Smith, John". Otherwise it
will be the login name like "jsmith". You can override the text in StartMenu.ini using the MenuUsername setting.
The icon next to the search box can be skinned to
match the menu background. You need to provide one bitmap that contains
8 images like this:
The top row has 16x16 images and the bottom row has 20x20. Then specify the bitmap ID:
For sub-menus the parameters are similar to the main menu:
Sub-menus can also have a vertical separator. It is used when a menu has more than one column:
Submenu_separatorV=12 - bitmap to use as a vertical separator between multiple columns
Submenu_separator_slices_Y=2,16,2 - vertical slices for Submenu_separatorV
In the settings of the start menu there is a button About This Skin
that opens a message box. Use it to provide information about the skin
and about yourself. List any requirements of your skin - Does it
require Aero? Is it intended for Vista only?
The parameters are:
About=Some text - the text you want displayed
AboutIcon=1 - the icon resource to use in
the About box
In the text you can use \n as
a line break, like "Line1\nLine2".
The text also supports hyperlinks in the format <A HREF="www.mycoolsite.com">Visit my
The icon can be any icon resource you want displayed. If no icon is provided, the
system "info" icon is used.
One skin file can contain multiple skins. The first one (defined in the
SKIN resource with ID=1) is the main skin and the rest are variations.
The variations are described in the main SKIN resource like this:
Variation1=0, "Large Icons, With Caption"
Variation2=2, "Large Icons, No Caption"
Each variation has a resource ID and a text. The ID refers to a
secondary SKIN resource, which contains overrides for some parameters
(for example an alternative Main_bitmap, or Submenu_font). The text is
the name of the skin variation that will be used in the Settings box.
The skin variations make it possible to pack multiple skins into one
file, which makes them easier to distribute together. Also all skins
can share bitmap resources from the skin file, reducing the total size.
A skin can define a list of options for the user to pick. Each option
is a checkbox that can be ON or OFF. The options are defined like this:
OPTION SMALL_ICONS="Small Icons",0
First there is the word OPTION, then the name of the option (like
CAPTION), then the label for the checkbox (like "Caption") and finally
the default value (1 - ON, 0 - OFF).
At the end of the skin file you can have one or more sections that
provide overrides for some parameters. Each section has a condition,
which is evaluated based on the options that the user has selected. The
condition can be an expression that uses operations like AND, OR and NOT - like OPTION1 AND (OPTION2 OR NOT OPTION3).
[NOT CAPTION]- this section will be used when CAPTION is OFF
[SMALL_ICONS]- this section will be used when SMALL_ICONS is ON
Each section starts from its header and ends at the next section or
the end of the file. So it is important to place the sections at the
very end of the file.
It is possible to disable an option depending on some other options.
You do that by providing an expression for the option, as
well as an alternate default value when the expression is false. For
OPTION TWO_COLUMNS="Two Columns",0
OPTION CAPTION="Caption",1, NOT TWO_COLUMNS, 0
The "Caption" option will be disabled when NOT TWO_COLUMNS is false (that is, when the "Two Columns" option is checked). When the option is disabled, its value will be fixed to 0. The idea is to make it clear for the user that if you have a two-column menu you can't have a caption.
Important Note: An option can only depend on other options that are defined before it. So in this example CAPTION must be defined after TWO_COLUMNS.
When the skin is used to replace the All Programs menu in the Windows
start menu, most of the options will be irrelevant (because most
options focus on the look of the main menu). You can inform the system
which options have effect on the sub-menus using the
This means that only THICK_BORDER and SOLID_SELECTION
are important, and the other options will be hidden. If the skin has
variations that have effect on the sub-menu, then include the string
"variations" in the AllProgram_options list.
In addition, a
built-in option ALL_PROGRAMS will be set to 1. So you can do things like:
[ALL_PROGRAMS] - this section will be used only for the All Programs menu
Submenu_text_color=#0000FF,#0000FF,#7F7F7F,#7F7F7F - override the text color
During development it can be a bother to have to Resource-Hack the skin
file for every little change. That's why the start menu supports a
special "custom" skin. Instead of packing all resources in a DLL, you
can leave them as loose files in the Skins directory:
1.txt - the main skin description
12.bmp - bitmap used by 1.txt
2.txt - a skin variation
The file name must be the resource ID of that asset in the skin file.
For example 12.bmp will go
into a bitmap resource with ID 12. Edit them until you are ready to
package them into a skin file.
The "Custom" skin option is available in the settings only if the start
menu can find the 1.txt file.
The custom skin has an additional parameter that is not available for
This makes the start menu run in right-to-left mode. Use it to see how
your background image will look on an Arabic OS. Note:
The RTL emulation is not perfect. One notable difference is that all
menu icons are mirrored. On a real RTL Windows they will not be.
If your skin is causing an error, the start menu will drop it and use
the Default skin instead. The reason can range from a missing resource
to an incompatible version to a bitmap with wrong size, and so on.
To figure out the cause of the problem turn on "Report Skin Errors" in
the start menu settings. Then you'll see a popup like this:
Note that only errors related to the current skin variation and the
current skin options will be reported. So test your skin with every
combination to ensure it works in all conditions.
Skin description file reference
; These are all parameters that you can set in the skin description file
; Most parameters are optional. If
a parameter is missing some default value is used
; The text lines starting with a semicolon are "comments". They are
ignored by the system
; About - text to use in the About box
for this skin. use \n for new line
About=My cool skin\n\nCheck out other cool skins on <A
; AboutIcon - the ID of an icon
resource to use in the About box. By default the system's "info" icon
; Version - version of the
required skin engine. Set to 2 if the skin uses any of the new features
introduced in Classic Shell 1.9.0 like full glass,
; skinnable sub-menus, skinnable pager buttons, skinnable arrows, etc
; ForceRTL - set to 1 to force
right-to-left layout. This setting is only supported by the "custom"
; Variation1, Variation2, ... - variations of the skin
; Variation1 is the default variation
; Each variation has a SKIN resource ID and a name
; The resource is a text file
with overrides for some parameters. For Variation1 the resource ID must
be 0 (no resource) and it can't override any parameters
; The name is the display name in the settings UI
; The number in the Variation#
parameter name determines the position in the settings UI. The numbers
must start from 1 and be sequential with no gaps
Variation1=0, "Large Icons, With Caption"
Variation2=2, "Large Icons, No Caption"
;CAPTION SECTION - describes the
caption portion of the main menu
; Caption_font - font to use for the
caption. The format is "font name",[normal/bold],point size. Defaults
to "Segoe UI",normal,18
; Caption_text_color - RRGGBB color of
the caption text. Defaults to white
; Caption_glow_color - RRGGBB color of
the caption glow. Defaults to white
; Caption_glow_size - the width of the
caption glow (0 - no glow). Defaults to 0
; Caption_padding - number of pixels
to add on left/top/right/bottom of the caption
;MAIN MENU SECTION - describes the
menu portion of the main menu
; Main_bitmap - ID of a bitmap
resource to use for the main menu. Default is no
; Main_background - RRGGBB color to
use for the background of the main menu. Defaults to the system menu
; The color is only used if
Main_opacity is "solid"
; Main_opacity - sets the opacity for
the main menu. The values are:
; solid - the menu is a solid
rectangle. It is filled with the Main_background color and the
Main_bitmap is drawn on top
; region - the pixels from the
bitmap with alpha=0 are fully transparent. The other pixels are fully
opaque. The Main_background color is not used
; alpha - the full alpha for
each pixel is used. Alpha goes from 0 (transparent) to 255 (opaque).
The Main_background color is not used
; glass - the full alpha for
each pixel is used. Alpha goes from 0 (transparent), 1 (full glass) to
255 (no glass). The Main_background color is not used
; fullalpha - same as alpha, but allows the area behind the menu items to be transparent
; fullglass - same as glass, but allows the area behind the menu items to be transparent
; When Aero is disabled,
"alpha", "glass", "fullalpha" and "fullglass" are converted to "region"
; The default is "solid"
; Main_bitmap_slices_X - must contain
6 numbers. The sum of the numbers must be equal to the width of the
; number 1 is the width of the
image to use for the left edge
; number 2 is the width of the
image to stretch and use as the background for the caption
; number 3 is the width of the
image to use on the right of the caption
; number 4 is the width of the
image to use on the left of the menu
; number 5 is the width of the
image to stretch and use as the background for the menu
; number 6 is the width of the
image to use for the right edge
; If the first 3 numbers are 0
there is no caption
; Main_bitmap_slices_Y - must contain
3 numbers. The sum of the numbers must be equal to the height of the
; number 1 is the height of
the image to use for the top edge
; number 2 is the height of
the image to stretch and use as the background
; number 3 is the height of
the image to use for the bottom edge
; Main_large_icons - 0 - use small
icons in the main menu, 1 - use large icons. Default is 0
; The small icons are 16x16 if
the DPI is 96, 20x20 for DPI 120 and 24x24 for DPI 144
; The large icons are twice
the size of the small icons
; The sub-menus always use
; Main_font - font to use for the main
menu items. The format is "font name",[normal/bold],point size.
Defaults to the system font
; Main_text_color - 4 colors for the
text in the main menu. By default the system color is used
; color 1 is for normal menu
; color 2 is for selected menu
; color 3 is for disabled menu
; color 4 is for selected
disabled menu items
- the width of the text glow (0 - no glow). Defaults to 0. The glow is
always white (glow doesn't work if Windows is in Classic mode)
; Main_padding - number of pixels to
add on left/top/right/bottom of the menu
; If Main_bitmap
is not set, the width of the standard window border is subtracted from
the right/top/bottom sides (and the left side if there is no caption)
; This is usually 2 pixels for
the Classic theme and 1 pixel for Aero or Basic
; Main_icon_padding - extra padding on the left/top/right/bottom of the icon in the main menu
; The default is 3,3,3,3
; Main_text_padding - extra padding on the left/top/right/bottom of the text in the main menu
; The default is 1,0,4,0
; Main_thin_frame - use a thin 1-pixel frame instead of the thick 3D frame
; This parameter is only used in Classic mode, and when Main_opacity is "solid". Default is 0
; Main_arrow_color - colors for the sub-menu arrow (normal and selected). The normal color is also used for the drag/drop insertion marker
; If Main_arrow_color is not set, the first 2 colors of Main_text_color are used
; Main_arrows - bitmap for the sub-menu arrows. The top half of the image is the normal arrow and the bottom half is the selected arrow
; Main_selection - describes how the
selected menu item is drawn in the main menu. Can be:
; - an ID of a bitmap resource
(can be 32-bit bitmap with transparency or 24-bit bitmap with no
; - a #RRGGBB color
; Default is the system
Main_selection_slices_Y - slices of the selection mark image.
The first and third are the corners, and the middle is stretched to
fill the area
; Main_separator - ID of a bitmap
resource to use for the main menu separator. If no value is set the
system separator is used
; Main_separator_slices_X - the
horizontal slices for the separator bitmap
; Main_pager - a bitmap that contains the background for the pager buttons (the ones that scroll menus up and down)
; Main_pager_slices_X, Main_pager_slices_Y - the slices for Main_pager
; Main_pager_arrows - a bitmap that contains the arrow image to draw on top of the Main_pager background
; User_image_size - the size of the user image to use. Default is 0, which means the user image is not displayed
; The size must be compatible with the size of the frame bitmap User_bitmap. The value is usually 48
; User_frame_position - horizontal and vertical position of the user image frame in the main menu.
; Positive numbers mean offset from the left and the top. Negative numbers mean offset from the bottom and the right
; The horizontal position can also be "center", "center1" and "center2"
to center the image relative to the whole menu or to the first or
; User_bitmap - the resource ID of the frame bitmap. If a bitmap is not set, a simple edge will be used
; User_image_offset - how many pixels between the top/left corner of the frame and the top/left corner of the user picture
; User_image_alpha - set the transparency to 200 (out of 255)
- the location of the user name inside the menu (left, top, right,
bottom). Positive numbers are offsets from the left and top, and
negative numbers are from the right and bottom
- the alignment of the user name within the rectangle (center, center1, center2, left, left1, left2, right, right1, right2). The default is center
; These define the font and color of the user name
; SECOND COLUMN SECTION - describes the second column of a 2-column main menu
; Main_2columns - set to 1 to enable the two-column mode
describe the look of the second column. If some parameter is missing,
the corresponding value from the first column will be used
; SEARCH SECTION
;SUB-MENU SECTION - describes the
look of the sub-menus
; Submenu_padding - number of pixels
to add on left/top/right/bottom of the sub-menu
; The width of the standard window border is subtracted from all sides
; This is usually 2 pixels for
the Classic theme and 1 pixel for Aero or Basic
; Submenu_separatorV - bitmap to use as a vertical separator between multiple columns
; Submenu_separator_slices_Y - vertical slices for Submenu_separatorV
; Submenu_offset - additional horizontal offset for sub-menus. It reduces the overlap when the sub-menus have thick borders
; AllPrograms_offset - additional horizontal offset for the first menu in All Programs mode (this is used instead of Submenu_offset)
- a list of options that have effect on the All Programs menu. All
other options will be hidden when editing the All Programs skin
; These have the same meaning
as the Main_... properties