getmusicbee.com
Support => Developers' Area => Skins => Topic started by: Rotem K. on January 24, 2011, 03:47:43 PM
-
Hey guys,
Sorry for the delay, I was busy with the new site and forum lately and didn't got to update the skinning guide.
But as I see it does help people developing more skins for the community I feel I should continue.
Before I begin this part I remind you that if you have any questions about skinning, please address those to me or any member who had already posted skins and may have the experience those answer those questions. if a member can't solve whatever trouble you are having then ask Steven.
PART TWO – THE ELEMENTS - IMAGE ELEMENTS
I've decided starting with the image elements because they are the ones most easily missed when doing a skin and I get asked about those the most.
Image elements differ from the Color Elements, which are fixed with RGB numbers, in that that here you'll need to place an image code within the element.
To generate that code you'll need to open your image file with Base64. you can get it from here: http://www.mediafire.com/?kwxek8bzx8z1s2j.
It will encode the image file to a string, and copy it to your clipboard. then just paste it inside the image element.
IMAGE ELEMENTS:
1. Splash Screen:
<element id="SplashScreen"> CODE </element>
- any image will do here. When we're done with the new site, I think I'll post a RAR with the logo and text used there, so anyone who wants to use that will be able to.
- has 3 pixels on each corner that offer transparency. so I you want a round corners on your splash screen, pixels [0,0 | 0,1 | 1,0] - for top left corner and respectively in the rest of the corners needs to be transparent and saved in PNG format.
2. Border Elements [ FormBorderTop , FormBorderTopRight , FormBorderTopLeft , FormBorderRight , FormBorderLeft ,
FormBorderBottomRight , FormBorderBottomLeft , FormBorderBottom ]
Sizes for those are:
FormBorderTop --------------------------------------------- 28x1 [pixels].
FormBorderTopRight , FormBorderTopLeft ------------ 28x5.
FormBorderRight , FormBorderLeft --------------------- 1x4.
FormBorderBottomRight , FormBorderBottomLeft ---- 4x4.
FormBorderBottom ---------------------------------------- 4x1.
I usually take a screenshot of musicBee with the skin in development that has the interface colors right but borders that needs addressing,
paste it in an image editing software. work it to my liking and then slice it according to the sizes.
if you want rounded Bottom borders, make sure settings element UseRoundWindowBorders is enabled: <element id="UseRoundedWindowBorders">true</element>
images can be downloaded from : http://www.mediafire.com/?b6kr7ra1kvda6eo
3. Window Buttons Elements [ FormMaximiseButton , FormMinimiseButton , FormRestoreButton , FormHelpButton , FormCloseButton ]
images can be downloaded from : http://www.mediafire.com/?m3dy8z9mbml4ke5
I usually paste those files on to a screenshot of the skin in development with the border colors right, then work that button layer and slice.
ADDED AFTER v1.2.4054:
Highlight Window Buttons[ FormMaximiseHighlightButton, FormMinimiseHighlightButton, FormRestoreHighlightButton, FormHelpHighlightButton, FormCloseHighlightButton ]
Note that you must use all of those Highlight elements or none.
4. Last.fm Love icons in main player:
image can be downloaded from : http://www.mediafire.com/?awvab6bwu3i6a9e
<element id="PlayerLastFmNotLove">CODE</element>
This element fixes the image that will be displayed in the main player when the song is not loved.
<element id="PlayerLastFmLoveBright">CODE</element>
This element fixes the image that will be displayed in the main player when the love icon is highlighted [mouse over].
<element id="PlayerLastFmLove">CODE</element>
This element fixes the image that will be displayed in the main player when the song is already loved.
5. Last.fm Love icons in mini player:
image can be downloaded from : http://www.mediafire.com/?awvab6bwu3i6a9e
<element id="MiniPlayerLastFmNotLove">
This element fixes the image that will be displayed in the mini player when the song is not loved.
<element id="MiniPlayerLastFmLoveBright">
This element fixes the image that will be displayed in the mini player when the love icon is highlighted [mouse over].
<element id="MiniPlayerLastFmLove">
This element fixes the image that will be displayed in the mini player when the song is already loved.
6. Check Boxes
images can be downloaded from : http://www.mediafire.com/?53qsj90sf9l95b3
<element id="CheckTick">CODE</element>
Checked tick in a checkbox.
<element id="CheckTickDisabled">CODE</element>
Checked disable tick in a disabled checkbox.
<element id="CheckUnknown">CODE</element>
Never seen this one myself in musicBee but I guess it will appear when some options are ticked and some aren't.
7. Wait Indicator
ELEMENT IS IGNORED AS FOR NOW.
<element id="WaitIndicator">CODE</element>
This one you can get from http://www.ajaxload.info/#preview. Select INDICATOR from the drop-list, color and background color,
then import to Base64 and paste into your skin.
appears in the status bar whenever a background prosses is running (ripping, looking up tagges and album arts).
(http://i.imgur.com/74CIr.jpg)
note that this icon also appears on the right side panel whenever right clicking an album art and then chossing "Search Internet" unless you'll use the next element:
<element id="WaitIndicatorArtwork">
appears on the right side panel whenever right clicking an album art and then chossing "Search Internet".
8. Inprogress Indicator
<element id="InProgressIndicator">CODE</element>
This one you can get from http://www.ajaxload.info/#preview. Select ARROWS from the drop-list, color and background color, then import to Base64 and paste into
your skin.
appears in the left side panel when ever downloading files from the browser, near downloads.
(http://i.imgur.com/ZB9Rq.jpg)
9. <element id="Delete">CODE</elements>
image can be downloaded from : http://www.mediafire.com/?lgnu4xes0ggw459
this one appears when wait indicator does in the status bar, an? isn't so much delete as cancel.
(http://i.imgur.com/s0iYZ.jpg)
10. Music Library icon in the library tab
image can be downloaded from : http://www.mediafire.com/?iwuceh4pp27t9jx
<element id="MusicLibraryInTab">CODE</element>
(http://i.imgur.com/ChpDQ.jpg)
11. Missing Album Art Image
<element id="NoArtwork">CODE</element>
Will apear when ever a song is missing it's album art.
12. MiniPlayerNowPlaying and MiniPlayerNowPlayingBright
<element id="MiniPlayerNowPlaying">
<element id="MiniPlayerNowPlayingBright">
these two effect the "Show now playing list toggle", Bright effects the highlight color(mouse over).
(http://i.imgur.com/OxxSJ.jpg)
13. <element id="AzJump">CODE</element>
effects the little AZ icon in the main panel field columes.
(http://i.imgur.com/z9AcQ.jpg)
That's it so far, if more image elements will be added I'll update this thread.
Next up: Setting Elements and Color Elements
Go to PART THREE (http://getmusicbee.com/forum/index.php?topic=2917.0)
In the mean time feel free to ask any question.
Rotem
-
This is brilliant Rotem, it answers all of the questions I had (about images/string etc) when I started to skin :D Thank you
-
One thing that may puzzle people. The Wait Indicator and In Progress images (downloaded from the site) are GIF files, which Base64 does not open. I find that simply renaming the extension to .png in windows explorer works, but you may have a better idea :)
-
Thanls for bringing that up, yeah changing the ext. works just fine
-
Thank you - that makes some things more clear to me. Nice that you implemented the screenshots.
-
Rotem, could you update the guide to cover the new skin elements that have been introduced with the latest beta ???
Skimming recent posts on the forum I found a few questions about dependent skins (http://getmusicbee.com/forum/index.php?topic=2797.0). There are a lot of useful informations about the feature but it seems new skinners are having some problems to find it easily as the issue is divided into too many topics. Apart from the one linked above it's worth to look at this bug report (http://getmusicbee.com/forum/index.php?topic=2914.0) and your Pop Blue skin (http://getmusicbee.com/forum/index.php?topic=2227.0) as it could be very useful example.
How to use a dependent skin with different root skins
VX: Greb, just tried to use Your colour choices form dependent skins with other skins (Asylum White, Honeycomb, Midnight, MusicBee Default, Smooth Grey, Spotify B...) and it looks awesome
The only drawback with changing the root name in a dependent skin to make it work with another one is that I have to write the name in the line <root dependsOn="NEW NAME"> manually. Not a big deal even for a lazy guy, but I hope it could be automated somehow. What do you think
Greb: A very easy way: I renamed the NEW NAME as Basic. So it's only needed to name the folder as the original skin and to place the skin inside with the name 'Basic.xml'. It works automatically.
That would be the case with Spotify Black, for example: http://www.mediafire.com/?99nn26v2r294he8
But you can use the skin you want as long as the folder has the name of the skin and the skin is named as 'Basic'
VX: I downloaded the Spotify Black folder and renamed it to Asylum White, then copied the original Asylum White skin to it and renamed it as Basic. Works like a charm. Thank you very much for the tip
I wish every time a dependent skin is selected, the pop up menu appears: 'Choose the root skin to apply the changes'
You won't need to duplicate dependent skins in separate folders this way.
I like the concept of dependent skin and find it to be great advantage for the skinners as it allows to maintain the skins up to date with almost no effort :D Furthermore, it's much easier to start skinning with a dependent skin - you can introduce the colour changes for a few chosen elements only :)
Rotem, your skins seem to be the most popular choices for root skins. Congratulations :) Could you update the skinning guide to take the full advantage of this great feature ??? You can use the comments below the guides to enhance them if you think it could be useful somehow.
Thank you very much :)
-
I would but non of the new elements are Image Elements.
They belong to the next part which I haven't got around to yet, color elements.
About dependents skins, I'll mention it somewhere.
-
could the play/next/backstop images be changed too?
-
Not as of now.
-
oke, i will just prepare them then :) you maybe know a good size (pixels width height?)
-
Can't say I do.
you should PM Steven about the new elements needed.
That way, if the request is feasible, it will be just what you need.
-
I have a few questions.
1. Every time that I attempt to make and image for the "close", "maximize", etc. buttons, they appear to be extremely stretched out or something. I can't seem to figure out what I'm doing wrong. What is the preferred method and settings for making these images? (PPI, resolution, etc. )
2. It seems like the Last.fm images are no longer being hosted where you linked to them. Is there another place where I can get these images?
3. Does anyone know where exactly in an xml file I can find the "Albums Grouped by" text color?
-
Hi dannyboiii,
1. if you're using photoshop, try opening each image in paint.net (http://paint.net/), copy it to a new canvas. and save it.
2. The last.fm love icon (http://www.mediafire.com/?44fh4v4jwv7zcgf).
3. It derives from the fg color on element "Panel.SectionHeader.Default".
Good Luck with your new skin, looks great
-
I think the dimensions are a little off. Here's what I used:
FormBorderTop --------------------------------------------- 28x1 [pixels].
FormBorderTopRight , FormBorderTopLeft ------------ 28x5.
FormBorderRight , FormBorderLeft --------------------- 4x1. <Switched
FormBorderBottomRight , FormBorderBottomLeft ---- 4x4.
FormBorderBottom ---------------------------------------- 1x4. <Switched
After spending about 2 hours I finally got my left right and bottom borders working!
-
mediafire links are down..
-
You can get the images from any skin. Just copy the code and paste it into a Base64 Decoder (http://www.peterdamen.com/base64decode.php). Change the extension after downloading the .bin file.
-
The border image sizes should be as follows.
FormBorderTop ------------------------------------------------- 1x28 [pixels]
FormBorderTopRight , FormBorderTopLeft ------------------ 5x28
FormBorderRight , FormBorderLeft -------------------------- 4x1
FormBorderBottomRight , FormBorderBottomLeft ---------- 4x4
FormBorderBottom -------------------------------------------- 1x4
-
All of the mediafire links are dead.
Edit: To make my post less stupid, here's a link to a bunch of last.fm icons Steven posted somewhere.
http://www.mediafire.com/?2n78d10tbnaszy5
-
All of the mediafire links are dead.
as Thorbjorn said
You can get the images from any skin. Just copy the code and paste it into a Base64 Decoder (http://www.peterdamen.com/base64decode.php)
I fairly sure none of the skin creators will mind you using them.
If using the online decoder, change the output to image/png
I prefer to use this online image encoder (http://www.base64-image.de/ (http://www.base64-image.de/)) as it has an image viewer.
-
@Bee-liever:
What's the size for FormBorderTop?
I thought it has to be 1x28, but I found your Polar Bear skin was using 576x28. What's going on?
-
@ redwing
what! give all my secrets away!!! ;D
Technically it is 1x28, but I experimented and found that the border top is not stretched, like the BorderLeft/BorderRight elements, but is repeated, in blocks, across the screen.
So, after trial and error and info from TheaterMode that MB scaling is based on 1152x864, I made images that are tileable horizontally. Usually 384x28, but the polar bear fur needed more definition, so it's 576x28.
And that's how I do the "picture" borders.
-
@ redwing
what! give all my secrets away!!! ;D
Technically it is 1x28, but I experimented and found that the border top is not stretched, like the BorderLeft/BorderRight elements, but is repeated, in blocks, across the screen.
So, after trial and error and info from TheaterMode that MB scaling is based on 1152x864, I made images that are tileable horizontally. Usually 384x28, but the polar bear fur needed more definition, so it's 576x28.
And that's how I do the "picture" borders.
How insensitive of me! Sorry for divulging your hard-earned secrets! I'm afraid that it's now public knowledge.
So did you find some kind of formula or the two were all that works? (now interrogating mode ;D)
-
So did you find some kind of formula or the two were all that works? (now interrogating mode ;D)
As long as the length of the border top divides evenly into 1152, you get the least noticeable distortion around the Windows buttons.
The windows buttons use the LH 88px of the border top as a background
-
As long as the length of the border top divides evenly into 1152, you get the least noticeable distortion around the Windows buttons.
The windows buttons use the LH 88px of the border top as a background
I think this must be one of the most significant discoveries in the history of MB, having a potential to change its look fundamentally.
Do you mind anyone else's doing "picture" borders with the "Bee-liever's formula"?
-
Do you mind anyone else's doing "picture" borders with the "Bee-liever's formula"?
Don't mind at all. I like seeing what other ideas people come up with.
-
Don't mind at all. I like seeing what other ideas people come up with.
Great! I'm wondering, too, what kind of possibilities are out there with this "new" feature. Thanks again for sharing this wonderful tip!
-
Wow, it really works!
(http://i.imgur.com/l1GzW3k.png)
-
Great, thank you so much!! I used this converter http://imagetobase64.com/