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 ELEMENTSI'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/?b6kr7ra1kvda6eo3. 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). 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.
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.
10. Music Library icon in the library tab image can be downloaded from :
http://www.mediafire.com/?iwuceh4pp27t9jx <element id="MusicLibraryInTab">CODE</element>
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).
13. <element id="AzJump">CODE</element> effects the little AZ icon in the main panel field columes.
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 THREEIn the mean time feel free to ask any question.
Rotem