getmusicbee.com
MusicBee & Add-Ons => Customizations => Skins => Topic started by: blidmink on January 25, 2016, 08:23:50 AM
-
(http://i.imgur.com/Z5UaEoq.jpg)
DarkMOD is a dynamic skin for MusicBee 3 based on DarkRED Flat by Endeavour1934 (icons are from Endeavour's great DarkRED Flat 3 theme). After using MusicBee for over a year, I decided that DarkRED Flat is hands down the best skin included with the player, so I used it to make DarkMOD. DarkMOD is designed to be modern, bold and easy to customise. Which is why this skin isn't just a download, it's actually created from a webpage, based on a colour you pick.
That's right, this isn't just a single theme. By generating the skin dynamically based on any colour, you get to choose what your theme looks like; you can even preview it in the browser! The skin-generating script behind the scenes takes care of the tones, tints and image elements required to make your MusicBee look truly awesome.
For best results, use MusicBee 3 and put tabs in the caption bar and player at the top.
To generate, preview and download your own DarkMOD skin, head over here (always up-to-date): https://darkmod.netlify.com/ (https://darkmod.netlify.com/)
Enjoy, and let me know of any issues!
-
Where can I vote for this to be the default theme? Sick as
-
Where can I vote for this to be the default theme? Sick as
You can't. But you can have it as your own default theme.
-
This is awesome! DarkRED Flat has been my goto skin ever since I started using MB two weeks ago, heh. Thanks!
-
That's right, this isn't just a single theme. By generating the skin dynamically based on any colour, you get to choose what your theme looks like; you can even preview it in the browser! The skin-generating script behind the scenes takes care of the tones, tints and image elements required to make your MusicBee look truly awesome.
Wow, this is really clever!
-
I don't know what might have gone wrong but in my MB3 it looks just like the default MB3 skin!
EDIT: Moreover, my tabs go down from the caption bar (where I always have them) to below caption bar automaticly.
-
I don't know what might have gone wrong but in my MB3 it looks just like the default MB3 skin!
EDIT: Moreover, my tabs go down from the caption bar (where I always have them) to below caption bar automaticly.
That's a bit strange, I've just double checked and everything's still working for me with tabs in caption bar and below caption bar. Silly question, but did you definitely copy the file over and select the right skin? Otherwise, chuck up a screenshot.
-
This is amazing! Thank you so much for this!! ^^
-
This is amazing! Thank you so much for this!! ^^
No problem! I love MusicBee and thought DarkMOD would make appearance customisation a bit easier for the end user, albeit from a single skin base. Especially given that a lot of the skin (and MB skins in general) comes in the form of image elements which can be a bit tedious to make and save manually. Plus hopefully over time I can add functionality to the site and theme.
-
Very nice work :)
Very clever!
-
I don't know what might have gone wrong but in my MB3 it looks just like the default MB3 skin!
EDIT: Moreover, my tabs go down from the caption bar (where I always have them) to below caption bar automaticly.
That's a bit strange, I've just double checked and everything's still working for me with tabs in caption bar and below caption bar. Silly question, but did you definitely copy the file over and select the right skin? Otherwise, chuck up a screenshot.
Got the same problem :(
(http://i66.tinypic.com/2mguj5h.jpg)
-
Wow, wonderful work you have done.
one issue though, dunno if it is a limitation of musicbee or not:
(http://i.imgur.com/zDgBSzE.jpg)
there is that black border on both side that look ugly.
-
Nice work. Thanks for sharing.
-
those of you with this skin not working, it will probably be an invalid element or colour in the skin. Check the end of the error log (help/ support/ view error log) as i think MB logs the error and let blidmink know
-
It is generating some values that probably presents problems.
There are some spaces in rgb values, and it uses decimals for rgb values:
Highlight="218, 156, 0"
Highlight-Trans-Light="236.5,205.5,127.5"
Highlight-Trans-Dark="130.8,93.6,0"
-
I don't know what might have gone wrong but in my MB3 it looks just like the default MB3 skin!
EDIT: Moreover, my tabs go down from the caption bar (where I always have them) to below caption bar automaticly.
That's a bit strange, I've just double checked and everything's still working for me with tabs in caption bar and below caption bar. Silly question, but did you definitely copy the file over and select the right skin? Otherwise, chuck up a screenshot.
Got the same problem :(
(http://i66.tinypic.com/2mguj5h.jpg)
You don't have 'Skin Windows Borders' activated.
You can't have tabs in the caption bar unless you have that turned on.
-
It is generating some values that probably presents problems.
There are some spaces in rgb values, and it uses decimals for rgb values:
Highlight="218, 156, 0"
Highlight-Trans-Light="236.5,205.5,127.5"
Highlight-Trans-Dark="130.8,93.6,0"
Thanks for this, I'll get some rounding going and fix this up now, will let you know when the fixes are live.
-
Wow, wonderful work you have done.
one issue though, dunno if it is a limitation of musicbee or not:
(http://i.imgur.com/zDgBSzE.jpg)
there is that black border on both side that look ugly.
Yes! I agree with you there; it is ugly and I'd love to get rid of it. Plus Windows 10 seems to add its own border outside that which is unfortunate. Unless MB3 has a trick hidden up its sleeve, I can't get around this easily as this area is defined as an image resource for the entire left or right border of the window. So either I make the entire left and right borders your highlight colour (may as well do the bottom border while I'm at it) or I change the border colour/image to the same gray as the rest of the window (which would still leave a little unsightly gap on the edges of the player). I might implement the gray change now actually, unless you think people would be keen for the highlighted border...
-
Thanks for your input and feedback everyone. Version 1.0.5 of the theme is now live, just redownload the theme again at the same URL: http://albertnis.com/php/darkmod/index.html (http://albertnis.com/php/darkmod/index.html)
Fixes:
- RGB values passed to the skin script and RGB values used in the theme no longer contain spaces.
- Colour values are now floored, avoiding all decimal places.
Hopefully this fixes the more serious appearance issues out there, I would love if someone could test it out and let me know either way! It's bizarre how I can't seem to replicate the issue on Windows 10 or Windows 7.
This evening (site time) I'll aim to do an update with gray (rather than black) borders. Heck, I could add it as an option on the page. Also I need to add some more icons for videos, bookmarks etc. I'll see how I go.
-
It is the matter of clolours indeed - tried to generate the skin with some basic colours and it worked.
Another bug - the Playlist Manager icon is not from the DarkRED skin and it looks much different than the rest.
-
It is the matter of clolours indeed - tried to generate the skin with some basic colours and it worked.
Another bug - the Playlist Manager icon is not from the DarkRED skin and it looks much different than the rest.
Sweet, thanks! Will add more icons soonish, though I couldn't find (or guess) the icon ID for the playlist manager one so I just hid it... Obviously not the best solution so I'll look through the forums and wiki to see of I can find the ID.
-
its "PlaylistDirectoryIcon"
-
its "PlaylistDirectoryIcon"
Cheers Steven!
-
Nice work! :D
You can use any of my new icons/settings from the new DarkRed3 if you want: https://dl.dropboxusercontent.com/u/10773406/DarkREDFlat3.xml (updated today)
-
Nice work! :D
You can use any of my new icons/settings from the new DarkRed3 if you want: https://dl.dropboxusercontent.com/u/10773406/DarkREDFlat3.xml (updated today)
Many thanks, I think I'll take you up on that offer as they look bloody good!
-
So copying over the new icons is done (will update site soon), out of interest is it possible to skin the highlighted elements in this screenshot?
(http://i.imgur.com/3ESw5mr.jpg)
-
i have added "ConsolidateButtonsIcon" for the next MB3 update
it will be automatically recoloured to the same colour as the existing icon
-
Version 1.0.6 of the theme is now live, just redownload the theme again at the same URL: http://albertnis.com/php/darkmod/index.html
Changes:
- More complete icon set, from Endeavour1934's latest DarkRED 3 theme.
- Window border is now grey rather than black. While not ideal (ie no border) this is slightly less obtrusive than black.
- Updated webpage with current version, MB3 download link and skin forum link.
- Webpage updates preview colour on load.
-
Awesome! Thanks!
-
Thx a lot, now it works perfectly!
Here are my suggestions for future improvements:
1. Track information panel in Now Playing tab is now still in purple/plum color from the default skin. I guess it would look much nicer if it was coloured as well.
2. Progress bar could be coloured with the tones of the header bar as well (instead of being black & white)
Here's the mockup:
(http://i.imgur.com/oqL9YNe.png)
-
Thx a lot, now it works perfectly!
Here are my suggestions for future improvements:
1. Track information panel in Now Playing tab is now still in purple/plum color from the default skin. I guess it would look much nicer if it was coloured as well.
2. Progress bar could be coloured with the tones of the header bar as well (instead of being black & white)
Thanks heaps for these suggestions, I'll look at getting these implemented this evening (site time).
-
One more suggestion - could you make the scroll bar handle a bit thicker and more visible?
I'm can position the mouse pointer a few pixels next to the scroll handle and it still scrolls. The "click" area is wider then the visual representation of the handle itself, so why not adjust it?
Hope this makes sense :D
-
One more suggestion - could you make the scroll bar handle a bit thicker and more visible?
I'm can position the mouse pointer a few pixels next to the scroll handle and it still scrolls. The "click" area is wider then the visual representation of the handle itself, so why not adjust it?
Hope this makes sense :D
I think I know what you mean. Personally I like the minimal, thin look of the scroll bars, but I'll have a play around and see what I can do.
-
Version 1.0.7 of the theme is now live, just redownload the theme again at the same URL: http://albertnis.com/php/darkmod/index.html
Changes:
- Highlight colour and variations are now found in the now playing screen and on the now playing popup.
- Progress bar changed from black/white to dark/light. EDIT: I revised the update when I realised this change makes the wavebar have barely any contrast. Progress bar colours are now white/dark. Still a bit nicer than white/black I think. Ideally the wave bar and progress bar would be styled separately but as far as I am aware this is not the case.
- Revised splash screen.
- Script now generates coloured check tick image resources. This is slightly experimental; let me know if you have any issues.
- Scroll bars are now thicker by a couple of pixels. For those of you like myself who prefer super-narrow scroll bars, enable narrow scrollbars in Preferences -> Layout (1).
The new progress bar has a little bit more contrast than your mockup, HHM, because I think it looks a tad clearer. However I'm open to further changes so let me know if you'd rather make one of the progress colour the actual highlight colour, as per your mockup, for that seamless look.
-
Wow, mighty impressive! Tnx for the scroll-bars :)
This is the best v3 skin by far!
There is one issue I noticed - check marks are less and less visible, darker the skin variant is. If it's completely black there is no way to see them in the menus.
(http://i.imgur.com/y4KkHzp.jpg)
("add to library" is selected and "mark and send duplicates to the Inbox")
Maybe you could add some rules to make them brighter than the color of the skin itself?
-
- Progress bar changed from black/white to dark/light. EDIT: I revised the update when I realised this change makes the wavebar have barely any contrast. Progress bar colours are now white/dark. Still a bit nicer than white/black I think. Ideally the wave bar and progress bar would be styled separately but as far as I am aware this is not the case.
The new progress bar has a little bit more contrast than your mockup, HHM, because I think it looks a tad clearer. However I'm open to further changes so let me know if you'd rather make one of the progress colour the actual highlight colour, as per your mockup, for that seamless look.
Just after I suggested this change for progress bar's colours into light/dark I thought that there may be a contrast problem with both very dark and very light skin colours.
However this seamless look would look amazing with a "safe" (not too dark or light) color pick : - )
Anyways - your skin is already brilliant!
-
Wow, mighty impressive! Tnx for the scroll-bars :)
This is the best v3 skin by far!
There is one issue I noticed - check marks are less and less visible, darker the skin variant is. If it's completely black there is no way to see them in the menus.
Maybe you could add some rules to make them brighter than the color of the skin itself?
Thanks for this, quite an oversight on my part. I guess it's been affecting the radio button check colour all along, as they're defined by colour rather than image. What makes the black example worse is that because of the way the PHP script is generating transparent PNGs, black actually becomes transparent and disappears! I'll implement some sort of brightness checker in the script.
Just after I suggested this change for progress bar's colours into light/dark I thought that there may be a contrast problem with both very dark and very light skin colours.
However this seamless look would look amazing with a "safe" (not too dark or light) color pick : - )
Anyways - your skin is already brilliant!
The seamless look definitely has its merits. I think I'll leave it as it is for now, but if you'd like to change it yourself, you can always open up the skin xml and change the "fg" attribute of the "PlayerFlat.ProgressBar" element to "Highlight".
-
worked like a charm, thx!
is it possible to colour the highlighted element as well?
(http://i.imgur.com/Cu9fdcd.png)
-
worked like a charm, thx!
is it possible to colour the highlighted element as well?
(http://i.imgur.com/Cu9fdcd.png)
Change the "fg" of "PlayerFlat.ProgressButton" to "Highlight"
-
Change the "fg" of "PlayerFlat.ProgressButton" to "Highlight"
yassssssss!!!111 :33333
-
Awesome skin. Not sure if it bothers anyone else but I edited the skin xml so that non-downloaded podcast episodes are not alternating colors.
Changed the line:
<element id="Content[TrackDetail].ListAlternating.Disabled" bg="Bg-High" fg="180,180,180" />
to:
<element id="Content[TrackDetail].ListAlternating.Disabled" bg="Bg-High" fg="120,120,120" />
-
this theme is amazing, great work
-
Hi,
I use DarkMOD skins since the beginning of the project. Unfortunately, the site seems down. Is there any chance of a comeback? I really miss it.
-
Hi,
I use DarkMOD skins since the beginning of the project. Unfortunately, the site seems down. Is there any chance of a comeback? I really miss it.
Howdy, thanks for your post. Looks like my web host is having some technical issues right now and for the last couple of weeks. For now, waiting is the best advice I can give, I'm afraid! I'll keep an eye on the situation and if it persists I'll think about a workaround. Putting the project on Github or sharing it as a python script could be the solution.
-
It seems that we can still access from here: http://web.archive.org/web/20160322200211/http://albertnis.com/php/darkmod/index.html
Unfortunately for me, the color picker isn't visible anymore and I don't understand how it works.
I'm just looking for a blue like the one on page 1 of this thread but "3d78a5" (the default value on the archive site) is a lot different, more turquoise.
Do you remember the color shade of your "default" blue? It would be very helpful.
-
Checked my local version and it's also set as #3D78A5. Do you mean a turquoise like in HHM's posts? I extracted a value of #00AEFF.
I uploaded the site to [edit: removed as host not working here either] . Downloading isn't working as php isn't set up correctly, but have to leave for work now and don't have time to debug! Will get onto it this evening.
-
Kind of a dark turquoise. Doesn't look much like the one in your first post, doesn't look like HHM's skin either.
Screen: http://imgbox.com/OGQdvU8r
It's probably because of archive.org if the default value is the same. Not a big deal, I will just wait for the new site to grab #3D78A5. Thanks for your effort!
-
I recommend using the colour picker in any photo editing software, or even chrome, to sample the colour, should be able to plug it straight back into the site (when it's back up).
-
The address http://albertnis.com/php/darkmod/index.html took too long to respond, according to Google. I really want this theme, any other way I could get it?
-
The address http://albertnis.com/php/darkmod/index.html took too long to respond, according to Google. I really want this theme, any other way I could get it?
Hi there, thanks for your interest! Take a look at the previous comments for more information: TL;DR I'm having some hosting issues and have been for a couple of weeks. Sorry about this, one day I'll be able to afford a rock solid host.
A solution I thought of was porting the generation script from php to JavaScript and hosting it on Github pages or the like. I'm pretty busy with work leading up to Christmas so I can't give it much time just yet, but will put any updates on this thread.
-
OK, so I've sorted out my site and simplified the directory tree a bit. The skin is now available at albertnis.com/darkmod (http://albertnis.com/darkmod/) (I'll put a redirection at the old address). Original post has been updated to suit. Enjoy!
PS I'm pretty keen to make some refinements to DarkMOD as I love this project but haven't found much time for it recently. Hopefully I'll be able to put out an update in the not-too-distant future. ;D
-
feel free to submit the skin to the add-ons page if you wish
-
Thanks again for all your good work, it was working just fine yesterday. Unfortunately, I have an "Internal Server Error" since this morning but it's maybe temporary.
EDIT: Not anymore!
-
Apologies again. I switched server on the host and have been messing around with SSL and setting up the site again. Should be working now (just saw your edit, looks like you're aware!) with the added bonus of https. Cheers for letting me know of issues by the way, it's a huge help :).
-
Version 1.1.0 of the theme is now live, just redownload the theme at the same URL: albertnis.com/darkmod (https://albertnis.com/darkmod/). Thank you for your ongoing support and feedback.
Changes:
- Transferred more icons from DarkRED, notably the consolidated toolbar buttons icons, the currently playing track indicator, and the menu button.
- Removed 1px Windows border.
- A brand spankin' new website! Also the site is now on https (so no one can intercept your secret favourite colour).
A downside of removing the 1px Windows border is that the side grey borders from the skin are more notable when the window is not maximised. Look at the outer edges of the Window alongside the player section on the website preview to see what I mean. It has been mentioned before on this thread and I'm unsure if there is a workaround yet, but if this is a deal-breaker to anyone, let me know and I'll take it on board.
-
Sorry to ask but how can I access to your toolbar icons? I want a toolbar button for settings, unfortunately I don't know the trick.
-
Preferences > Layout (1) > command buttons: > Customise layout
-
Preferences > Layout (1) > command buttons: > Customise layout
Yes, I know that, I have a folder named "Icons" with DarkRED icons, mines are not suited with the theme if you prefer. I'm curious because he said he transferred icons from DarkRED, I guess his icons are customized. Do you know where I can find them?
-
Which icons specifically do you mean? If you're talking about the cog/gear icon I've got on my layout, that's the consolidated toolbar buttons icon. I haven't really done any icon design or customisation - they're designed by Endeavour and taken from his DarkRed skin as you're aware.
-
I'm talking about this: https://i.imgbox.com/Xnc9ZbeH.jpg
Are they DarkRED icons? If yes, I will just airbrush the color with GIMP. :)
-
The side panel icons (at bottom of window) are baked into MusicBee as far as I'm aware. I believe the colour is set by "Panel.StatusBarControl.Default" in the skin file.
The gear icon (at top of window) is "ConsolidateButtonsIcon". This is a DarkRED icon by Endeavour. The one used in the latest version is here (https://i.sli.mg/5Pd7ih.png) (extracted from the skin file and uploaded).
-
the generator is not working any more...
-
the generator is not working any more...
By "generator" I assume you mean the download link, correct?
You might be out of luck as this skin's developer hasn't been on the forum since May of 2017.
-
I'm still here! 8)
Sorry, I reshuffled my website recently and forgot to update this forum. The generator is now at https://darkmod.albertnis.com/ (https://darkmod.albertnis.com/). I've updated the original post too. Apologies for the confusion.
I haven't been actively working on this project but I'm always open to new suggestions.
-
I'm still here! 8)
Sorry, I reshuffled my website recently and forgot to update this forum. The generator is now at https://darkmod.albertnis.com/ (https://darkmod.albertnis.com/). I've updated the original post too. Apologies for the confusion.
I haven't been actively working on this project but I'm always open to new suggestions.
Link isn't working
-
Sorry about this. My old hosting provider is being a bit weird. This morning I've whipped up a quick and dirty JavaScript port of DarkMOD which is being hosted statically at https://darkmod.netlify.com/ (https://darkmod.netlify.com/). Seems to work the same as the old PHP version as far as I can tell, but let me know if there are any bugs.
DarkMOD is open source, available at https://github.com/albertnis/darkmod-js (https://github.com/albertnis/darkmod-js).
-
This is awesome!!!! I love how we can choose a color of our liking!!!! Is there something similar for other skins?
-
This is awesome!!!! I love how we can choose a color of our liking!!!! Is there something similar for other skins?
I haven't seen anything too similar. Feel free to work on something similar, though! I've open-sourced the current Javascript version: https://github.com/albertnis/darkmod-js (https://github.com/albertnis/darkmod-js)