Print

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

[Jappie]

I like to share a 'Standard View' skin. I tried to submit the skin but I am unable to login. So, I decided to publish it using this forum. Anyone: feel free to use it.
About the skin: it's based on Modern Cards Dark, Black on Black, Windows (dark theme) and Tidal. I tested on Windows 10 Pro, Windows Display resolution: 1920x1080 (Size 150%), 3840x2160 (Size 250% and 300%), JRiver MC32, Font Segoe UI 10 pt and larger. Skin sizing from 50% to 400% without problems (exempt navigation issues above 200% of course).
I used the skin for the past month and it works well. No suprise: it's my default skin now...

[marko]

First impressions are positive. Attention to detail is very high indeed, and, I've a fair idea how much time this will have taken. Really enjoying the "seamless" approach you have taken with this. Very good. I'll run with it a few days, see if I can break it

I probably won't use it as-is full-time though because in some places, such as the tag window, the high black/white contrast is just too much for me.

[comox]

Thank you! Looks very promising. I will test drive for a few days.

[Jappie]

First impressions are positive. Attention to detail is very high indeed, and, I've a fair idea how much time this will have taken. Really enjoying the "seamless" approach you have taken with this. Very good. I'll run with it a few days, see if I can break it

I probably won't use it as-is full-time though because in some places, such as the tag window, the high black/white contrast is just too much for me.

Hello Marko,
thanks for your response!
On March 1, I started editing an existing Skin. Just for fun. It's great to have a 'skinable' program and being able to change the looks (retired Webdesigner). I spend about 3 weeks learning, editing, testing (and repeating all that), resulting in a complete Skin. Complete? I hope so. Media Center is very complex, so many windows and views.

I am willing to make changes and of course correct errors, if any are discovered. I do not use every feature of Media Center so it's easy to miss something.

You mentioned:
"... in some places, such as the tag window, the high black/white contrast is just too much for me."
Could you explain more? Is it about Text-color? There are 2 editors, the 'modern' and the 'legacy' editor. The 'legacy editor' has different (darker white) text-colors. The 'modern' Tag-window is the only one with real white (#ffffff) Text.
Of course there was a reason for 'real white'. It's about focus and attention. Opening the Tag-window is kind of special. White Text will draw your attention from a List-item to the Tag-window.
I admit I like the text-colors of the 'legacy' editor more...

[Jappie]

Update Easy Grey version 1.1

I made some changes, and created a new version of the Skin: Easy Grey version 1.1.
I put the version-number in the main.xml (About...), not in the Skin Name itself.
Changes:
1. Rating stars: I forgot about them because I never use them. They were still in color. Changed that to greyscale to match the 'mood' of the skin.
2. Increased the 'Status Text', above the progress bar. The Rating Stars looked bad next to the (very small) 'Status Text'. Those Rating Stars... Well, if anyone wants to use them: they are ready.
3. Changed the modern TAG Window Text color (very white). Less shining, more compatible with other text-colors. (Thanks: Marco)

------------------------------------------------------------------------------------------------------------
Update Skin Easy Grey version 1.2

A new version of the Skin: Easy Grey version 1.2.
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Many small improvements. Seventeen images updated, sometimes just a pixel, some changes in background color and margins.
Examples:
1. Modern TAG Window: different background, improved text-color, it looks more compact, like an editor.
2. Action Window and Display window: removed many margins to get a clean look. An image in 'Display' fits perfectly, no top or bottom-line. Very nice view when you select: 3D Visualization: Oscilloscoop. See attached Printscreen.
3. Tree-menu: All background color-bars (mouse-over) perfectly sized and aligned with Tag-, Display- and Action-titlebars. All with 1 pixel between them vertically. Issues about 1 pixel? Yes, indeed.
4. Very small changes in the Viewheader. Horizontal aligning of color-bars (Tabs and Playing Now background), vertical dark lines between Tabs. One pixel line below the Tab-title. A new Tab shows the real background color of the main List-area.
5. Search menu: It looked nice with rounded corners but the same Search menu shows on different places. One left, below the Tree-menu, whenever the Tag-window is active, can stretch as wide as the Tag-window. Rounded corners start to look messy. Not acceptable. Rectangular looks better.

------------------------------------------------------------------------------------------------------------
Update: Easy Grey version 1.3
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. Playerbar_Search.png: stretching was not working properly. Changed Code. Now everything stays pixelperfect.
2. Updated Icons:
- SmallIcons.png, Options.png, ActionBarNavigation.png: a few new Icons. Added a transparent border. This slightly reduces Icon display-size and gives them some 'air' in Tree-menu and Options windows. Yes, it took some ingenuity with Photoshop actionscripts to automate Icon-size changes
Action-bar Icons were grey, now back to original colors.
3. Frame_Spotlight.png: changed design and changed size. Image was not so square at large Skin sizes (200+).
4. minor changes, not worth mentioning.

Testing: I have a 55 inch LG Oled. Never used it at 3840x2160 resolution and 100% size (Windows-setting). 100% makes text very small... My eyes are usually 2.00 meters (78 inch) away with a Windows-setting of 300%. With 100% I needed to get up close: 70 centimeter (27 inch). Anything for a test... It was nice to play with Font-size and Skin-size. Font 8pt and Skin 400% looks good! Mainframe borders and images stay perfect. Set font to 8pt and Skin 200% and enjoy editing your database. Impressive.

------------------------------------------------------------------------------------------------------------
Learned about better organizing all the Skin-information on the forum. Thanks: SkGe

------------------------------------------------------------------------------------------------------------

Update: Easy Grey version 1.4
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. Update Player Control-buttons. Re-created the buttons,just a tiny bit different: thicker lines, the buttons gained weight. Most important: at some skin-sizes the vertical/horizontal lines are pixel-sharp ('hard lines'). Typical: Windows resolution 1920x1080, size 100%, Skin-size 150% (or Windows size 150% and Skin-size 100%): Player buttons are really sharp-edged.
2. MainFrame with the rounded corners kept me busy. At small Skin-sizes (50%, 60%), the corners looked bad. Improved images and xml-coding.
3. Frames of popup-windows (Options) with border and rounded corners also had problems with small Skin-sizes (50%, 60%): right-border disappeared. In the end: removed rounded corners. Just a 1 pixel border remains. (and disappears again as soon as the popup-windows go 'overboard' and the 'maximize' has to jump in to cure the issue...)
4. Some things are not possible: the button to Maximize the mainframe-window (Frame_FullScreenArrowsExpand), is very close to the horizontal Slider (adjust thumbnail-size). I can change that but at larger Skin-sizes (150% +) the maximize-button gets distorted (not square).
5. Put the 'old' (but improved) Spotlight-button back.
6. Some minor changes, and xml-code cleaning/updating. 26 images changed.

I am happy with the current 'state'. For me this Skin is about limiting distractions and placing the most important assets at the center: video/audio/images. Album Art is visually essential and database-selections should be clear and helpful. And yes, I like clean, well-made icons and 'skin-Art'.

------------------------------------------------------------------------------------------------------------
Update: Easy Grey version 1.5
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. The MainFrame with the rounded corners is not looking good at small skin-sizes (50% - 80%). Not acceptable. Kept me busy for some hours. In the end: replaced it with a rectangular field, one color.
This is quite a change, unfortunately. Well, it does make the layout-elements more consistent in the design.
2. minor changes.

That's it. Don't know what else to do. Maybe (re)create some icons?
Version 1 is ready?

------------------------------------------------------------------------------------------------------------
Update Easy Grey version 1.6
I put the version-number in the main.xml (About...), not in the Skin Name itself.

Update notes:
1. The MainFrame with the rounded corners is not coming back despite experiments with special coding (... BorderMaximized). Below Skin-size 100% Mainframe_LeftBorder and Mainframe_RightBorder do not resize equal compared to Top- and BottomBorder.
2. Minor improvement of a few Player Control-buttons.
3. SmallIcons: All colored Icons (150) are back. Video/Audio/Images: no grey Icons anymore.
4. Some code cleanup.

That's it. Maybe (re)create some icons in the future..

[markf2748]

Hello @Jappie,

Thanks for posting so much impressive work.  In version 1.1 I liked your Player-Control buttons (similar to Modern Cards: Dark), but the appearance was somewhat lacking in quality and I didn't find the size I wanted.  I see in the notes for version 1.4 you have now improved them.

Inspired by v1.1, I worked up a variation for use with my modified Dark on Dark skin.  I simplified the PlayerBar_PrevButton and PlayerBar_NextButton to resemble their minimalist Segoe Fluent Icon font counterparts (Previous, Next, unicode points e892, e893).  Also added suggestive bright colors during mouseover as well as a slight size expansion during mouseover for additional clarity and a little fun factor.  I use them at Windows Scale 100% and MC Size 100% on a 1920x1200 monitor.  Files are attached in case you are curious. 

[Jappie]

Hello Mark,

nice to see some colors and experiments!
I admit I do like to play with existing styles/images and see if I can make it more useful (size, sharpness) and interesting. My latest Player-buttons work very wel for sharpness. At 50%, 100%, 150% and 200% skinsize the buttons are very sharp. Separate button-images like 1x, 1.5x, 2x, do not help. Just found out... Learning and editing.
Easy Grey v 1.5 is out. Maybe last one for the time being.

[Awesome Donkey]

It's a pretty interesting skin, I like that it has a little more modern look compared to the Modern Cards: Dark Edition skin. It better fits Windows 11's aesthetic, IMO. Great work!

If I get some time, I might make a modification to the skin for my use by adding semi-transparency using the glass skin support MC has. You can (mostly) simulate the Acrylic/Mica aesthetic found in Windows 11 for example, and it looks rather nice when used in MC. Also might add rounded corners when the window isn't maximized, thanks to Matt adding support for that in skins. Both makes MC look more native, IMO.

[Jappie]

That's how I started 'skinning': making just a few modifications to an existing Skin. It's nice to be (cap)able to do this.
Interesting the ''glass skin support MC has", something like in Black On Black and Noir Glass? Looking forward to see something new. I think Easy Grey is a nice clean, pure basic Skin waiting to get a new make-over
Rounded corners support? Like to know more about that. I was not so lucky with my experiments. The 50%-80% Skin-sizes had issues (version 1.3 and 1.4). I miss a touch of 'round'.

[Awesome Donkey]

Interesting the ''glass skin support MC has", something like in Black On Black and Noir Glass?

Kinda. I did it with some forks of the Modern Cards skins: https://yabb.jriver.com/interact/index.php/topic,106397.msg841878.html#msg841878

You'll notice in the screenshots that the frame (especially the top part of the window) is semi-transparent with a Acrylic/Mica type of effect that better fits Windows 11. I've actually done some more small improvements since releasing those. I guess I should get around to doing that at some point.

Rounded corners support? Like to know more about that. I was not so lucky with my experiments.

Something that Matt added so when MC is windowed, it'll have rounded corners. If it's maximized it has straight/full corners so a maximized MC won't have rounded corners. This is part of the main.xml...

Code: [Select]

<MAINFRAME>
<Data MinimumWidth="800" MinimumHeight="600" />

<Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" />
<Entry Name="RightBorder" Bitmap="MainFrame_RightBorder.png" Rows="24,?-Flex" />

<!-- NOTE: This part makes up the entire top part of the player window (background for the menu, prev-play-next buttons, song title etc.) -->
<Entry Name="TopBorder" Bitmap="MainFrame_TopBorder.png" Columns="200,?-Flex,200" Rows="?-Flex,31" Cells="B1-Tile,B2-Tile,B3-Tile" />
<Entry Name="TopBorderMaximized" Bitmap="MainFrame_TopBorderMaximized.png" Columns="200,?-Flex,200" Rows="?-Flex,31" Cells="B1-Tile,B2-Tile,B3-Tile" />

<!-- NOTE: The larger bottom border of the window, which contains the status bar etc. -->
<Entry Name="BottomBorder" Bitmap="MainFrame_BottomBorder.png" Columns="23,?-Flex,23" Cells="A2-Tile " />
<Entry Name="BottomBorderMaximized" Bitmap="MainFrame_BottomBorderMaximized.png" Columns="23,?-Flex,23" Cells="A2-Tile " />
...
You get the idea.

[Jappie]

You'll notice in the screenshots that the frame (especially the top part of the window) is semi-transparent with a Acrylic/Mica type of effect that better fits Windows 11. I've actually done some more small improvements since releasing those. I guess I should get around to doing that at some point.

Just installed the ModernCards Acrylic Dark. Tree+Tabs seem to float, very nice. Clear systematic layout with a touch of some colors.

Something that Matt added so when MC is windowed, it'll have rounded corners. If it's maximized it has straight/full corners so a maximized MC won't have rounded corners. This is part of the main.xml...

Ahh, there is an extra Entry: TopBorderMaximized and BottomBorderMaximized. And there is a difference between Maximized vs Windowed? I shall try again with the new Entries. Thanks for the Code!
Maybe there is an issue with resizing below Skin-size 100%. The Left- and RightBorder resize. The Top-and BottomBorder do not resize the same amount. And I designed the border inside ALL Mainframe-borders...

[EnglishTiger]

As others have said your Easy Grey Skin is far superior to the ModernCards Dark Skin.
I like the fact that you have done something nobody, including me, has never tried to do before - Moving away from using the Font Weights that use the "Normal HTML Values"
Unfortunately I have spotted a few Changes/Edits you probably should not not have made: -

Positioning of Close, Min, Max & Resize buttons on the Mac.
Those buttons are all exactly the same size and, hopefully, should be evenly spaced on the Toolbar.
However the original OffsetX positions for those 3 buttons in the ModernCards Dark Skin were 7(Close), 26(Min) & 45(Max/Restore) with a gap of 19 units between each position
But you altered them to 9(Close), 26(Min) and 52(Max/Restore) resulting in 17 units between the Close and Min Buttons but 26 units between the Min and Max/Restore.
You need to either reduce the OffsetX position for the Max/Restore buttons to 43 or reinstate their original OffsetX and OfssetY values.

It looks like you may have misunderstood how MC uses the PlayerBar Display items WaveformBarA and WaveformBarB.
WaveformBarA is the colour for the unplayed part of the track -  WaveformBarB is the colour for the played part - by setting them both to the same colour "333333" you have made it impossible for the user to follow/monitor the tracks progress.

By using similar icons for PlayerBar_DSPButton.png and PlayerBar_DSPDirectButton.png you have made it impossible for the user to spot if MC is in Normal lor DSP Direct Mode.

By hiding the Splitter Bar Arrows you have made it harder for the User to use them to hide/reveal the Tree and the Upper and Lower panels that normally appear to the right of the Tree in Playing Now.

In one or two of your postings you have mentioned problems when setting the screen size below 100%.
MC is notorious for "Discolouring" Light/Small Fonts, especially if Segeo UI is the Font being used plus setting your skin below 100% makes a lot of the text hard to read when sitting less than 1 metre from the screen.
Since the vast majority of users are probably never set the Screen Size below 100% I believe you cans safely ignore any weirdness that happens only when the screen size is less than 100%.

In another posting you mentioned "Separate button-images like 1x, 1.5x, 2x, do not help".
The buttons in the Black on Black Skin contain a lot of detail which means they have to be created at a size larger than that used for the 1x buttons in the ModernCards Dark Skin.
So for every instruction in that Skins main.xml there has to be a "Scale=" instruction present when those buttons are used.
But, unlike with the all the ModernCards Skins there are no 1.5x, 2x, etc. Images.
Plus if you open any ModernCards Skin Folder in Windows Explorer in Details View you should spot that not all those images that have 1.5x, 2x, etc. images have the same number of Additional Images.
A lot of those 1.5x, 2x, etc images look like they were created by opening the 1x image in an Image Editor and resizing them.

The 1st of the 3 attached images is of your Easy Grey skin at 150% and reveals the problem with the Player Bar Waveform.
The 2nd is of a modified Easy Grey skin at 150% with a corrected Player Bar Waveform, visible arrows on the Splitter Bars and a blue PlayerBar_DSPDirectButton
The 3rd is the same modified Easy Grey skin at 100% with a corrected Player Bar Waveform but without that "horrible red halo" around the open tag in the Tag Window.

Instead of using the main.xml from the ModernCards Dark Skin I used the one from the ET Black Card II Skin, which has a more logical layout, no redundant/unnecessary code, is fully notated, has been modified to cater for every change to Standard Skins that has been implemented. Other than the changes already mentioned there isn't single 1.5x, 2x, etc. image I resized your TagWindow_Field.png and TagWindow_FieldLabel.png images to get rid of the need to "Scale" them.

The attached "modified version of your skin" is currently named "ET Easy Grey", if you download it and find it a better "template" simply remove the "ET " prefix from both the Skins Folder Name and from the Skin Name in the main.xml.

[Awesome Donkey]

And there is a difference between Maximized vs Windowed?

Yes, on Windows 11 windowed apps (e.g. File Explorer) have rounded corners and I wanted to simulate that in MC. Previously if you use rounded corners, MC would use rounded corners when the window was maximized, so it didn't look good. Thankfully Matt added support for that with the addition of TopBorderMaximized and BottomBorderMaximized. You can now simulate rounded corners when windowed, but straight/full corners when maximized.

The Acrylic skins are pretty old now, they were superseded with the Mica versions with slight tweaks/changes like rounded corners in the years since first release. The only gotcha is I can't reproduce the Mica (or previously the Acrylic) semi-transparency effect in Photoshop. I came as close as I could, but there's no Photoshop templates or examples or anything like that to aid in simulating the Mica light and dark semi-transparency.

Here, if you want to look at the current Mica skins to poke around and play with for ideas (and see rounded corners in action), feel free: https://www.mediafire.com/file/qbzmuuflqa6gmxi/ModernCardsMicaSkins.zip/file

[Jappie]

Hello EnglishTiger,
What an incredible surprise I got this evening! I am exited, thrilled, flabbergasted, moved to tears, and lost for words, my english vocabulary is limited! Thank you. What a great job you did. A complete code-correct, up-to-date main.xml and lots of good looking images. I like the comments in the main.xml. Very informative.

You nailed it with all the errors and mistakes that were still present. I expected to need several weeks to check every issue... Yes, those WaveformBars, it made me grin. Just an extra color. Yes, the DSP-button. I wanted to recreate that. There are more buttons that need improving. The first version of the Skin had a 2px border. Because of that I decided to mess with the positioning of the window-buttons (Minimize, Maximize etc.). Leaving a 'loose' end. I did discover an image with minor-error (Button not centered properly: Maximize.png).
The 1x, 1.5x, 2x subject was mainly aimed at the Player Control-buttons: I recreated those buttons sharp edged, 3 sizes. But when looking at those buttons with Windows 1920x1080, scale 150, and Skinsize 100/150/200 I wondered: what's the use? All I get is interpolation and unsharp images. A 2x image-size and a good graphics resizer should give enough quality up to (at least?) 200% Skinsize. Meaning 1 image-size should be sufficient. That was/is also on my todo-list... 1.5x is already removed.
The Tag-editor... I am glad that the ugly red overlay is gone. What a complicated color-system.

I looked at "ET Easy Grey" and it is good! What next?
In my first posting, with version 1.0, I mentioned that the work I do is for the community, for everyone whatever they like to do with it. There is a reason for this: I can only work for limited time per day with a PC to do the work for this skin. My mind loves it, my body does not (I am 69 but my body feels like 80+). From 2000 to 2012 I worked as a webdesigner and systembuilder. After 2012 it was over. However: working at a Skin is very appealing to me! I would like to finish this Easy Grey Skin, make it a 'mature' Skin. After that maybe someone should take over...
For now: enough to do. I wil dive into your main.xml, select the best quality images and make them work.