Show Posts
16
Skins / Skinning Guide - Part 1 - The Basics
« 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.
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
In the mean time feel free to ask any question.
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.
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
In the mean time feel free to ask any question.
