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.