Appearance of Desktop sidebar is described in very simple xml file. Such file
should be placed in skins subdirectory of Desktop Sidebar installation
directory. It can be placed in subdirectory of this directory but in such case
it has to have the same name as its subdirectory. Only one level of
subdirectories is supported.
Sample directory tree:
C:\Program Files\Desktop Sidebar\skins <-- skins directory
- silver.xml <-- silver skin file
- blue\ <-- directory of blue skin
- blue.xml <-- blue skin file
General structure of skin file:
<?xml version="1.0" encoding="utf-8" ?>
<skin author="Ala" >
... item definitions ...
Root element of xml can have author attribute which specify who
should be displayed in Desktop Sidebar Options dialog as a skin author.
Skin file consists of items definitions. Skin item is single graphical
element used to display some element in sidebar user interface. For
instance there is background item which determines how background of
sidebar will look like.
Skin item can define three appearances of element: standard,
hover which is used when user rests mouse pointer over element and
pressed which is used when user press mouse button. Hover and
pressed appearance are optional but skin has to have standard
appearance. It is possible to inherit item attributes from another item
and define only changed attributes.
<item name="caption" inherit="panel" height="20" >
<appearance name="standard" <--
<appearance name="hover" <-- hover
This is definition of caption item which is used by Sidebar to
display caption of panel. Please note that it inherits remaining
attributes from panel item.
Graphical attributes of appearance should be specified inside
appearances definition. Following attributes could be specified:
fillStyle - This attribute specify how interior of graphical item
should be painted. Following values are allowed:
- hollow - this item doesn't have background. It's transparent
- solid - this item is filled with one color specified in
- gradient - this item is displayed with gradient filling. Colors
of filling are specified in fillColor1 and fillColor2
- bitmap - bitmap is painted in background. Pink (RGB 255,0,255)
part of bitmap is displayed as transparent
- stretchbitmap - similarly like below but bitmap is stretched to
fill whole area
- tiledbitmap - similarly like below but bitmap is tilled to fill
- fillColor1 - define fill color. Used when
fillStyle=solid|gradient. It is stored as comma separated RGB
values. (e.g. fillColor1="255,0,0")
- fillColor2 - define second color in case of gradient filling
- gradientMode - define mode of gradient filling. Accepted values
- fillImage - this is name of bitmap used to draw background of
element. Bitmap file should be places in the same directory as skin
- imageMargins - this attribute define offset of bitmap when
imageMargins="1,1,2,2" specifies that bitmap will be drawn in one
pixel distance from top and left edge of element. If coordinates are
negative it means drawing from opposite edge so
imageMargins="-20,..." means that bitmap will be drawn 20 pixels
left from right edge of element.
- sizingMargins - this attribute is used when
fillStyle=stretchbitmap. In some cases we want to display some part
of image without stretching. For instance in blue skin edges of border
aren't stretched, only middle part of bitmap is stretched in order to
fill whole panel area. Value of this attribute specify amount of space
on each edge of bitmap which should be drawn without transformation.
(e.g. sizingMargins="2,0,2,0" - means that 2 pixel
width part on left and right side of bitmap will be drawn without
stretching. Part of picture between these two places will be stretched
to fill whole area)
- outlineStyle - this attribute specifies how outline of elements
should be painted. Accepted values are:
- none - element is painted without any outline
- flat - outline is simple line in color defined in outlineColor attribute
- outlineColor - this attribute defines color or outline. It is
comma-separated RGB value
- outlineWidth - this attribute defines width of line used to draw
- textColor - this is comma-separated RGB value used as color of text
displayed inside element.
- fontName - name of font used to display text (e.g.
- fontSize - size of font in points. One point is 1/72 of inch. This
is the same unit as used by Word.
- fontSize120dpi - size of font used when user has â€žLarge Fonts"
enabled in system Display Properties dialog
- fontStyle - this attribute defines style of font used to display
text in element. Accepts following values:
Skins element can have additional attributes used by Desktop Sidebar.
For instance caption element in example bellow has height
attribute which is interpreted as height of caption by Desktop Sidebar.
Skin should define many elements. Please use blue
skin included in Desktop Sidebar installation as reference. Names of
elements are descriptive so a few experiments allows to understand which
part of Desktop Sidebar is drawn with using of a given element.
To start developing of a new skin copy blue subdirectory of skins
directory, change name of directory and skin file to a new name and
introduce changes to new skin file. Desktop Sidebar have to be restarted
to add a new skin to combobox in Options dialog but then your skin is
reloaded after change of selected skin in Options dialog so there is no
need to restart Desktop Sidebar during skin development.