getmusicbee.com
Support => Developers' Area => Skins => Topic started by: Rotem K. on January 09, 2011, 02:38:21 PM
-
Hey guys,
After doing a few skins myself, I've decided to write this guide, in hope that a few more folks that maybe don't have the 'technical' know-how but still feel they can contribute something to graphical work of MusicBee will want go ahead and to give it a try.
Before I begin the break down on skins XML structure, I have to say: if start mess around with skins and have a question or two, please ask me or other community members that have already posted skins and may have the experience to answer those questions before asking Steven. The last thing we all need is that this guide will result in Steven spending more time answering questions that a member could have solved.
So here we go.
"ON THE ORIGIN OF SKINS by means of XML"
PART ONE – THE BASICS
The first thing you're going to need is a skin.xml file. Preferably you'll choose skin that's as much similar in colors as the one you have in mind and want to do. So if you're making a dark skin then you want get a dark skin XML file. If you're making a bright skin, well, get a skin that’s bright. The reason for this is that this way you might have fewer things that need a change. Also, you'll have the original colors' numbers (this will be explained later) as reference.
You can find a skin.xml file either from Path\MusicBee\Skins or download a new one from the Customizations Forum.
Any text editor will do for opening the file. (I myself use Notepad).
You'll notice right away that the file is constructed from many lines of element tags. Each one of those fixes settings for a different interface part of the application.
Please note: In my skins I've added numbers in my skins as notes. Those aren't necessary but they will be helpful as reference throughout this guide. So every time you see <!-- number--> remember that this is just a note, and effects nothing,
Here's a random element line:
<!-- 65--> <element id="Panel.ScrollBarThumb.Default" bg="100,100,100" bg2="60,60,60" fg="110,110,110" bdr="50,50,50" />
The element ID refers to the interface part that is changed with this line.
After that you can see BG, BG2, FG and BDR color settings.
Color is set in the skins as RGB numbers. You get these from any photo editing software like Photoshop, Paint shop or Windows Paint.
(http://g.imagehost.org/0368/Color_numbers.jpg) (http://g.imagehost.org/view/0368/Color_numbers)
BG – Background color, usually sets the main color on the element.
BG2 – Not very common. Used for creating a gradient color filling.
FG – Foreground color, usually sets the text color on the element.
BDR – Border color.
Note that not all elements will have all 4 of these color settings about them,
Some have just BG, or just FG.
In summary
Skins consist from element tags.
Each element has 4 or less color settings that effects him.
Each color setting is worked with RGB numbers that you get from a photo editing software.
In the next part I'll break down the each element line and it's effect on the interface.
Go to PART TWO (http://getmusicbee.com/forum/index.php?topic=2497.msg12684#msg12684)
In the mean time feel free to ask any question.
-
Very useful thanks! just one thing that still confuses me, where is the splashscreen stored? The XML file only displays hundreds of characters with no indication of how to produce one. Thanks in advance
-
You'll need Base64: http://www.mediafire.com/?74uyu1g8agtawy4
It will encode the image file to a string, and copy it to your clipboard.
when it's done processing just paste it inside the Splash Screen element.
-
Is it me or some sections are bugged? For example, I can't change the highlight color of the address bar (Panel.HeaderControl.Highlight), setting (Panel.Header.Default) background to a light color makes the small buttons fade (fw/back/reload/newtab) and setting the foreground colour only applies to the reload button icon, and the rest stay that transparent white.
Also, settings like "Panel.TabSelector.X" for the right panel seem to do nothing for the tabs option.
-
Yeah, some elements aren't well organized or working the way you'd expect them to.
I don't know any way to color the address bar when highlighted, and frankly I think that right now there isn't one.
The buttons are transparent white, so changing the background will effect them too.
Panel.TabSelector.Default effect the "Playing Song / Selected Song", and the tabs in artist bio page (last.fm/wiki/ect).
If you wanted to color the "Detail/lyrics/artwork" tabs in the right panel, then you'll need elements:
<!-- 38--> <element id="Panel.ChildHeaderControl.Default" bg="80,80,80" fg="150,150,150" bdr="155,155,155" />
<!-- 39--> <element id="Panel.ChildHeaderControl.Highlight" bg="90,90,90" fg="200,200,200" bdr="115,115,115" />
I hope that solves that but if you're still having problems PM me.
-
Is it me or some sections are bugged? For example, I can't change the highlight color of the address bar (Panel.HeaderControl.Highlight), setting (Panel.Header.Default) background to a light color makes the small buttons fade (fw/back/reload/newtab) and setting the foreground colour only applies to the reload button icon, and the rest stay that transparent white.
most of the buttons on the header bar are bitmaps and only the reload button is dynamically generated. I can fully implement the fg property for the other buttons if you say you need it.
In general i am implementing the support for new/ extending existing elements on demand as it takes a substantial amount of time to do and i dont want to implement things that no-one uses.
I don't know any way to color the address bar when highlighted, and frankly I think that right now there isn't one.
do you mean when you edit the text in the address bar? If so there is an element but i need to look at the code
-
Well, I'm trying to create a skin that is a bad copy of the Windows Aero colors. Despite the fact that the menubar, dialog buttons and and some other chrome are awful. I'm progressing nicely though.
I can fully implement the fg property for the other buttons if you say you need it.
Well, It would be nice, since it would enable me to paint the backbround in a light color without the buttons dissapearing.
do you mean when you edit the text in the address bar? If so there is an element but i need to look at the code
The background of the addressbar, yes. It switches to a hardcoded 180RGB grey. Ideally it should remain the same when not editing it. There's already a cursor blinking (and possbly a selection highlitgh) to indicate it's selected.
Edit: Well, a vertical gradient for the non-skinned border menubar would be nice too.
-
It's worth to mention that it is forbidden by law to use in names or splash screens of the skins any symbols that are registered trademarks, as it mustn't be distributed without written permission of the owner.
Skinners can be inspired by a commercial product, but if the skin is to be distributed with MB installer it must avoid any controversial content.
-
It's worth to mention that it is forbidden by law to use in names or splash screens of the skins any symbols that are registered trademark, as it mustn't be distributed without written permission of the owner.
Skinners can be inspired by a commercial product, but if the skin is to be distributed with MB installer it must avoid any controversial content.
Well, that's common sense isn't it?
Not just in skins but in any graphical work.
-
It's worth to mention that it is forbidden by law to use in names or splash screens of the skins any symbols that are registered trademark, as it mustn't be distributed without written permission of the owner.
Skinners can be inspired by a commercial product, but if the skin is to be distributed with MB installer it must avoid any controversial content.
Well, that's common sense isn't it?
Not just in skins but in any graphical work.
Yea, I know but it looks we should keep reminding on that just in case :)
-
In case someone needed a Web Colour palette with names and RGB numbers assigned:
http://en.wikipedia.org/wiki/Web_colors
And another one:
http://www.decoglaze.co.uk/what-we-do/colour-palette/
To take full advantage of the colours picking I encourage you to try out a little freeware for personal use app called PicPick Image Editor.
This small in size but powerful and intuitive tool can be very useful not only for the screen creation. You can find out about the features and download it from the website: http://picpick.wiziple.net/
Online Colour Scheme Generator http://www.colorschemer.com/online.html
-
One more thing, before sharing a skin make sure it hasn't got wrong RGB numbers. All numbers from 0 to 255 are allowed, but when a number exceeds the range the error message is sent to the MB error log. You can find it under Help / Support / View error log.
If you choose a new skin in MB and start using the player, you could find some odd entries in the error log after some time of usage.
The errors might look like this:
2011-02-22 19:19:05 - Unable to load element: TitlebarInactiveForeColour - Warto?? „990” nie jest prawid?ow? warto?ci? dla elementu „red”. Warto?? „red” powinna by? wi?ksza ni? lub równa 0 i mniejsza ni? lub równa 255.
2011-02-22 19:19:05 - Unable to load element: Panel.ScrollBarThumb.Default - Warto?? „990”
2011-02-22 19:19:05 - Unable to load element: Player.StarRating.Lowlight - Warto?? „990”
2011-02-22 19:19:05 - Unable to load element: MiniPlayer.Background - Warto?? „990”
2011-02-22 19:19:05 - Unable to load element: Controls.InputControl.Disabled - Warto?? „990”
2011-02-22 19:19:05 - Unable to load element: Controls.Button.Disabled - Warto?? „990”
2011-02-22 19:19:14 - Unable to load element: TitlebarInactiveForeColour - Warto?? „9150”
2011-02-22 19:19:14 - Unable to load element: Panel.ScrollBarThumb.Default - Warto?? „9150”
2011-02-22 19:19:14 - Unable to load element: Player.StarRating.Lowlight - Warto?? „9150”
2011-02-22 19:19:14 - Unable to load element: MiniPlayer.Background - Warto?? „9150”
2011-02-22 19:19:14 - Unable to load element: Controls.InputControl.Disabled - Warto?? „9150”
2011-02-22 19:19:14 - Unable to load element: Controls.Button.Disabled - Warto?? „9150”
2011-02-22 19:19:23 - Unable to load element: TitlebarInactiveForeColour - Warto?? „993”
2011-02-22 19:19:23 - Unable to load element: Panel.ScrollBarThumb.Default - Warto?? „993”
In fact, the bugs are quite easy to fix: all you need is to search the skin files for numbers: 990, 993 and 9150 and replace it with the proper numbers from 0 to 255.
-
How do you edit XMLC files?
-
I haven't had a go yet with bitmap skins, but if I would have to guess I would say you don't [edit XMLC files].
They are complied by the skin creator tool, so you'll need the original images in order to make a change.
But like I said this is just a guess, You should PM Blinghound, I'm sure he'll know.