How To Make Your Own Windows Media Player Theme

It’s a bit of a complicated process, but it’s very similar to designing a web page using raw html and javascript code. So let’s get started. WMP uses a conjunction of many image files and one code file, with the file extension ”.wms” (windows media skin). The code file is basically a bracket system, very similar to html, to define areas of every skin. You will be using the windows notepad to construct most of the skin, and saving the file with a .wms extension. The first few sets of brackets have to be in every skin in order for them to even work, so I’ll put the code up here for you. Anything in bold can be changed to whatever you want (for now, once you get a more advanced understanding of how WMP skins work, then everything is fair game. For now though, follow what I say and everything will work.)

<THEME title=”Skin Title” author=”Me” copyright=”©whatever” id=”skin” > <VIEW id=”main” titleBar=”false” resizable=”false” backgroundImage=”background.bmp” clippingcolor=”#00FF00” > </VIEW> </THEME>

That will give you the most basic of skins. No buttons, no elements (what things such as the playlist and video are referred to as), no nothing. Just a background image ( background.bmp : and I recommend using bmp for your background images, because unlike jpg or other image types, bmp defines exact colors for every pixel, which is needed when you do skins without square edges). Speaking of transparency, if you want to have an edge on the skin that has any king of curve, you need to have a background color of green. Pure hex #00FF00 Green. It’s important also that you learn hex colors when working with WMP skins, you can familiarize yourself with them in photoshop’s color chooser if you don’t already have them.

To get something a little more complex, say buttons (play, stop, etc), you need to make another set of images and bracket set. This one called a button group. Again, I’ll give you the base code. And everything you’ll be adding to the skin, will always go inside the view bracket, in between <VIEW> and </VIEW>.

<buttongroup mappingimage=”map.bmp” hoverimage=”hover.bmp” > <PLAYELEMENT mappingColor=”#00FF130” /> <STOPELEMENT mappingColor=”#FF0110” /> <NEXTELEMENT mappingColor=”#00FFFF” /> <PREVELEMENT mappingColor=”#FF00FF” /> <PAUSEELEMENT mappingcolor=”#FFFF00” /> </buttongroup>

Now, we’ll assume at this point that you’ve designed your background image to include what the buttons look like when the cursor isn’t over them in the arrangement and placement you want them. Take that image and edit the buttons to appear how you want them to appear when you move the mouse cursor over them. Save that image as “hover.bmp” Then, it’s time to map the images, and this is the fun part that drives a lot of people away from WMP. Take the background image and color over all of the buttons with a pure solid color that they are shown as by their respective “mappingcolor”s (green for the play button, red for stop, yellow for pause, cyan for next, and magenta for previous. All those are their pure hex color versions as shown in the code above.). ONLY COVER THE AREA WHERE THE BUTTON IS WITH EACH COLOR! then save that image as map.bmp, this image combined with the mappingcolor codes tell WMP exactly where each button is.

That’s really all you need to make your basic skin. Just those main brackets and the buttonelements, which you can also add additional button elements to any skin such as the following. The uptooltip=”” is the tip that’s displayed when you mouse over the particular button, and the cursor=”hand” is just there to change the cursor from the pointer to the hand.

<buttonelement mappingColor=”#000000” uptooltip=”Close” onclick=”view.close();” cursor=”hand” /> <buttonelement mappingColor=”#FFFFFF” uptooltip=”Minimize” onclick=”view.minimize();” cursor=”hand” /> <buttonelement mappingColor=”#0000FF” uptooltip=”Return to Full” onclick=”view.returnToMediaCenter();” cursor=”hand” />

Now all you have to do is close your tage. After all this code, at the end of the file, put in </view></theme> to finish the skin.

Once all of this is done, and you’re ready to test the skin, simply make sure that all of your files (.bmp images and .wms file) are in the same directory, and double click the .wms file. You should see your skin open up in windows media player. Now, wms files are temporary, to make a skin that you can share, upload, and choose from in the skin selector, you have to compile it. Don’t worry, it’s extremely simple. Take the files in the directory that relate to the skin, and put them all into one compressed .zip file (it must be a zip file, not rar, not bin, zip.), then manually rename the file extension from .zip to .wmz (windows media zip). Double click the file, and it will save in windows media player and you can choose from it in the skin selector now, and give it to everyone you want to with just one file.

This is also a huge thing I recommend you do. Because the filename HAS to be manually changed, you can take anyone else’s skin that they’ve made, rename it from a .wmz extension back to a .zip extension, unzip the file to a directory, and look at how they built their skin. It’s the best way to learn how other elements are made and how certain things are done in the code. Definitely try that with at least one skin after making your first skin successfully. And here’s a skin I’ll recommend you try this with, just for starters. One of MY first skins, and thus an excellent learning skin. Black N’ White

Like the classiest “Winamp” skinned .bmp’s images, WMP skins could support a varied platforms by Microsoft’s partners – such as for example “Mainsoft” with lotus notes sharepoint sync function (an option which isn’t commonly known), this option should be checked before getting to the final steps of the wmz file.

This was a very basic tutorial showing how to make the absolute SIMPLEST of skins. I suggest playing around with it and mastering everything here before moving on. However, when you are ready to move on, you may contact me to learn everything else (and trust me, this is only about 1% of what windows media player skins can do). My Website (I’ll be putting up a better WMP page in my next redesign), and I suggest directly contacting me about learning more. I’m always willing to go out of my way to help anyone who wants to make WMP skins, I helped Arnitald when he was starting, and look what he did …

You can directly contact me via email. “Reeses2150 at MSN.com” Just put “WMP HELP” in the subject line somewhere, and make sure to explain the problem your having in some detail. That way I don’t have to guess whether your version of WMP is corrupt or whether you just don’t know how to use mspaint.