How to create your own skin in KMP

(By Opus, published in Korean's KMPlayer Blog. Translated by Pantuflo)

1. Basics
In this first step, we are going to make a very simple skin, to learn the most basic principles of
making skins for KMP.
The KMPlayer's skins are stored into the skins folder, placed where you installed KMP (for
example, c:\Program Files\The KMPlayer).

We are going to create a new folder called "My skin" that will be our first skin.

We will start with an image that has to be in PNG or JPG format. If your image is in a different
format, you will have to convert it. That image will be the background. Here's an example:

This is a small (50x50) image, called bg.png that we will put into the skin folder. This will be
your first skin! When dragging a video into that KMP logo, it will start playing.
Apart from the bg.png image, we need the "skin.ini" file to make our small skin work. This can
be created with Notepad.

[info]
type=info

This is the info section and it has some properties, defined below

minwidth=50

Minimum width that sets the skin size

BackBitmap=bg.png

Background image. bg.png is placed in "My skin" folder

BackStretch=0

Do not stretch the background image when resizing the main window

BackColor=$000000

The background color of the skin (black in this case)

Copyright=opus

Now we have the two needed files placed in "My skin" folder, we are going to try if it works.

Start KMP and go to the right-click menu -> Skins and you will see your new skin marked with a
* symbol before the name.

Click on it, and if everything goes well, your skin will be shown.

To test it, you can drag a video file into the KMP logo.

Tip: there are no playback controls yet. Double-click into the image to start/pause playback.
Now we are going to pack our skin to distribute it. Skins are distributed in a packed file with
.ksf extension, so it can be easily installed by making double-click into it.
.ksf files are just .zip files that have been renamed. We can use Windows or a tool like 7-zip to
compress our files.

Then rename the .zip file to .ksf and place it in the skins folder. If you double-click into the .ksf
file, it will be automatically copied to the skins folder and KMP will open with the new skin.

2. Creating the main window

With our first skin, we can only control video playback with hotkeys or the right-click menu.
Now we are going to create a main window to place those buttons that are usually placed in a
media player to control the most basic features.
This is how our main window will look like: (note that there isn't any button yet).

To start with the new skin, go to the skins folder and create a new "My skin 2" folder.
Apart from the logo, the main window is divided into four parts:

We need four images to make the window frame (top, bottom, left and right panels).

Each panel consists of a little image that is repeated to fill the window limits. In case of the top
and bottom panels, the corners must also be present.
For example, in the top panel we need the two corners at right and left sides, but the center
part can be reduced in size.

Here we will reduce the top image to 22 pixels width.

In the same way, we can cut the other three panel images.

Pannel_Top.png The top of the window (22 x 24)

Pannel_Bottom.png The bottom of the window (22 x 66)
Pannel_Left.png, Pannel_Right.png The window left and right sides (6 x 10 both)
BG.png The logo image (320 x 240)
Those images are all saved in the "My skin 2" folder.

Now we are going to create the "Skin.ini" file that is necessary to place together all these
images.
[info]
type=info
minwidth=320

Defines the window size

title=KMPLAYER

Window title (not used for now)

BackStretch=0

Do not resize the logo image when resizing the main window

BackColor=$FFFFFF

White background color

BackBitmap=BG.png

This is the logo image

[TopPanel]
type=panel

Panel element that has some properties, defined below

align=Top

Define the top panel

height=24

Specify the vertical size of the Pannel_Top.png image

image=Pannel_Top.png
margin1=10

Fix 10 pixels at the left of the image (the rest are repeated)

margin2=10

Fix 10 pixels at the right of the image

[BottomPanel]
type=panel

align=Bottom
height=66
image=Pannel_Bottom.png
margin1=10
margin2=10

[LeftPanel]
type=panel
align=left
width=6
height=10
image=Pannel_Left.png
margin1=0
margin2=0

[RightPanel]
type=panel
align=right
width=6
height=10
image=Pannel_right.png
margin1=0
margin2=0

About the margin parameters, note that, for example, in the Top Panel, the Pannel_Top.png
image is 22 pixels width. The following parameters:
margin1 = 10
margin2=10
mean that 10 pixels at the right and 10 pixels at the left of the image are fixed, so that the 2
pixels in the middle are repeated (as we can see on the images above). In the same way, the
vertical panels have a margin of 0 since the whole image is repeated.
Now you can test your skin. Start KMP and go to right-click -> Skins -> *My Skin 2.

3. Add buttons
Let's add some buttons to our previous skin. In a KMP skin, each button is composed of 4
images placed horizontally in the following way:

The close button has a 22 x 15 size. So the four images placed together make a (4 x 22) x 15 =
88 x 10 image. The image sequence involves the four possible states in a button. From left to
right:

Focused window
Unfocused window
Mouse cursor over the button
Pressed button

To make this new skin, copy the previous "My skin 2" folder and rename it to "My skin 3". You
will use the previous "Skin.ini" file. To place the exit button (Exit.png) on the main window and
to make it work, add this text to the Skin.ini file:
[Exit]
type=button

Defines a button

left=-26

Negative value: 26 pixels from the right side of the window

top=5
width=22

Each button has a 22 x 15 size

height=15
parent=TopPanel

Inherits the properties of the top panel defined in Skin.ini

Transparent=1000
image=Exit.png
Command=ExitCmd

Command executed when you press the button (Exit in this case)

DownOffsetX=0
DownOffsetY=0
UseInactiveMode=1

1: use the unfocused image (second image), 0: do not use it

Once the exit button has been applied:

Look at the bottom panel. We have added a line to place the playback buttons better. Now we
are going to add them.
We will use five playback buttons. All of them have similar parameters in the "Skiin.ini" file.
Previous:

Next:

Pause (in the same location as the play button to toggle with it):

Play:

Stop:

The following is how the skin looks with all the buttons added:

4. Sliders and labels

Now we want to make two sliders: one to control the playback position and another for the
volume.
Copy the previous "My skin 3" folder and rename it to "My skin 4" as we will use the previous
"Skin.ini" file, adding some lines to it, apart from some new images.
A slider has the following components:

1. Thumb: the button used to move the slider. This button has two states, normal and
pressed.

2. Slider1: the slider color 1 in the image above (the part of the video that has been
played)
3. Slider2: the slider color 2 in the image above (the remaining part of the video)
4. Mark1Image/Mark2Image: the icon shown when setting the beginning and the ending
of the repeat section
5. BookmarkImage: the icon shown when placing a bookmark on the track bar

To make the volume slider, you only need the parameters 1 to 3.

These are the new images used to make the two sliders:

Now it's time to open the "Skin.ini" file and add the following items:

[Track]
type=Slider

Define a slider

parent=BottomPanel

Inherits the parameters of the bottom panel

Transparent=1000
Thumb=Slider_Thumb.png

Components 1 to 3 as explained above

Slider1=Slider_Normal.png
Slider2=Slider_Played.png
width=-5

Right end of the track bar (negative: from the right)

left=5

Left end of the track bar

top=4

Upper end location

height=12

Lower end location

margin1=3

Left and right margins (look at the chapter 2 for

more information)
margin2=3
Command=SliderTrack

The playback navigation command

MarkBottom=1

Repeat icons placement (0: above, 1: below the

slider)
Mark1Image=Mark.png

Repeat section images

Mark2Image=Mark.png
Cursor=Point.cur

Icon used when placed the cursor over the track bar

BookmarkImage=BookmarkPoint.png

Bookmark image

We will use the same images to create the volume slider:

[VolumeSlider]
type=Slider
parent=BottomPanel
Transparent=1000
Thumb=Slider_Thumb.png
Slider1=Slider_Normal.png
Slider2=Slider_Played.png
width=-5
left=-65
top=26
height=12

margin1=3
margin2=3
Command=SliderVolume

Indicates that this slider is for volume control

Cursor=Point.cur

Finally, we are going to add a label, an item to show text and information. It's usually placed at
the top of the window and it shows the filename when a file is being played, or the title you
set in "Title" when playback is stopped.

[TitleLabel]
type=Label
parent=TopPanel

The title will be displayed on the top panel

Alignment=left
layout=center
left=7
top=3
width=-48
height=16
Command=LabelTitle

Sets the label to show the title

FontColor=$7b52ce

Font color, from $000000: black to $FFFFFF: white

FontName=Tahoma
FontSize=9
VisibleShadow=0

Font effects

VisibleOutline=0
Scroll=1
ScrollSpeed=50

Now you can test the finished skin.

Set it to 1 if you want large titles to scroll