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 Set it to 1 if you want large titles to scroll
ScrollSpeed=50

Now you can test the finished skin.