Creating a new skin

[Clarence]

Forgive me if I am being extremely obtuse, but I have a question...

I understand that the latest skins are created in .xml files and I have looked through a number of these and think I have the basic grasp of how they work with the various elements etc..

However, I cannot for the life of me see how you compile these files into the finalised .xmlc file. Researching on the internet indicates that these are ASP.net files but that doesn't help much as the tutorials on Microsoft's site seems only to relate to producing html/C# based projects.  Reference is made to Enhydra.org producing some sort of compiler but that site seems to have died a death some time ago.

Is there a specific compiler/software package which is used by the skinners who have produced some amazing examples here on Musicbee?

Many thanks.

[phred]

Skins can be in .xml format or .xmlc format. You can create and edit a .xml skin. .xmlc skins are bit-mapped and (I believe) need to be compiled. And they can't be edited in their compiled format.

The way to start working with skins is to find one you like and modify it. There are some good threads in this section that deal with creating skins. And hiccup has a great skin called 'Sample Skin' that helps you identify the elements. He also created a compare tool.

I've only 'created' two skins, mostly as a way to learn about them. The two that I 'created' were existing skins that I liked and then modified to my personal taste.

There are others here much more advanced than I, so don't hesitate to ask questions when you get stuck.

[hiccup]

Don't feel obtuse. Grasping the basic concept of something new is usually the biggest and most frustrating hurdle to take.

The basic differences between xml skins and compiled xmlc skins are these:

An xml skin is just a single file that you can edit, save and place in MB's skins folder so it can be used as a skin.
This xml file allows you to change pretty much all colours of a skin. It also allows to change several icons and graphic elements in a skin.

One area where it has very limited capabilities is the main player controls bar.
While it can change the colurs of the elements there, an xml skin has very little options to change anything about the layout.
E.g. the location and visual appearance of buttons and controls will be defined by MusicBee's basic design.

That's where xmlc or so called 'compiled' skins come in.

They will allow to use image files for most of the design elements in the main player controls panel, as well as to position the elements inside it to your specific liking.

For creating it you only need several files and a set folder structure.
That would look like this:



- The 'Images' folder will contain the images for the image elements that you want to use in the player bar.
- The skin file that will used as a basis for the xmlc skin is identical to a normal xml skin. (it's called 'My New Skin' in the screenshot)
- skin.xml will contain information about the layout and positioning of the elements in the main player bar.
- skin_wavebar.xml will contain information about layout and positioning of the elements in the player bar used when the user selects to display the wavebar in the main player panel.
- SkinCreator.exe is the tool that will allow you to create the xmlc file. It will use the information it find in the xml files and the Images folder.
- The svg dll's are there if you want to choose vector images instead of plain png images for the elements in the player controls bar.

You should be able to find these files by doing a forum search or in the 'source files' some skinners have made available for download.
Further more detailed instructions and tutorials can be found in the skinning guides on this board.

[Clarence]

Thank you phred & hiccup for your responses and for pointing me in the right direction. Your posts were great and the detailed explanation and screenshot helped with clarification.
 
I've now downloaded the SkinCreator package and can now have a dabble at tweaking come skins to my own taste and, hopefully, coming up with something new in the longer term.

Once again many thanks for your help and encouragement.

[Clarence]

Based on what you guys told me previously, I have taken a skin that had a general base that fitted with my own idea and have managed to change various aspects such as skin colours, modify a couple of panel icons, etc, and the resultant skin is as below:

I played around with the .xml format first to get a feel for things and then went on to the .xmlc format, having changed the player player icons and the corresponding skin.xml and skin_wavebar.xml files then compiled everything using SkinCreator.exe as outlined in hiccup's previous reply.

However, I have a couple of issues (at least)  that I can't seem to find a solution to despite trawling the forum and would appreciate a nudge in the right direction.

First, despite changing all the images for the player controls which show correctly in the main player (whether in top or bottom panels), when I switch to side player, mini player or compact player, the control images are from the original skin. The code does not appear to make provision for an alternative or second set and my assumption was that they would be automatically resized for the appropriate player, based on the images in the ..\Image folder but it would appear not.

Secondly, in the .xml format I had the AzBar foreground set to pale grey (230,230,230) and it showed up correctly in both horizontal and vertical layout. When the same code is compiled into .xmlc it displays as black.

Any suggestions would be greatly appreciated.

[hiccup]

First ---- when I switch to side player, mini player or compact player, the control images are from the original skin.

Secondly ---- in the .xml format I had the AzBar foreground set to pale grey (230,230,230) ---- When the same code is compiled into .xmlc it displays as black.

1. The player control images indeed only apply to the main player bar, not to any other locations that contain player control buttons.

2. I never experienced such, nor remember others reporting something similar.
First thing to check if there perhaps is some minor syntax error in the xml skin that maybe only roars it's ugly head after compiling it?
Duplicate entries for elements perhaps, or a comma instead of a dot somewhere, maybe four digits for an rgb value instead of three? Absence of a quotation mark somewhere, it could be anything...

You could try using the original xml you used as a basis and compile that to see if the error (if there is one) is in the original xml, or if it was originated while you edited it to your liking.


edit
A random thought coming up considering it happens to the a-z bar; In the past there was some "A-Z" icon, but I believe that does not applies anymore.
Maybe look for that and experiment with it to see if it is perhaps playing a role here?

[Clarence]

Thanks hiccup for your above response.

In relation to the AzBar problem, I've already checked for syntax errors/typos but I'll do it again and then try your suggestion of compiling the original skin to see if the problem is common to both or a monster of my own creation.

1. The player control images indeed only apply to the main player bar, not to any other locations that contain player control buttons.

I understand the part about only relating to the player bar but, just for clarification, I think l what you're saying is that the other players take their controls from the MusicBee default player. Yet in this skin they aren't displaying as the generic default but using the style of the skin I have adapted. Can you suggest any reason for this? (I've already checked and there is no base64 image included in the xml file which it could be drawing upon.)

Sorry to be a nuisance but I'm getting this so close to what I wanted when I started out, it seems a pity to abandon it for this.

[hiccup]

Yet in this skin they aren't displaying as the generic default but using the style of the skin I have adapted. Can you suggest any reason for this? (I've already checked and there is no base64 image included in the xml file which it could be drawing upon.)

Sorry to be a nuisance but I'm getting this so close to what I wanted when I started out, it seems a pity to abandon it for this.

That's interesting. (Do know that I am not a developer but just another user, so my knowledge on the matter is certainly not complete or always correct)

So you are not talking about the colouring, but about the shape of the buttons?
Can you specify where in the player this occurs? Perhaps with some screenshots?

Or perhaps you are talking about having circles around the player/pause/ff etc. icons?
If so, there are ways to have them displayed or not, and you can change their colouring (and I believe also their transparency).
I never use that myself in my skins, so I can't give you specifics right now, but you should be able to find details on that by doing some searching.


edit:
I believe 'metrobutton' is the term for this feature.

[Clarence]

That's interesting. (Do know that I am not a developer but just another user, so my knowledge on the matter is certainly not complete or always correct)

I wasn't really sure but you seem to have a lot of experience and have published many skins. Anyway, you had the decency to reply and offer help and that counts double in my book.

So you are not talking about the colouring, but about the shape of the buttons?
Can you specify where in the player this occurs? Perhaps with some screenshots?

Not the colouring.  It wasn't the use of Metro Style buttons either.

I thought it was a uniquely designed graphic being used in the skin i.e. Photoshop'd which is what I have done for this main player, however it turns out that it was actually the standard default player buttons but shown only in outline form rather than filled which give it more of a 'Windows' look.  After another couple of hours re-searching the coding I realised that I had set: <element id="SlimIcons">true</element>. Whilst it has no effect on the main player because I used my own .png file for the buttons, it does of course have the outline effect on the side player, etc. A lot of time wasted for a silly slip up but at least it's resolved now and I can notch that one up to experience.

I've also sorted the AzBar problem which, as you correctly suggested, was a simple case of finger dyslexia. I must have looked at that section of code a hundred times and didn't see that I meant to type a suffix on the variable of TXT and had actually typed TEXT. Which is, of course why they call me Clarence the Cross-eyed Lion.

Hopefully now I can move on a get the player graphics tidied up and tweak a few things to finalise this version then port it to a light version as well.


Once again thanks for your advice and help, it's much appreciated.