Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

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.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

March 8, 2009 Ritesh Sanap Solutions, Windows Cool things, Software, Tutorials

Comments

  1. Minnie says

    July 19, 2011 at 8:35 am

    A wonderful job. Super helpful infrtomaion.

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Peek-A-Boo Widget for Blogger
Next Next post: How to change Blogger Template without deleting widgets ?

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • h4x0r ( Hacker ) - Blogger Template
  • Windows Vista CD key
  • Add/Remove page/Post View Counter Widget For Blogger
  • Free Online Angry Birds game
  • How to Make Your Own Avatar
  • How to Download Documentation for offline viewing - Dash
  • How To Change Windows XP Shutdown Dialog Box

Get Latest post in your Inbox

Random Posts

Facebox – Facebook Styled Lightbox

April 20, 2010 By Ritesh Sanap 2 Comments

How to download Subtitles from YouTube Videos

November 4, 2014 By Ritesh Sanap 1 Comment

Make Free Calls All Over The World

March 1, 2009 By Ritesh Sanap 5 Comments

Get all ElegantThemes themes for Free

June 14, 2011 By Ritesh Sanap 2 Comments

How to backup and restore my Internet Favorites / Bookmarks.

April 30, 2009 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean