Making a Skin for WMP

Are you new to making skins for WMP? Here's a tutorial to get you started!

Making Images:

These can be formatted as JPG, JPEG, PNG (WMP 12 only), and GIF file types. The images consist of primarily of Main and Map. You can also add Disabled, Hover, Up, and Down images.

Main File

Map File

As well as Seek Thumb, Volume Thumb, and EQ images.

The Thumb Files

Lastly, you can also make Button images.

When you are done making them, write the following code:

<VIEW

clippingColor = "#800080"

transparencyColor="#800080"

backgroundImage = "main.gif"

titleBar = "false">

<BUTTONGROUP

mappingImage = "map.gif">

<BUTTONELEMENT

mappingColor = "#00FF00"

upToolTip = "Play"

onClick="jscript:player.controls.play();" />

<BUTTONELEMENT

mappingColor = "#00FFFF"

upToolTip = "Pause"

onClick="jscript:player.controls.pause();" />

<BUTTONELEMENT

mappingColor = "#FF0000"

upToolTip = "Stop"

onClick="jscript:player.controls.stop();" />

<BUTTONELEMENT

mappingColor = "#FFFF00"

upToolTip = "Next"

onClick="jscript:player.controls.next();" />

<BUTTONELEMENT

mappingColor = "#0000FF"

upToolTip = "Previous"

onClick="jscript:player.controls.previous();" />

<BUTTONELEMENT

mappingColor = "#800000"

upToolTip = "Minimize"

onClick="jscript:view.minimize();" />

<BUTTONELEMENT

mappingColor = "#008000"

upToolTip = "Return to Full Mode"

onClick="jscript:view.returnToMediaCenter();" />

<BUTTONELEMENT

mappingColor = "#000080"

upToolTip = "Close"

onClick = "JScript: view.close(); " />

<BUTTONELEMENT

mappingColor = "#FF00FF"

upToolTip = "Next Visualization"

onClick = "JScript:myeffects.next(); "/>

</BUTTONGROUP>

<seekSlider zIndex="1"

left="222" top="106" height="16" width="180"

direction="Horizontal"

thumbImage="thumb.gif"

>

</seekSlider>

<slider id="volume" zIndex="2"

left="222" top="68" height="16" width="180"

direction="Horizontal"

min="0" max="100" toolTip="Volume"

thumbImage="thumb.gif"

value="wmpprop:player.settings.volume"

value_onchange="player.settings.volume=value;"

>

</slider>

<text left="211" top="158" width="64"

foregroundColor="#000000"

fontSize="8" fontStyle="bold"

justification="left"

value="wmpprop:player.controls.currentPositionString"

/>

<text top="132" left="211" width="380"

left="jscript:metadata.left+metadata.width+2;"

foregroundColor="#000000"

fontSize="8" fontStyle="bold"

wordWrap="0"

scrolling ="true"

scrollingDelay="0"

scrollingAmount="2"

value="wmpprop:player.currentmedia.name"

>

</text>

<PLAYLIST

top = "190"

left = "2"

width = "196"

height = "99"/>

<VIDEO

top = "185"

left = "210"

width = "207"

height = "99"

maintainAspectRatio="false"

stretchToFit="true"

shrinkToFit="true"/>

<EFFECTS

id = "myeffects"

top = "185"

left = "210"

width = "207"

height = "99"

currentEffectType="bars"

currentPreset="0"

onClick="previous();"/>

<BUTTON

left="4"

top="70"

upToolTip="Audio controls"

image="EQ_Up.gif"

hoverImage="EQ_Hover.gif"

downImage="EQ_Down.gif"

transparencyColor="#00FF00"

onClick="sEq.visible=!sEq.visible"

>

</BUTTON>

<!-- Audio controls subview: A common way to present

the graphic equalizer controls. This audio controls

subview includes the graphic equalizer sliders and

the balance slider -->

<SUBVIEW

id="sEq"

left="4"

top="86"

width="194"

height="65"

backgroundColor="none"

>

</EQUALIZERSETTINGS>

<SLIDER

id="eq1"

left="0"

top="0"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel1"

value_onchange="eq.gainLevel1=value;"

>

</SLIDER>

<SLIDER

id="eq2"

left="jscript:eq1.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel2"

value_onchange="eq.gainLevel2=value;"

>

</SLIDER>

<SLIDER

id="eq3"

left="jscript:eq2.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel3"

value_onchange="eq.gainLevel3=value;"

>

</SLIDER>

<SLIDER

id="eq4"

left="jscript:eq3.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel4"

value_onchange="eq.gainLevel4=value;"

>

</SLIDER>

<SLIDER

id="eq5"

left="jscript:eq4.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel5"

value_onchange="eq.gainLevel5=value;"

>

</SLIDER>

<SLIDER

id="eq6"

left="jscript:eq5.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel6"

value_onchange="eq.gainLevel6=value;"

>

</SLIDER>

<SLIDER

id="eq7"

left="jscript:eq6.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel7"

value_onchange="eq.gainLevel7=value;"

>

</SLIDER>

<SLIDER

id="eq8"

left="jscript:eq7.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel8"

value_onchange="eq.gainLevel8=value;"

>

</SLIDER>

<SLIDER

id="eq9"

left="jscript:eq8.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel9"

value_onchange="eq.gainLevel9=value;"

>

</SLIDER>

<SLIDER

left="jscript:eq9.left+20"

top="jscript:eq1.top"

toolTip="Graphic equalizer"

direction="vertical"

backgroundImage="EQ_Slider.gif"

thumbImage="EQ_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

min="-14" max="14"

value="wmpprop:eq.gainLevel10"

value_onchange="eq.gainLevel10=value;"

>

</SLIDER>

<BALANCESLIDER

left="60"

top="48"

backgroundImage="Bal_Slider.gif"

thumbImage="Bal_Thumb.gif"

transparencyColor="#00FF00"

borderSize="8"

>

</BALANCESLIDER>

</SUBVIEW>

</VIEW>

</THEME>

Save this code as a WMS file, then create a new ZIP file and place the contents into it. Finally, change the ZIP file into a WMZ file and voila! You've just finished making your new skin!

Here is the completed product.

Our Discord Server...

A special message for those who enjoy WMP Goodies!

If you want to talk about this website, Windows Media Player (Legacy), or other media players (such as Winamp, Spotify, etc), we have a Discord server for it! You can join the server by clicking HERE. Please read the rules before talking in the server!