Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Dirhael]

Modern Cards: Dark Edition

Update 2016-01-26: * 2016.01.25: Fixed issue with window close/max/restore/min buttons when using skin scaling.

Update 2015-09-20: Many more image assets for the scaling functionality added. Finally ready for a release, after several delays due to RL. There are still a few images that needs updating, but it's certainly usable by now. I've also changed the look of many of the buttons in the skin to better match up with Windows 10.

Update 2015-08-10: The skin now offers different window close/max/min/restore buttons depending on what OS you're installing it on. In this release it detects Windows 8, Windows 10 and OSX Yosemite. Any other operating systems will get the Windows 10 buttons, at least for now. Ubuntu support will be coming in a future update. This feature means that you now need JRiver Media Center 20.0.118 or above to use the skin. If you're using earlier versions of MC, do not install this skin.

Several people have asked for a dark version of my Modern Cards skin for JRiver Media Center, so I finally got around making it. This is the first public release of it, so there will be some updates in the future. This time the skin only includes window buttons for Windows 10, but I will eventually add more for both OSX and earlier Windows versions. I still consider this a beta, but it's at least as usable as my original Modern Cards skin was, probably more so seeing as I've skinned more elements this time around. I've also redesigned almost all of the original MC internal web pages, since I didn't think they fit my skin.

Note to beta testers: The skin folder name have changed in this release, so after installing be sure to select the new version from your skin menu after installing.



[Download from DeviantArt]

INSTALLATION

     Unzip the entire content of the zip file to your MC folder. By default this folder can be located in "C:\Program Files (x86)\J River". If you don't want custom icons etc. then just skip the "data" folder.


The original Modern Cards skin

2014.09.19 - Update 8: Added "active" playerbar button colors (by request).
2014.09.18 - Update 7: Added DSP-direct button highlighting.
2014.08.28 - Update 6: New release with several different window decorations & playerbar styles (Windows 8, Ubuntu & OSX). Thanks to "Awesome Donkey" for his feedback & help!
2014.05.07 - Update 5: Started work on customized action window icons.
2014.05.07 - Update 4: Flatter look for custom sidebar icons, a bit more in line with Windows 8 Modern UI (no new icons added yet).
2014.05.05 - Update 3: Fixed broken DSP-direct button.
2014.05.01 - Update 2: Added a new duo-toned version of the skin, with a dark player- and bottom bar. Also tweaked the scroll-bar handles in the original bright version.
2013.09.14 - Update 1: This is just a quick bugfix update. The "repeat off" button was missing, and the "dsp off/direct" button was un-skinned. Those issues are now resolved.


Hello everyone!

     A while back I released a standard view skin for MC called Brighter Days. It was a work-in-progress, but after a while I decided I wanted something a bit "cleaner". I scrapped a lot of the old skin elements, and it eventually evolved to what I'm releasing today. "Modern Cards" is a simple theme for JRiver Media Center 18+, inspired in part by Google Now's Card UI, Microsoft Office 365 and Windows 8 (hence the name).

     This time I'm using GitHub while "developing" the skin, so if I simply can't find the time to work on it anymore (work takes up most of my weeks after all...), I'll make the repo public with access to all PSD's etc. so that anyone can modify, tweak or fork it into something completely new, if they wish. The same applies if I at some point feel "finished" with the theme.

With that out of the way, here's a preview image and download links



[Download from DeviantArt]

Please post here or over at DA if you encounter any bugs, or have feedback.

INSTALLATION

     Unzip the entire content of the zip file to your MC folder. By default this folder can be located in "C:\Program Files (x86)\J River". If you don't want custom icons etc. then just skip the "data" folder.


Hope some of you will enjoy it, and if you have any feedback I'd love to hear from you!

[InflatableMouse]

It looks nice, thank you.

I may give it a try later this week.

[Dirhael]

It looks nice, thank you.

I may give it a try later this week.

Thanks for testing, hope you'll enjoy it!

[Dirhael]

Just added a new version of the skin, with a dark player- and bottom bar (and other tweaks and changes here and there) as requested by a user over at deviantART. I'd love some feedback if you encounter and problems/bugs, or have suggestions

[kurushi]

Very nice skin feat very well with my custom visual style thx!

[InflatableMouse]

The DSP icon shows twice, once grey and once (half) orange. Mousing over them they sort of jump around.

Looks nice and clean otherwise!

[Dirhael]

The DSP icon shows twice, once grey and once (half) orange. Mousing over them they sort of jump around.

Looks nice and clean otherwise!

Thanks for the feedback, it's a broken setting in the skins main.xml file that causes this. Thought I fixed this way back when, but apparently I somehow reverted it again  Just fixed- and uploaded a copy to DA.

[Dirhael]

Just posted an update with some icon changes and additions. The sidebar icons are now flat, and I've started working on customizing the action window icons.

[)p(]

I think the new duo-toned version is even nicer then the older one. Great work, the older version has been my skin of choice since its first release. Thanks!
(ps any chance you will enhance it to cover theater view as-well?)

[Dirhael]

I think the new duo-toned version is even nicer then the older one. Great work, the older version has been my skin of choice since its first release. Thanks!
(ps any chance you will enhance it to cover theater view as-well?)

Thank you, happy to hear you like the updated skin As for covering the theater view, well... I'd love to do it, but I have no experience skinning that mode as of yet. I'll certainly look into it, but if it happens then it'll probably take a while.

[Amadan]

I like the dark version very much. Already the first version of "Modern Cards" was my favourite skin
Thx,
Stefan

[jimm2]

Hey, very nice work. Don't see much skin activity these days so thanks for sharing.   

[Dirhael]

I like the dark version very much. Already the first version of "Modern Cards" was my favourite skin
Thx,
Stefan

Hey, very nice work. Don't see much skin activity these days so thanks for sharing.  

Happy to hear you're both enjoying the skin, hearing people using it makes the time I've used creating the skin feel well spent

[Awesome Donkey]

I love this skin, good work! Personally for me and my library I made a little modification to it, adding Windows 8.1's minimize/maximize/restore/buttons in the place of the ones included with the skin - it looks pretty good and looks native with Windows 8.1 now.

One observation though, the bluish highlight when using the due-toned skin, wouldn't it look better as a darker color, like grey?

[theoctavist]

I love this skin, good work! Personally for me and my library I made a little modification to it, adding Windows 8.1's minimize/maximize/restore/buttons in the place of the ones included with the skin - it looks pretty good and looks native with Windows 8.1 now.

One observation though, the bluish highlight when using the due-toned skin, wouldn't it look better as a darker color, like grey?

id love to have the link to that one....i have 8.1

[BryanC]

The Modern Skin Duo is probably up there in Noire IMO, aka heads and tails above the rest.

I do have one small suggestion: it would help if the search box was delineated slightly.

[Dirhael]

I love this skin, good work! Personally for me and my library I made a little modification to it, adding Windows 8.1's minimize/maximize/restore/buttons in the place of the ones included with the skin - it looks pretty good and looks native with Windows 8.1 now.

One observation though, the bluish highlight when using the due-toned skin, wouldn't it look better as a darker color, like grey?

A grey "color" works, I've already added it in my local dev version of the skin. As for it being darker, that I don't like as it makes the column separator lines to noticeable. That said, here's the PSD for that part, just change it to whatever color you want: http://www.thesecondscreen.com/uploads/List_Selection.psd

The Modern Skin Duo is probably up there in Noire IMO, aka heads and tails above the rest.

I do have one small suggestion: it would help if the search box was delineated slightly.

Hmm... I'll play around with it and see if I like it

Happy to hear you both like the skin, keep the suggestions coming!

[BryanC]

Happy to hear you both like the skin, keep the suggestions coming!

Alright, you asked for it 

I use the duo-toned version and it seems to me like the color of the status bar and window have a bluish tint mixed with the grey? Any way that it can just be a dark grey or maybe a flat black? The current color makes my LCD TV look washed out (it doesn't display blacks well to begin with, so it needs all the help it can get). I'm also having trouble blending the windows taskbar color with the color you've chosen for the theme (so th status bar and windows taskbar appear seamless).

Is there an easy way to modify this myself (if you don't want to change it).

[Dirhael]

Alright, you asked for it  

I use the duo-toned version and it seems to me like the color of the status bar and window have a bluish tint mixed with the grey? Any way that it can just be a dark grey or maybe a flat black? The current color makes my LCD TV look washed out (it doesn't display blacks well to begin with, so it needs all the help it can get). I'm also having trouble blending the windows taskbar color with the color you've chosen for the theme (so th status bar and windows taskbar appear seamless).

Is there an easy way to modify this myself (if you don't want to change it).

That would be because is does have a blue tint It probably looks a bit different on different screens, I myself use a "pro" (wide-gamut) monitor so the thought never crossed my mind that it could look strange on other screens. I'll consider it when I get time to work on the skin again ('though I personally prefer if with the blue tint), but for now I've edited the files for you:
http://thesecondscreen.com/uploads/MainFrame_BottomBorder.png
http://thesecondscreen.com/uploads/MainFrame_TopBorder.png

Just download them, and overwrite the existing files in the skin folder The background is a dark gray #111111 (RGB: 17,17,17) and the faint borders are pure black. If you need it even darker, just fill the images in your favorite editor with black.

[Awesome Donkey]

One suggestion I have would be to add little arrows so we can collapse/expanding open the tree (like Noire and other skins have with the two little arrows) otherwise collapsing/expanding open the tree can be hard to do with the all-white.

Also if you're interested in the Windows 8.1 buttons, I've added them to this post.

[Dirhael]

One suggestion I have would be to add little arrows so we can collapse/expanding open the tree (like Noire and other skins have with the two little arrows) otherwise collapsing/expanding open the tree can be hard to do with the all-white.

Also if you're interested in the Windows 8.1 buttons, I've added them to this post.

That's one thing I'm not about to change. I really, really dislike the over-sized border you get when implementing that. That was actually one of the main reasons I started doing skins for this application, I just thought (and still think) thick borders/separators looks bad. That said, if there's any way to do that in form of a button or something like that I'll add it in asap

As for Win8-styled buttons, I tried that around the time I started with the skin, and at the time decided against it. My main reason being that it probably will look (even more) out of place on OSX/Linux. If I ever make separate versions for the different OS versions of MC, I may implement it

[Awesome Donkey]

Ooooh, Duo with Ubuntu Ambiance buttons would look pretty native and AMAZING. Are you interested in the Ambiance and Radiance theme buttons from Ubuntu? I can upload them!

[Dirhael]

Ooooh, Duo with Ubuntu Ambiance buttons would look pretty native and AMAZING. Are you interested in the Ambiance and Radiance theme buttons from Ubuntu? I can upload them!

I'm certainly open to checking out how it would look I'm also thinking that if I do this, I'll adjust colors of other parts of the skin to match as well and have available as a choice in the skin menu.

[Awesome Donkey]

Alright, uploaded! I might install Debian in a VM and try to grab the GNOME 3 buttons too. Also this would look great on OS X Yosemite too with its flat design! I'll try to grab its buttons too.

[Dirhael]

Alright, uploaded! I might install Debian in a VM and try to grab the GNOME 3 buttons too. Also this would look great on OS X Yosemite too with its flat design! I'll try to grab its buttons too.

Thanks for the buttons, saves me from installing yet another OS As for GNOME 3, no need. I'm already dual-booting Arch Linux running GNOME 3. I also have Yosemite installed on my Macbook, so that shouldn't be a problem either. That said, if you do it for me then I'd certainly save some time

[Awesome Donkey]

I'll have a go at it. As for Windows 7 and OS X Mavericks, fortunately those buttons are already available with the Noire skin... but in my opinion kinda pointless to use at this point, honestly.

[Awesome Donkey]

Here's another Linux display manager taken care of, Xfce 4.

[Dirhael]

Ok, so I've started implementing custom buttons for Windows 8.x and Ubuntu so far. Do note that this is not yet finalized, but I'll most likely add it in my next release of the skin.

Windows 8.1:


Ubuntu:

[Awesome Donkey]

Looking good! I haven't found where GNOME 3 hides its icons yet (been looking in /usr/share/themes for them) and I'll try Yosemite tomorrow. The bad thing about Ubuntu (both Ambiance and Radiance themes) I'm thinking is its use of gradients.

Ambiance:



Radiance:

[mwillems]

Looking good! I haven't found where GNOME 3 hides its icons yet (been looking in /usr/share/themes for them)

They're in usr/share/icons/  on my systems.

[Dirhael]

Yeah, gradients like that I don't think I'll implement. It ruins the flat concept of the skin. Perhaps a compromise with a more subdued gradient than the native Ubuntu one...'though, I have to say, I don't really like that either:

[Awesome Donkey]

That actually looks pretty good to me.

[Dirhael]

Looks good to me actually.

Hmmm, I'll have to tweak it a bit and see what I end up with. Then again, if it's supposed to fit in with the rest of Ubuntu then I probably can't avoid a gradient completely...and it won't affect the other versions anyway, sooo...

[Awesome Donkey]

Looking at GNOME 3, it looks like there's only a close button available but I'll keep looking.

EDIT: Okay, looks like there's no source window button images for the default GNOME 3 theme. Instead it's controlled/created by metacity-theme-3.xml so GNOME 3 might be a dead end or at the very least, a pain to screenshot the buttons (err, close button in this case) and edit them for use. It may not matter though, at it looks like Debian is going to go with Xfce.

[mwillems]

Looking at GNOME 3, it looks like there's only a close button available but I'll keep looking.

EDIT: Okay, looks like there's no source window button images for the default GNOME 3 theme. Instead it's controlled/created by metacity-theme-3.xml so GNOME 3 might be a dead end or at the very least, a pain to screenshot the buttons (err, close button in this case) and edit them for use. It may not matter though, at it looks like Debian is going to go with Xfce.

I have a gnome minimize icon at /usr/share/icons/gnome/scalable/actions/window-minimize-symbolic.svg and a maximize right next to it; if you don't have one, let me know and I'll try and upload.

[Awesome Donkey]

I figured out to to get GNOME 3 to show the minimize and maximize/restore buttons in addition to the close button. I've now proceeded to do things the hard way with screenshots which I'll grab the buttons out of.

EDIT: Okay, got the GNOME 3 window buttons ready. Keep in mind I didn't remove the gradients from these buttons, as they're probably needed to look correctly. If needed, I can remove the gradients.

[BryanC]

That would be because is does have a blue tint It probably looks a bit different on different screens, I myself use a "pro" (wide-gamut) monitor so the thought never crossed my mind that it could look strange on other screens. I'll consider it when I get time to work on the skin again ('though I personally prefer if with the blue tint), but for now I've edited the files for you:
http://thesecondscreen.com/uploads/MainFrame_BottomBorder.png
http://thesecondscreen.com/uploads/MainFrame_TopBorder.png

Just download them, and overwrite the existing files in the skin folder The background is a dark gray #111111 (RGB: 17,17,17) and the faint borders are pure black. If you need it even darker, just fill the images in your favorite editor with black.

Thanks!

[Awesome Donkey]

GNOME 3 window buttons without gradients attached! Working on OS X Yosemite now!

[Awesome Donkey]

Finally, OS X Yosemite window buttons. I believe these will work perfectly in Noire too - I'll test that in a few mins.

EDIT: Antialiasing is screwed up, so they don't look right.

[Dirhael]

Thanks for posting all these buttons, saves me quite some time having to install several VM's I doubt I'll be able to add a choice of all of them for the next release, as I'll have to change several parts of the skin to match the different operating systems and/or window managers. I expect to have Windows 8 (more or less done), Ubuntu (close to done) & Yosemite (not started yet) added for the next version. I'm not going to change things such as dialogue buttons etc. though, as it takes up time for very little gain. Also, the skin was never supposed to look fully native in any case.

[Awesome Donkey]

Nice!

Sadly the Yosemite buttons I posted won't work. *sighs* I'll have to see if Apple has the source window button images stashed somewhere in OS X.

EDIT: Found SVGs for the stoplight window buttons for Mac OS X Yosemite. Working on it now!

[Dirhael]

EDIT: Found SVGs for the stoplight window buttons for Mac OS X Yosemite. Working on it now!

Sounds good If you'd like to test the Ubuntu version of the skin, I've attached it to this post. Let me know how it works in Ubuntu for you?

EDIT: Removed attachment, as it's not yet finalized but will be released within the coming week or so.

[Awesome Donkey]

SVGs for Yosemite are a no-go too it seems. Slightly wrong colors and no restore buttons from Yosemite. *sighs*

Anyways testing the skin in Ubuntu (had to gain rights to /usr/lib/JRiver and its subdirectories to install the skin) I found the play buttons and whatnot won't load correctly. When testing the skin on Windows they show fine and I must say the skin looks beautiful, even on Windows.

EDIT: I'm getting closer with the Yosemite buttons. Actually got the correct colors now.

[Awesome Donkey]

Okay. I think I've finally come close enough with Yosemite's stoplight window buttons. I tested these by using them in Noire in MC19 on Yosemite.

[Dirhael]

Anyways testing the skin in Ubuntu (had to gain rights to /usr/lib/JRiver and its subdirectories to install the skin) I found the play buttons and whatnot won't load correctly. When testing the skin on Windows they show fine and I must say the skin looks beautiful, even on Windows.

Try re-downloading. I've attached an updated version that should work better.

[Awesome Donkey]

Okay, looks perfect now in Ubuntu!

Also, I've fixed the restore button to properly work in the Yosemite button pack. This should be the final version of these and they should be good to go.

Finally, I might of found an issue with the main white skin on Windows 8.1. I have the Run Auto-Import Now icon added to my toolbar to the right of the Help menu. When I hover my mouse over the icon, it goes white (or an off-white, not sure) and isn't seen easily. Shouldn't the hover color be the orange color like all other buttons have already? Look at the normal and hover images attached.

[Dirhael]

Okay, looks perfect now in Ubuntu!

Also, I've fixed the restore button to properly work in the Yosemite button pack. This should be the final version of these and they should be good to go.

Finally, I might of found an issue with the main white skin on Windows 8.1. I have the Run Auto-Import Now icon added to my toolbar to the right of the Help menu. When I hover my mouse over the icon, it goes white (or an off-white, not sure) and isn't seen easily. Shouldn't the hover color be the orange color like all other buttons have already? Look at the normal and hover images attached.

Happy to hear it's fixed When starting out with the skin, I didn't take into account that most (all?) *nix file systems are case sensitive, so...that happened

As for the bug you reported, I've fixed it. I never have custom shortcuts in the top toolbar, I always use the bottom one so I didn't notice it. Will be included in the next release, but until then you can download this file: SmallIcons.png
Just overwrite the existing one in your "Media Center 20\Data\Custom Art" folder.

[Awesome Donkey]

Works good! It even fixed the button in Duo too from being white instead of orange.

The only other potential issue I've noticed is a little white patch towards the end of the volume slider at full volume - shows up in all versions of the skin;

[Dirhael]

Works good! It even fixed the button in Duo too from being white instead of orange.

The only other potential issue I've noticed is a little white patch towards the end of the volume slider at full volume - shows up in all versions of the skin;

Windows, Linux or both? I can't replicate on Windows, so I'm guessing Linux?

[Awesome Donkey]

Windows but I'll check Linux too. I have a few ideas why this is happening, I'll report back when I can!