You are on page 1of 16

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 minwidth=50 BackBitmap=bg.png BackStretch=0 BackColor=$000000 Copyright=opus This is the info section and it has some properties, defined below Minimum width that sets the skin size Background image. bg.png is placed in "My skin" folder Do not stretch the background image when resizing the main window The background color of the skin (black in this case)

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 title=KMPLAYER BackStretch=0 BackColor=$FFFFFF BackBitmap=BG.png Defines the window size Window title (not used for now) Do not resize the logo image when resizing the main window White background color This is the logo image

[TopPanel] type=panel align=Top height=24 image=Pannel_Top.png margin1=10 margin2=10 Fix 10 pixels at the left of the image (the rest are repeated) Fix 10 pixels at the right of the image Panel element that has some properties, defined below Define the top panel Specify the vertical size of the Pannel_Top.png 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 left=-26 top=5 width=22 height=15 parent=TopPanel Transparent=1000 image=Exit.png Command=ExitCmd DownOffsetX=0 DownOffsetY=0 UseInactiveMode=1 1: use the unfocused image (second image), 0: do not use it Command executed when you press the button (Exit in this case) Inherits the properties of the top panel defined in Skin.ini Each button has a 22 x 15 size Defines a button Negative value: 26 pixels from the right side of the window

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:


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



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 parent=BottomPanel Transparent=1000 Thumb=Slider_Thumb.png Slider1=Slider_Normal.png Slider2=Slider_Played.png width=-5 left=5 top=4 height=12 margin1=3 more information) margin2=3 Command=SliderTrack MarkBottom=1 slider) Mark1Image=Mark.png Mark2Image=Mark.png Cursor=Point.cur BookmarkImage=BookmarkPoint.png Icon used when placed the cursor over the track bar Bookmark image Repeat section images The playback navigation command Repeat icons placement (0: above, 1: below the Right end of the track bar (negative: from the right) Left end of the track bar Upper end location Lower end location Left and right margins (look at the chapter 2 for Components 1 to 3 as explained above Define a slider Inherits the parameters of the bottom panel

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 Cursor=Point.cur Indicates that this slider is for volume control

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 Alignment=left layout=center left=7 top=3 width=-48 height=16 Command=LabelTitle FontColor=$7b52ce FontName=Tahoma FontSize=9 VisibleShadow=0 VisibleOutline=0 Scroll=1 ScrollSpeed=50 Set it to 1 if you want large titles to scroll Font effects Sets the label to show the title Font color, from $000000: black to $FFFFFF: white The title will be displayed on the top panel

Now you can test the finished skin.