getmusicbee.com

MusicBee & Add-Ons => Customizations => Skins => Topic started by: Clarence on December 13, 2019, 01:09:32 PM

Title: ForumB (Dark & Light)
Post by: Clarence on December 13, 2019, 01:09:32 PM
This is my first attempt at a MusicBee skin, the inspiration for which came from the colour combinations used on this Forum's dark and light page versions...hence the name of the skin.

I looked at the code of quite a number of skins in an effort to come to terms with how this was done and inevitably I still hit problems, so a huge 'tip of the hat' in thanks must go out to hiccup who answered my questions and gave me food for thought when I hit a brick wall.

DARK:
(http://i.imgur.com/Mk2NvG4l.png) (https://imgur.com/Mk2NvG4)
(http://i.imgur.com/p0DGSiwl.png) (https://imgur.com/p0DGSiw)
(http://i.imgur.com/AAvX1R4l.png) (https://imgur.com/AAvX1R4)
(http://i.imgur.com/aB1F3fYm.png) (https://imgur.com/aB1F3fY) (http://i.imgur.com/QArem3lm.png) (https://imgur.com/QArem3l)

LIGHT:
(http://i.imgur.com/IZ6xO1ul.png) (https://imgur.com/IZ6xO1u)
(http://i.imgur.com/SHbyz4gl.png) (https://imgur.com/SHbyz4g)
(http://i.imgur.com/zDVIV3Il.png) (https://imgur.com/zDVIV3I)
(http://i.imgur.com/rguGeqOm.png) (https://imgur.com/rguGeqO) (http://i.imgur.com/UGrwXqOm.png) (https://imgur.com/UGrwXqO)

UPDATE: 17 Dec 2019

1. Compressed Image storage to reduce overall skin filesize by approx 50%

2. Modified main player layout to allow spectrum visualiser to be turned on. I appreciate that this may not be to everyone's taste so two versions of the player are now available. (Activatable spectrum visualiser has SV suffix)

(Original)
(https://i.imgur.com/pC3KnFEl.png)
(https://i.imgur.com/rJGp4H1l.png)

(Spectrum available)
(https://i.imgur.com/Q47JvgDl.png)
(https://i.imgur.com/Sl82dnWl.png)



DOWNLOADS:
ForumB Dark skin (http://www.mediafire.com/file/rnq351crbre4y6g/ForumB_Dark.xmlc/file)   (Original)
ForumB Light skin (http://www.mediafire.com/file/qsh1fza0h7qj0t2/ForumB_Light.xmlc/file)   (Original)

ForumB DarkSV skin (http://www.mediafire.com/file/csejw3041ymjvuc/ForumB_DarkSV.xmlc/file)   (Spectrum Available)
ForumB LightSV skin (http://www.mediafire.com/file/r361y6fo5sowiy9/ForumB_LightSV.xmlc/file)   (Spectrum Available)
Title: Re: ForumB (Dark & Light)
Post by: boroda on December 13, 2019, 01:56:51 PM
great!
Title: Re: ForumB (Dark & Light)
Post by: Havokdan on December 13, 2019, 02:24:45 PM
Muito bom/Very good.
Title: Re: ForumB (Dark & Light)
Post by: hiccup on December 13, 2019, 02:38:41 PM
Very nice, well done!

Some observations:
- When toolbar buttons are displayed in a separate bar, the colouring of icons and text is a bit inconsistent.
- Icons of inactive tabs are displayed as a square. (check the iconmask values)

(https://i.imgur.com/ioV8ZvA.png)

Also I notice that the skin files are rather big.
That's not really a problem, but in case for example they are ever considered to be included in MusicBee (you never know...) it would be good if they were of a smaller file size.

The culprit here will be the image sizes. You might see if you can save them in smaller sizes (depending on the abilities of your image editor), and you might try compacting them further by using a specialized tool. (I am using PNGGauntlet myself for that)

edit:
And while you are in the flow of working on these skins, you may want to create icons for devices too.
( https://getmusicbee.com/forum/index.php?topic=29451.0 )

They will not show up in 3.3, but it would save you the trouble to work on these skins again when 3.4 comes out.
Title: Re: ForumB (Dark & Light)
Post by: Clarence on December 14, 2019, 01:09:09 PM
Thanks hiccup for your observations and I've adjusted the colour inconsistencies with the separate toolbar and adjusted the iconmask values for the inactive tabs as per the screen snip below:
(https://i.imgur.com/sAi4EJI.png)

The download links shown in the first post of this topic have been updated to include these adjustments.

The file size is a little larger than I would have liked and it is due to the images. They are already at their lowest sizing (that Photoshop will produce) without compromising image quality. I must admit that I hadn't considered subsequent compression and I've grabbed a copy of PNGGauntlet and will have a play with that to see if I can get any improvements. Thanks for the tip.

Point taken on the forthcoming device icons and I've built these into these skins in preparation for 3.4

(https://i.imgur.com/BbFggHz.png)

I'm not sure that they are the absolute solution as by all accounts from the posts you referred to, they are going to be a somewhat arbitrary/generic selection depending how the OS handles the Protocols and there will of course be multi-type USB connectivity.
Title: Re: ForumB (Dark & Light)
Post by: hiccup on December 14, 2019, 01:52:05 PM
Very nice icons. (maybe nicer than mine, damn)
It's not easy to get such results with only having 16x16 pixels to work with.

Indeed in some situations some icons will be a compromise but I think this will be more than close enough.

About image sizes:
In Photoshop there are some 'tricks' I sometimes use. One is posterize. But that will not give very useful results with gradient images and subtle colours.
Another one is to use 'save for web'. That usually gives very good results for me.

Another quick and dirty way is to open and save a PS image in Paint.NET.
In some way that seems to leave out some unnecessary ballast and can result in substantially smaller file sizes.


P.S.
For what it's worth, this is what I will be using in my skins. (until protests and rebellion start to arise)
(https://i.imgur.com/bo2961x.png)
Title: Re: ForumB (Dark & Light)
Post by: hiccup on December 14, 2019, 02:47:05 PM
B.t.w.
Consider creating a landing page for your skins on the Addons > Skins pages?
Title: Re: ForumB (Dark & Light)
Post by: Clarence on December 14, 2019, 03:51:44 PM
Quote
Very nice icons. (maybe nicer than mine, damn)

'Back at you'

I'll have a try with all of the suggestions you've made about reducing the graphics file sizes and see what works for me.

Not sure a landing page is warranted...let's see if the skin is popular on here before that.
Title: Re: ForumB (Dark & Light)
Post by: hiccup on December 14, 2019, 04:08:43 PM
Not sure a landing page is warranted...let's see if the skin is popular on here before that.

I wouldn't take that into any concern.
It's hard to measure 'popularity' from replies on the forum.
I have skins that hardly recieve any feedback or appreciation at all, which could be dis-encouraging, but they prove to have a large amount of downloads.

And even if they are not used, downloaded or appreciated by others, so what?
The main reason for creating a skin is doing it because you want to create something that your eyeballs like, and isn't out there yet.

All you can do is to make sure people are able to learn of it's existence, and the Addons pages are good for that.
Title: Re: ForumB (Dark & Light)
Post by: boroda on December 14, 2019, 04:18:54 PM
Not sure a landing page is warranted...let's see if the skin is popular on here before that.
add-ons section of the site is *not* some official place. but your skin will be available to more users (beta testers) :)
Title: Re: ForumB (Dark & Light)
Post by: Clarence on December 14, 2019, 07:48:01 PM
Ok hiccup and boroda. Thanks both of you for the input...I'll look into setting one up.
Title: Re: ForumB (Dark & Light)
Post by: Clarence on December 17, 2019, 11:48:24 PM
I took hiccup's advice and managed to compress images used in the skin and the overall result was a filesize reduction of approx. 50% with no discernible loss of image quality.
'Top Tip', hiccup!, thanks.

I also had a request to activate the spectrum visualiser in the main player which was intentionaly turned off to allow for the layout I wanted. However, I decided to go with the flow and have redesigned the player to allow for the visualiser to be actived. As this may not be to everyone's taste I have made two styles available. The skin with the activatable visualiser now has a suffix of SV. An image of each has been included in the original post above.

The dowload links in the first post of this topic have been updated and include the reduction in filesize.
Title: Re: ForumB (Dark & Light)
Post by: tdi2001 on January 24, 2020, 10:08:52 AM
Hi,
I´m new to this forum. I run Musicbee with the beautiful FORUMB skin, and like the Light version even better than the dark one. For me it´s the best theme.
One question regarding the buttons: is it possible to show a STOP-button in the player controls area? I can only find a PAUSE-button.
Thanks & best regards!
Title: Re: ForumB (Dark & Light)
Post by: stardepp on January 24, 2020, 10:18:05 AM
Welcome to the MusicBee Forum.

If you right click on the Player Bar, you will see a Stop button.

(https://i.imgur.com/OzD9zbk.jpg)
Title: Re: ForumB (Dark & Light)
Post by: Clarence on January 24, 2020, 02:56:24 PM
Hi, tdi2001 and, as stardepp said, welcome!

First off, thanks for your kind comments and I'm glad you like this skin. I actually did the light version first as it was what I was after, then felt I should provide a dark version as well.

The stop button can be actioned as stardepp stated and as you can see from the picture posted, Ctrl+S can also invoke an immediate stop.  However, a not so well publicised way of getting a stop button displayed also exists:

When a track is playing (with your cursor anwhere over the main player), press and hold the SHIFT key on your keyboard. The PAUSE button will change to display a STOP button which can then be clicked. It won't work , however, if you have album art displayed in the main player which I haven't worked out if that is a bug or a design feature.

It took me some time to realise this when I first started and I now make sure that I include an appropriately designed stop button with each skin e.g. highlighted in the skin's theme.

Hope this helps.
Title: Re: ForumB (Dark & Light)
Post by: mcool on January 24, 2020, 03:35:05 PM
IMHO, a middle click over the play button could be an easier way to stop the track.

Middle click could be more used in MusicBee. I'd like to have it in A-Z jumpbar for multi-character searches instead of the current way which is related to an expiration time
Title: Re: ForumB (Dark & Light)
Post by: Clarence on January 24, 2020, 03:44:38 PM
@mcool...
'Horses for Courses' as we say locally, but that option isn't currently available....don't shoot the skinner!

Also, bear in mind that not everyone uses a mouse or track-pad...not sure how you can middle click on a touch screen, for example, or on a bog-standard keyboard.
Title: Re: ForumB (Dark & Light)
Post by: mcool on January 24, 2020, 04:40:58 PM
:) Oh yes, it's a general thought, maybe off-topic. It isn't a request to the skinner
Title: Re: ForumB (Dark & Light)
Post by: wealstarr on April 01, 2020, 02:01:45 PM
Hi, great skin. Thank you for the amazing work  :-*

I'm having a little issue (screenshot attached below)

(https://i.postimg.cc/CKzbkmqq/Capture.jpg)

You see a dark band right above the track information panel ?

Is it possible to get rid of this ?

Also, this bug is consistent with all your skins.

Thanks again.
Title: Re: ForumB (Dark & Light)
Post by: Clarence on April 01, 2020, 05:02:41 PM
Hi wealstarr

You see a dark band right above the track information panel ?

Is it possible to get rid of this ?

Also, this bug is consistent with all your skins.


This isn't a 'bug' with this or any of my skins. It's a feature of MusicBee that you will find showing up in any skin where the element 'HeaderBar' is set to a contrasting colour from the main panel. (The HeaderBar is the section along which the horizontal A-Z Bar, Section Titles, etc are shown.) When you select 'Hide Header Menu' for a panel, as you have done in your screenshot, it is only the text display that is hidden and the header background remains. As this element draws it's format from the HeaderBar element, that colour remains.  In the case of ForumB, the HeaderBar colour is set to RGB 40,40,40 (Hex #282828) and this is the colour that is showing on your identified bar in the screenshot.

This is the same for older skins and an ideal one to see this is on 'Absolute Zero' which uses shades of lighter blue but it's equally visible on newer skins such as Alumni's Redstone Dark or diego's excellent 'Fluenx Dark'.

In answer to the question, "Is it possible to get rid of this ?". Yes. But only if you change the colour of the HeaderBar but this would mean that there would be no demarcation of the header section and the panel, just like having a screen of one single colour. Most skinners will have used the colour separation for an aesthetic reason. However, if you want to try it you could always write a simple xml file which states it depends on the original skin, and then set the HeaderBar colour to the same as the main panel. That should work on any skin, whether in straight xml format or compiled into xmlc format.
Title: Re: ForumB (Dark & Light)
Post by: wealstarr on April 01, 2020, 07:38:54 PM
Hi wealstarr


This isn't a 'bug' with this or any of my skins. It's a feature of MusicBee that you will find showing up in any skin where the element 'HeaderBar' is set to a contrasting colour from the main panel. (The HeaderBar is the section along which the horizontal A-Z Bar, Section Titles, etc are shown.) When you select 'Hide Header Menu' for a panel, as you have done in your screenshot, it is only the text display that is hidden and the header background remains. As this element draws it's format from the HeaderBar element, that colour remains.  In the case of ForumB, the HeaderBar colour is set to RGB 40,40,40 (Hex #282828) and this is the colour that is showing on your identified bar in the screenshot.

This is the same for older skins and an ideal one to see this is on 'Absolute Zero' which uses shades of lighter blue but it's equally visible on newer skins such as Alumni's Redstone Dark or diego's excellent 'Fluenx Dark'.

In answer to the question, "Is it possible to get rid of this ?". Yes. But only if you change the colour of the HeaderBar but this would mean that there would be no demarcation of the header section and the panel, just like having a screen of one single colour. Most skinners will have used the colour separation for an aesthetic reason. However, if you want to try it you could always write a simple xml file which states it depends on the original skin, and then set the HeaderBar colour to the same as the main panel. That should work on any skin, whether in straight xml format or compiled into xmlc format.

Okay thank you for the explanation, I understand. Actually it won't show in some skins so I thought it might be a bug now I've understood those skins use the same colour property for both headerbar and panel.

It's an xmlc skin so I can't edit it, and I don't know hwo to write xml. Can you help me with this ? If it's possible.

It's perfectly fine if it ain't. Thanks again for the skin.
Title: Re: ForumB (Dark & Light)
Post by: Clarence on April 01, 2020, 09:45:29 PM
@wealstarr...

Personally I'm not a fan of piggy-backed skins.  They can get a bit messy, so as a one-off, here's a modified version of the skin.

ForumB_Dark_Modified (http://www.mediafire.com/file/kxbgpso7wvjctli/ForumB_Dark_Modified.xmlc/file)

Hope it does what you wanted.
Title: Re: ForumB (Dark & Light)
Post by: wealstarr on April 02, 2020, 08:31:10 AM
@wealstarr...

Personally I'm not a fan of piggy-backed skins.  They can get a bit messy, so as a one-off, here's a modified version of the skin.

ForumB_Dark_Modified (http://www.mediafire.com/file/kxbgpso7wvjctli/ForumB_Dark_Modified.xmlc/file)

Hope it does what you wanted.

Thank you from the core of my heart Clarence. It works!

This is the only minimal, flat skin in your collection, I hope you'll create more skins like this.

Thank you and God bless.