getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: colagen on December 14, 2011, 11:32:05 PM

Title: Musicbee skin SteelAndBee
Post by: colagen on December 14, 2011, 11:32:05 PM
EDIT: It stared as just a mockup, but finally, it turned into a skin (created from Smooth Grey), you can find it here :
http://www.mediafire.com/?g11v6nx2evxkdgm

If you want to edit this skin yourself, you can find the images, the source xml file, and a little photoshop file here :
http://www.mediafire.com/?nid0c8vc7nca9cz
You will need the skincreator tool, http://getmusicbee.com/forum/index.php?topic=3834.0

I've called it SteelAndBee because, because i've got to give a name to the skin file eh.

Here is a preview:
(http://s16.postimage.org/bd9rjxbed/Untitled_1.jpg) (http://s16.postimage.org/bd9rjxbed/Untitled_1.jpg)

The mockup (which isn't the skin, obviously, because it's the mockup)
(http://i39.tinypic.com/5lwdog.jpg) (http://i39.tinypic.com/5lwdog.jpg)
Title: Re: musicbee mockup
Post by: ma_t14 on December 15, 2011, 01:19:54 AM
Wonderful work!!!
Title: Re: musicbee mockup
Post by: Rotem K. on December 15, 2011, 04:47:37 AM
maybe it's completely impossible to acheive with a skin

I don't think it's that far off. you can get something that's very close to it, with skins.
Title: Re: musicbee mockup
Post by: beeing good on December 15, 2011, 06:49:47 AM
Yeah that's pretty straightforward, more or less. Just use a grey skin and dock the player control at the top,
Title: Re: musicbee mockup
Post by: Steven on December 15, 2011, 07:47:08 AM
i think this skin could be achieved using the bitmap skinning. The only thing i can see not possible would be the narrow scrollbars
Title: Re: musicbee mockup
Post by: colagen on December 15, 2011, 12:50:23 PM
Okey, i gave it a try. I've start with the smooth grey xml file, which is an easy way  to quickly edit the color, but can't control the padding between UI elements and i can't remove the borders either, so a white frame remains. About this white frame, i think it's usefull between the track browser and the playlist viewer, also between the sidebars and the center panel because it extend the area that you can grabe to resize, but it's useless between the top header and the main panel, and next to the windows borders ? Anyway, it doesn't look as smooth as in my mockup, but not that bad : )
(http://i39.tinypic.com/dcao83.jpg) (http://i39.tinypic.com/dcao83.jpg)

I will try to edit the player controls later using your bitmap skinning tool
Title: Re: musicbee mockup
Post by: Rotem K. on December 15, 2011, 07:44:23 PM
I like it! the one thing that feels 'off' to me is the player panel. like you said, having no control on the alignment and order of the panel does hurt the interface a bit.

Maybe Steven can come up with some way to allow that control. If you'd like you can ask for it in the wish list forum or just PM him.

Title: Re: musicbee mockup
Post by: Steven on December 15, 2011, 07:55:58 PM
thats what the bitmap skins allow - you can control where the player elements are placed and how they look
if you are refering to elements outside of the player panel can you highlight them so i know what you mean
Title: Re: musicbee mockup
Post by: Rotem K. on December 15, 2011, 08:12:13 PM
Is it possible to set the player display before the volume slider?
Title: Re: musicbee mockup
Post by: Steven on December 15, 2011, 09:01:33 PM
yes, you can position each of the player elements anywhere within the player panel
Title: Re: musicbee mockup
Post by: colagen on December 15, 2011, 09:59:55 PM
I've just finish the skin this evening, back from work. Here it is: [grab the link in the first post!]

(http://i41.tinypic.com/4ka6ap.jpg) (http://i41.tinypic.com/4ka6ap.jpg)
Actually, yes, with the bitmap skinning tool it's possible to do a lot of things, i manage to do something approaching a lot my photoshop file. But i didn't change the layout though.
The volume bar can't look like in my screenshot, because there is no setting for a filler image. And in the final skin, there is a little yellow block remaining at the beginning of the seek bar even when nothing is played (but it look cool : ).
And last thing, the buttons hover effect doesn't render really well sometimes (for a few milliseconds, it seems like the button become a grey block). Maybe if the buttons effects was all in the same image, the transition would be smooth ? (0px to 20px: you'll have the default button, 20px to 40px the hover button etc ... ) Anyway, most of the time, the transition is ok.



Title: Re: musicbee mockup
Post by: ma_t14 on December 15, 2011, 10:06:31 PM
I love how subtle and smooth this skin looks. My new default skin  ;D

colagen you have talent, keep them coming  ;)

EDIT

I suggest that you change the title and edit the original post to make more people aware about the availability of this wonderful skin  :)
Title: Re: musicbee mockup
Post by: Steven on December 15, 2011, 10:12:56 PM
i will see what i can do about the small yellow bit showing when play hasnt started
Title: Re: Musicbee skin GreyAndBee
Post by: ma_t14 on December 15, 2011, 11:23:25 PM
colagen could you do something about the tabs as well (vertically and horizontally). I trust you doing a great job there as well...

Also the skin reminds very much of steel IMO. Don't you think that naming the skin something involving the word "steel" would be better ("SteelBee" maybe)?  ;)
Title: Re: Musicbee skin GreyAndBee
Post by: colagen on December 15, 2011, 11:30:10 PM
The tabs ? uh ? i didn't even figure that musicbee uses tabs. I will look.

EDIT: I've recolored the tabs, and it's now called SteelAndBee : ) You can download the updated skin from the first post
Title: Re: Musicbee skin GreyAndBee
Post by: maiden_freak on December 15, 2011, 11:57:35 PM
Nice job, it looks great.
Title: Re: Musicbee skin SteelAndBee
Post by: SimonBRT on December 16, 2011, 01:12:50 AM
i've not changed skin in a long time but this is now my default. excellent work!
Title: Re: Musicbee skin SteelAndBee
Post by: SimonBRT on December 16, 2011, 02:01:24 AM
would it be possible to look at the mini-player.  currently the song text is black and hard to read and it would be great if the progress bar matched the yellow of the main window (currently its blue).  would be awesome if you could fix this...
Title: Re: Musicbee skin SteelAndBee
Post by: Greb on December 16, 2011, 07:55:29 AM
Lovely!

(But I agree about tabs. This blue doesn't fit)
Title: Re: Musicbee skin SteelAndBee
Post by: colagen on December 16, 2011, 12:50:34 PM
I've fix these problems, redownload from the first post. The colors of the progress bar in the compact player are switched on purpose, the yellow is used for the remaining time (because it look better this way)
Title: Re: Musicbee skin SteelAndBee
Post by: VX on December 16, 2011, 06:11:23 PM
Thank you very much for the great skin.  :)

You should definitely use your skinning skills more often  8)

I've noticed some minor issues that could be improved a bit:
1. change the splash screen to something more original;
2. the volume slider button should become yellow when hovered over to be consistent with other buttons on the player control panel;
3. maybe the ratting stars on the player control panel on the top could be a little bit more yellow ???
Thanks for considering.
Title: Re: Musicbee skin SteelAndBee
Post by: SimonBRT on December 17, 2011, 05:21:13 AM
mini player looks awesome now - thank you!
Title: Re: Musicbee skin SteelAndBee
Post by: colagen on December 19, 2011, 03:00:48 PM
I've update the skin, which now has narrow scrollbars and 1px borders between the sidebars and main panels. I've also recolored some elements.
The link in the first post has been updated to the last version.

You will need the last version of MusicBee to support all the changes. http://www.mediafire.com/?44zx225nc5hc8ak

Thank you very much for the great skin.  :)

You should definitely use your skinning skills more often  8)

I've noticed some minor issues that could be improved a bit:
1. change the splash screen to something more original;
2. the volume slider button should become yellow when hovered over to be consistent with other buttons on the player control panel;
3. maybe the ratting stars on the player control panel on the top could be a little bit more yellow ???
Thanks for considering.

Thanks for the nice words. Sorry for your requests, i can't do any of them.
1: I think i won't manage to do something better than the actual splash screen made by RothemK, which looks excellent.
2: It's impossible to do that for the moment
3: Maybe it can be tweaked, but i don't know how :(




Title: Re: Musicbee skin SteelAndBee
Post by: beeing good on December 19, 2011, 04:29:58 PM
Is there any chance you could do a dark edition of this? Your skin in the colours of the default Dark skin would be perfect for me. I would do it myself but I don't understand how to edit the .xmlc skins.
Title: Re: Musicbee skin SteelAndBee
Post by: l.dc on December 19, 2011, 05:26:24 PM
Beautiful work. I want to add that the star ratings are not very clear (the rating and the blank stars look VERY similar in contrast). Also, like someone else said, a darker version would be welcome.

But beautiful work as it is :D
Title: Re: Musicbee skin SteelAndBee
Post by: Steven on December 19, 2011, 06:13:31 PM
these control the star ratings:
main panel
<!-- 64-->  <element id="Panel.StarRating.Default" fg="127,127,127" fg2="230,230,230" />
<!-- 65-->  <element id="Panel.StarRating.Highlight" fg="255,255,255" fg2="200,202,204" />
<!-- 66-->  <element id="Panel.StarRating.Lowlight" fg="255,255,255" fg2="200,202,204" />

main player - default
<!-- 79-->  <element id="Player.StarRating.Default" fg="0,0,0"/>
<!-- 80-->  <element id="Player.StarRating.Lowlight" fg="0,0,0" />

main player - overrides when docked at the top
<!-- 79-->  <element id="PlayerTop.StarRating.Default" fg="0,0,0"/>
<!-- 80-->  <element id="PlayerTop.StarRating.Lowlight" fg="0,0,0" />

mini-player
<!-- 99-->  <element id="MiniPlayer.StarRating.Default" bg="180,180,180" fg="230,230,230"/>
<!-- 100-->  <element id="MiniPlayer.StarRating.Lowlight" fg="180,180,180"/>

tag editor
<!-- 136-->  <element id="Controls.StarRating.Default" bg="237,237,237" fg="126,130,135" bdr="237,237,237" />
Title: Re: Musicbee skin SteelAndBee
Post by: bigelow13 on December 20, 2011, 09:51:34 PM
the bee is starting to look real pretty
Title: Re: Musicbee skin SteelAndBee
Post by: SimonBRT on December 21, 2011, 05:52:57 AM
+1 on the slight lack of contrast on the star ratings, it would be nice if ratings stood out a little more.

the more i use this skin the more i love it.  mb may now be about the best looking (as well as best) player out there.
Title: Re: Musicbee skin SteelAndBee
Post by: ma_t14 on December 21, 2011, 04:06:17 PM
+1 on the slight lack of contrast on the star ratings, it would be nice if ratings stood out a little more.

Another vote for changing the rating contrast
Title: Re: Musicbee skin SteelAndBee
Post by: greenday1987 on December 25, 2011, 09:32:16 AM
Actually really like this skin. Thanks muchly
Title: Re: Musicbee skin SteelAndBee
Post by: sierena on January 02, 2012, 09:10:32 AM
I've been using the dark skin for a really long time, but this works perfectly for me. Thank you very much.
Title: Re: Musicbee skin SteelAndBee
Post by: cooljazz on January 03, 2012, 01:42:20 PM
really well done!!! Love it.
Title: Re: Musicbee skin SteelAndBee
Post by: Analien on January 03, 2012, 07:45:18 PM
This is a really nice skin. Thanks for making this.

But i would like to have the stars in the ratings in the same color as the yellow progressbar, would this be possible?
Title: Re: Musicbee skin SteelAndBee
Post by: silasje1 on January 08, 2012, 09:18:04 PM
Dear developer i need somebody to create an ubuntu skin for me. The fact your skin works the best so far(still need things from others though) i want to ask if you could help me. Thanks in advance
Title: Re: Musicbee skin SteelAndBee
Post by: Analien on January 12, 2012, 09:21:17 AM
This is a really nice skin. Thanks for making this.

But i would like to have the stars in the ratings in the same color as the yellow progressbar, would this be possible?


... or if someone could tell me how to change this myself.
Title: Re: Musicbee skin SteelAndBee
Post by: cartman005 on January 12, 2012, 03:16:48 PM
... or if someone could tell me how to change this myself.
It isn't possible to easily modify a bitmap skin because you don't have the image elements. And I'm not sure if you could make a dependent skin off of it.
Title: Re: Musicbee skin SteelAndBee
Post by: silasje1 on January 12, 2012, 03:37:49 PM
Hey man, its a bit different than just doubleclicking like the .xml files, but I'll try to explain

First - Download the skin creator - http://www.mediafire.com/?8dzfhj7v4ri048g (This version includes the version of Honeycomb Light on my thread as an example)

In the folder you will find the following as shown in the picture below.

(http://i.imgur.com/FtgWT.png)

The Base xml skin file is the skin on which the custom bitmap controls are placed - this can be your own xml skin file, or one from the forums.

The Compiled xmlc skin file is the compiled file, which merges the base xml file and the custom bitmap controls. (The base xml is NOT needed by musicbee to use the {b]xlmc[/b] skin)

The Images folder contains every image used on the custom controls - The Play/Pause buttons, Lastfm icon, Equaliser icons etc. You can simply edit my example images to your liking so you dont have to worry about the size.

After you're happy with the way your images look, you can view the bitmap skin by starting the SkinCreator.exe. To save the bitmap as an xmlc file, simply press save on the top right corner of the SkinCreator.


Hopefully this will get you started  if you have any other questions, just PM right away!

Take care

SOURCE:
Blinghound
Title: Re: Musicbee skin SteelAndBee
Post by: Steven on January 12, 2012, 07:13:02 PM
i will try and get hold of colagen as he hasnt been active on the forums for some time. If i dont get any response i can extract the images and settings from the xmlc file so someone can take the skin forward as a variation. But i really think its best this is done by colagen if he is willing and it will take a bit of time for me to write something to extract the images
Title: Re: Musicbee skin SteelAndBee
Post by: colagen on January 13, 2012, 01:14:06 PM
Hi,
Updated with more contrasted and yellow rating stars, sorry for the delay, redownload it from the first post please.

I've included the source file and images also in the first post, so if something seems wrong, somebody else could eventually update the skin before me (somebody more reactive than myself : )
Title: Re: Musicbee skin SteelAndBee
Post by: SimonBRT on January 13, 2012, 09:57:55 PM
awesome.  thank you colagen.
Title: Re: Musicbee skin SteelAndBee
Post by: Analien on January 19, 2012, 04:12:56 PM
Thanks everybody, for your response and thanks to colagen for making the changes. Although I'd like to add that I meant to change the colour of the ratings in the file-list(s) not on the player itself, if you get what I mean (but it was a welcome change that too). :)
So may I dare to ask the same Q again, only this time it's for the file-lists e.g the Inbox, Library, Now Playing, etc, etc?  ::)
Title: Re: Musicbee skin SteelAndBee
Post by: l.dc on January 23, 2012, 01:43:48 PM
Hi,
Updated with more contrasted and yellow rating stars, sorry for the delay, redownload it from the first post please.

I've included the source file and images also in the first post, so if something seems wrong, somebody else could eventually update the skin before me (somebody more reactive than myself : )

This is just perfect. Thank you! :)
Title: Re: Musicbee skin SteelAndBee
Post by: jistme on April 20, 2012, 04:27:14 PM
I would like to do some skinning myself with SteelAndBee as a basis.
As I understand I then need the images and the source xml file from SteelAndBee, but the Mediafire link from the startpost is not valid anymore.

Does anybody have a valid link to these files for me please?
Title: Re: Musicbee skin SteelAndBee
Post by: silasje1 on April 27, 2012, 01:03:33 PM
Re-Up source please :)
Title: Re: Musicbee skin SteelAndBee
Post by: tompeto on May 12, 2012, 04:24:41 AM
Great skin!
Thanks
Title: Re: Musicbee skin SteelAndBee
Post by: tom1302 on May 16, 2012, 07:22:53 AM
Please be so kind to re-up. The upper mentioned link is dead. Thanks  :D
Title: Re: Musicbee skin SteelAndBee
Post by: Steven on May 16, 2012, 07:36:12 PM
it should already be part of the musicbee 1.4 or 2.0 installation package under the Neutral skins folder
Title: Re: Musicbee skin SteelAndBee
Post by: Drone on June 21, 2012, 03:06:03 AM
Another request for the source of this skin (from the OP or anyone else who downloaded it before the link died). Would love a slightly darker variation based on these player controls, but with the main app colours more similar to Smooth Tuned Dark Grey (but with the yellow highlights obviously).
Title: Re: Musicbee skin SteelAndBee
Post by: Spiron on September 23, 2012, 08:32:23 AM
Another person for the re-up of the source, I am thinking of building a new skin and if possible would like to build it off this one.  I know the OP hasn't been the most active person but surely someone has a copy of the original XML somwhere
Title: Re: Musicbee skin SteelAndBee
Post by: colagen on September 23, 2012, 07:29:27 PM
Hi,
You guys should send PM as steven have done, otherwise i won't receive any emails notifications.
The link for the sources in the first post is okay now, and should stay online on mediafire for a while as i didn't post it as a guest this time.