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...

Look below in a message for Skin-updates:
https://yabb.jriver.com/interact/index.php/topic,138750.msg962453.html#msg962453

[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..

--------------------------------------------------------------------------------------------------
Update Easy Grey version 1.7
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 back! I finally succeeded, even with Skin-size 50%.
2. 82 image improvements. Less 'minimalism', some buttons have 1 special color: Volume Mute, DSP-Direct, Fullscreen Expand, and Spotlight. And (most) buttons have 3 color states (default, mouse-over, click) with different colors for each state. The 'click' gives a little 'kick'
3. Volume slider improved. Lighter color, useful markings per 10% Volume change. Yes, this works: each click on the keyboard (Media-button, F11) changes Volume with 1%.
3. Updated window system buttons (close, maximize, minimize, restore) and new, large MAC images (thanks EnglishTiger).
4. Main.xml: improved coding and better, extended comments (thanks EnglishTiger for code-review, examples, and the extended comments!).

It was my intention to give images/coverart from any media-collection the most attention, with less distraction from all the shapes and colors that make up most Skins. I hope I succeeded.
An unexpected effect: changing Skin-size is 'fluent'. Everything on the page scales proportional and balanced. Only need to select a good font-size once, after that: just resize the Skin whenever you need a special scaling.
Enjoy!

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

Update notes:
There is no such thing as a 'final version' when it comes to Skins. This is not a quote, just a thought.
Her we go:
1. I forgot completely about the THUMBS on the Volume Slider and Progress bar. These little things ARE useful. Some users understand that a Thumb-image might/can be used to change the Volume. They are right. A nice thing happens when they click on thumb: it reacts! I don't want to remove these little thumbs just for the sake of a minimalistic design, so they are back. Although a bit tiny... But then again: you don't NEED to click on the thumb. Just anywhere on the Volume bar or Progress slider will make the thumb lighten up and jump to its new location, shining bright. And the User is happy to experience that MC has Volume protection
2. The Spotlight got so dim, so small, no wonder I overlooked it. I put a new battery in it and now it's putting on a great show. It should, it's a great feature!
3. There was something missing in all kind of options frames and popup windows. Mostly faint and in the background. I found it! Just a few mixed up dark colours...

That's it.
Pentecost tomorrow and the day after. For most of us in the Netherlands: holidays!

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

Update notes:
1. Car Radio: One button instead of different Left, Middle and Right buttons (ET). That got me thinking. What about some old fashioned, sturdy push-buttons? Okay, home-made.
2. Most Playerbar buttons upscaled to size 4x. Player Control-buttons: 8x, transparant (and for everyone who needs sharp buttons). Home-made, except DSP.
3. The Frame_FullScreenArrowsExpand, Frame_FullScreenArrowsCollapse and Spotlight were also upgraded.
4. Let's not forget that little scrollbar-stump... Change one (special) color in main.xml and suddenly the vacant spot of the scrollbar-stump is clear for all to see... It's back and happy doing nothing.

Not much left to improve so no more updates (?).
I have a few ideas for a new skin...

[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.

[EnglishTiger]

Jappie

Unfortunately I failed to spot that in v1.6 you had made some changes to the colours the Toolbars use so you will need to either copy the
<Colors Text="B5B5B5" HilightText="0078d7" SelectedText="018efe" Separator="333333"/> instructions from your 1.6 version to the ET Easy Grey version, or download the corrected version using the link at the bottom of this posting.

Over the years I've come to hate the ModernCards Dark skin with it's lack of contrast, especially that black text on a dark grey background for the track currently playing in playing now and for the selected option in the DSP studio form; its even worse on the mac where that black text is almost impossible to read. So I was pleasantly surprised when I downloaded and installed your Easy Grey skin and what my grand children refer to as the most boring skin for MC (ModernCards Dark), had been brought to life.

Before creating my first skin I did load of research and very soon found that all of the existing skins were using virtually the same uncommented and badly structured main.xml file, plus the existing tutorials were not very helpful when it came to deciphering the code in those files. Thankfully HPBME had created his Dream in Blue Skin which had a xml file in it that had loads of useful comments in it https://yabb.jriver.com/interact/index.php/topic,128460.0.html 

Just like you I started with the ModernCards skin but my first action was to put the skin.xml file into a more logical order whilst adding the appropriate comments that would make it easier to be able to make changes to the skin. Gradually the skin.xml "Template" that made it possible for me to create all those MC Standard View Skins that live on my website took shape. Although unlike your 3 weeks from starting to having your first working skin for me it was more like 3 months.

Jappie other than resizing your TagWindow_Field.png and TagWindow_FieldLabel.png to remove the need to scale them and adding a blue tint to the PlayerBar_DSPDirectButton.png the images in ET Easy Grey are the ones you created.
Not only do I like your skin I also liked what you are trying to do with it so I thought I'd give you a helping hand by creating ET Easy Grey in the hope that its better structure along with the extensive comments it contains would make it easier for you to achieve your aims for what is an excellent skin.

If there is anything in that main.xml you don't understand or need any help tbe easiest way to get hold of me is probably via a Forum Message.

[EnglishTiger]

Jappie

I spent this morning running MC32 on both my Mac Mini with it's Samsung 24" 1920x1080 Screen and MacBook Air with it's 13" Retina Screen switching between the ET Easy Grey Skin and ModernCards Dark Skin.

The attached link is for a set of Screenies from both Mac PC's mostly with Screen Size set at 100% but some are set to 150% and for 1 of them it was set to 200%.
But there is something you need to know about some of Apples Odd-Behaviour before you look at them.
Regardless of which app is being run there is always a Whitish (Apple) Header Bar at the top of the screen where the App's Menu is placed; however the Windows Control Buttons (Close/Min/Max) are always on the Apps own Header Bar
Apple's Retina system has a dislike for drawing anything (usually images) that is 1 pixel wide or high so if you look very carefully at any of the images where the Details List is visible you should spot the Vertical Gridlines between the Columns are "Absent".
The Apple OS also replaces the header bar on any small/secondary window; like the Tools > Options and DSP Studio Window with a whitish one that has rounded corners and the Apple System windows control buttons instead of the ones from the skin.
There is a small problem in respect of the Segoe UI Font - None of the Segoe font family are shipped with Mac PC's but they can be downloaded and installed. Unfortunately for the OS and MC to be able to use them the PC has to be rebooted.
Mac Pc's have always has had better graphics presentation than that thing IBM developed so there is less tendancy for small/light fonts being discoulered.

Images 1-12 are from the Mac Mini where I was using the Verdana Font some are with Size at 100% others are at 150% and 1 of them is at 200%
Images 3, 4, 8, 9 & 10 are for the ModernCards Dark and reveal a couple of the reasons why it should be sent to the rubbish dump.
Images 7 & 11 show that while the OS hijacks the MC Menu, which means the Drop Down Menus are located just below the Apple Header Bar they are still using the MC Skin and do get resized by the Skin Size Command.
Images 13-15 are from the MacBook Air, where I did install and use the Segeo  UI Font, and as long as the user is no more than 30" from the screen the lower line in the Display Panel is still readable.

So just as with the Win PC once again those images reveal that your skin was thought out, planed and constructed with a lot more thought than that Naff ModernCards Dark Skin; your Contrast Level is far better.

I wish I'd remembered to switch to the ModernCards skin on the MacBook and taken a screenie of it because that would have definitely revealed why I hate the thing.

Incidentally if you are wondering where the Dark Gey background ModernCards uses for the Currently Playing Track and the Selected Option in the DSP Window in images 2, 3, 4, 8, 9 or 10. It appears as 3 very short lines at the left hand side of the line in the images where the Track List is visible and at the right hand edge of the line in the DSP Window.

Link to Images on Pix01 - https://pix01.jriver.com/sM1%40m4ZV 

[markf2748]

One notable difference between ET Easy Grey and Easy Grey (1.6) is the contrast between text and background when mouse hovers over an unselected tab.  In both skins the tab changes to whitish text with "light tan" background color.  For ET Easy Grey I find the contrast is very low and the text is barely readable.  Adjusting MC's Skin Effects does not help matters.  The contrast is higher in Easy Grey (1.6) and the background color choice is a little more consistent with the theme.

No criticism, just pointing it out.  Personally I currently use a horizontally striped dual grey-tone scheme for the tab mouseover, and a light grey underline for the selected tab (screenshot attached).  Aside: A low blue dot indicates the tab is locked.  An "i" prefix in the tab name indicates an Image View of the album artwork which is stored in the audio album folders as sidecar files.  I have 5 such Image Views defined in the Tree, each synced (i.e. same sort order) to its corresponding Audio View.

BTW, thanks to all for the discussion and sharing of your history and expertise with this challenging corner of MC.  I must confess to borrowing a couple of ideas. 


5/12/2024:  Updated second paragraph.

Win 11 Pro 64-bit | Win 10 Pro & Home 64-bit | MC 32.0.45 (currently in beta)

[EnglishTiger]

This morning I remembered why the Selected Track in the List Section and Selected Option in the DSP Window look so odd/bad on the Mac. It's because it, like a few other skins, uses badly formed transparent overlay images with the word "Selection" in their name. When any of those skins are used on the Mac that weird distortion visible in the Images for the ModernCards Dark Skin. two of the skins where the Overlay Images don't get distorted on the Mac are the Pearl Bailey and ThunderStorm Skins. So well done Jappie for, without realising it, changing those "Selection" images from ones that use badly formed images using transparent colours to ones that using solid colours, making it Mac Compatible

Mark that lack of contrast when hovering over inactive tabs on the ViewHeader is down to me, technically the Tabs section of the skin.xml is obsolete and I wrongly removed it;, what I forgot is that although MC no longer has tabbed forms/frames its color statement is used by the ViewHeader sections Inactive Tabs. Incidentally that's not the only place where instructions in one section of the skin.xml get used in another, usually unrelated, section;
the Legacy Tag Window and parts of the DSP Studio window use some of the instructions and images from the List Section.

Mark you don't need to apologise for "borrowing a couple of ideas"; with the exception of the very first skin that was created for MC it is probable that some of the other skins available have borrowed code and ideas from other places. When I created my own skins the layout of the skin.xml is me applying the same principles I'd learnt as a Computer Programmer/Analyst; lay the file out by starting at the top left hand corner and work left to right down the screen to the bottom right hand corner. Some of the images were built using my ideas, or ideas/suggestions my Grand-Daughter came up with, but there are some images that I borrowed from other skins and modified to suit my requirements; and a lot of the remaining code was certainly borrowed from other skins; and I'm certainly not the only Skin Creator that has done that. One of the reasons for all those comments in my skin.xml files was to make it easier for other users to modify them to suite their own requirements or as a starting point when creating a brand new skin.

The reason why adjusting MC's Skinning Effects didn't improve the contrast problem is probably down to the fact that Skinning Effects get applied to the whole skin and unfortunately, thanks to the MC Skinning Engines idiosyncrasies, can result in totally unexpected result.

The attached ET Easy Grey.Zip has the version with the reinstated Tab section plus I've added the 4 mac Close, Minimize, Maximize and Restore Buttons that my skins use and changed the relevant instructions in the MainFrame and Frame sections to use them instead of the 3 OSX buttons.

[Jappie]

I see new posts from EnglishTiger and Mark. A lot of information.
I am impresssed by all the responses, hints and ideas. Printscreens of MC on MAC. I can barely see border lines of the Options popup windows. Oh, help.
Did I start this? Will I be able to finish the new Skin?

Just to give an update about the progress on the Skin Easy Grey: there is a lot to do.

I am still cleaning up images.
Example: 'click area' is a well known concept with website-building. Many buttons from Modern Cards have this click area. But do we really need this? It seems NOT. With or without it I notice no difference when using MC. Cleaning up is not a priority but I am working on the images so...
Example: image sizes. I am removing all the 1x and 1.5x sizes. I have to make sure I don't need them and the new default size (2x) is the best. Volume-bar and Progress-bar are typical: the background disappeared with skin-size 50 or 60%. And while I am at it, let's improve the Volume-bar (yes a very nice improvement!).
Example: The colors of different button-stages. Yes you can expect less 'minimalism' and better use of colors. No you won't see it at first glance. It's puzzling, I had to set up some guidelines like (default for the Player-bar): Volume: Mute off, Play: no shuffle, no repeat, DSP On=default (DSP Direct=special).
And so on...

Little issue: WaveForm Bar colors. I don't have the WaveForm bar only those 2 little spectrum-analyzers in the top-bar (and they don't respond to the WaveFormBar colors . Analyzing audio, not done. Don't want the data in my sidecar.xml. Will analyze some music, so I can setup nice colors. OK, just had MC analyze some music. YES, now I see the 'Wave'. Play with colors, okay.
Little issue: Fonts? Important, yes! 'Segoe' not on Mac? Makes me think of website-building: Verdana, Geneva, sans-serif or: Arial, Helvetica, sans-serif. Those were/are the most OS and browser-compatible options. I can NOT change the default Windows 10 font (without registry editing). So, for the 'looks' of MC there is little choice. But it does influence contrast and balance of text on the Skin.
Little issue: in version 1.4 there was a border with rounded corners but it looked bad at 50-70% Skin-size. It should be possibble. 'Blue Steel' Skin has it. It does not work on Easy Grey. The border lines just do NOT meet at the corners. After (again) several hours I found a solution. Rounded corners are back.
Little issue: Overlay transparency-issue on the MAC. I did not know about this issue but I do know that transparency is something to avoid. If a see layer-transparency in an image in Photoshop I will remove it. There is another transparency issue probably on both Mac and Windows computers: overlay transparency will not work in video-playback with something like the 'Mini Player'. I tried to give it rounded corners but they showed up black when playing a video and going to the topborder to activate the playerbar. GIF-transparency always had better support among the OS's. But we want more colors, so we need PNG...

I won't bore you with more details. Maybe at the end of this week, maybe next week, there will be an update of Easy Green.

[EnglishTiger]

Jappie

If it's going to make it easier to create your new buttons you can safely reduce the number of images for the List_ListButton and all the PlayerBar Buttons from 5 to 3, nobody gets to see the 4th image and the 5th "click area" image is only required if you want to restrict the click area to a part of the canvas the image is sitting on; i.e. to restrict the "click area" to the visible (coloured) part of a Mac Circular Windows Control Button instead of the Square Canvas it is sitting on.

WaveForm Bar colours - the simplest way of changing/modifying them  them is to do what I did in ET Easy Grey -  use the hex value for the PlayerBar_SliderPos.png image for WaveformBarA and the one for the PlayerBar_SliderPosFront.png for  WaveformBarB - that way you don't have to run analyze audio to get some tracks to populate the Waveform field/tag.

The reason why you can barely see border lines of the Options popup windows for the mac is down to the Mac OS hijacking the "Frame" and putting it inside that Form with the White Header and rounded corners at the top and bottom. It also does it with all my Skins which, like your Easy Grey Skin, also have a 1 pixel wide or high outer edge that is a different colour to the rest of the frame border images. What you are seeing in those mac images is the Hijacked Frames Border Edges and not the ones for the Frame Border Edges

I think I may have found a solution to the "Mini Player Rounded Corners Problem" I created a variant of ET Easy Grey and in PSP modified the Mainframe_TopBorder.png image to give it Rounded Corners and a 1 pixel wide edge colour to all except the bottom edge so that I could see what MC was drawing.
In Standard View without it being maximised not only were the round borders present I discovered something interesting/amazing; I hadn't altered the position of the Windows Close Button so when I hovered over it it also had a Rounded Top Right Corner, the "Overlay" was only being applied to the coloured/textured part of the skin and not the transparent area. The same happened when I switched to mini-view, in Display View when I moved the mouse up to the top of the screen to get the Drop Down Player Bar to put in an appearance it did have transparent areas around the outside of the rounded corners but when I hovered the mouse over the Windows Close Button the Overlay was rectangular with square corners but that may be down to the player bar being on top of a textured part of the display view window.


The solution may well be to do the  same as in the main.xml file for the Blue Steel, Green Eyes and Thunderstorm skins, all of which have rounded corners, and do not have any lines of code that reference the FullScreen  Player.

P.S. Display View has a Default Pure Black Background which makes it difficult to spot if the rounded corners have transparent areas around the corners, I manged to see them by using a TrackInfo plugin that does not have a black background.

[Jappie]

EnglishTiger,

Button-images: All Player buttons have been 'clipped' from 5 to 3 states. Yesterday I noticed 2 buttons that do not like removing the 4th state: Slider_HorizontalHandle and Slider_VerticalHandle. Part of the graphic disappears. I also edited the window-system buttons. So far so good. I don't want to go 'overboard'.
From 170 images down to 105 images. I like cleaning.

Window-system buttons: thanks for the large, beautiful Mac-buttons. Updating the close/maximize/minimize/restore buttons was a puzzle. Also there is this second list in the main.xml in the Frame-section. Your main.xml (ET Easy Grey, update 3) shows quite different values for X and Y Offset compared to the Mainframe-list. For now I copied the Mainframe-list to the Frame section (and do not change the OffsetY and OffsetX). I thought the OffsetY  needed a "+1" because of the 1 pixel frame-border. But no, the buttons are already 'free' below the border. Looks good on Windows. I leave the OffsetX the same as in the Mainframe-list. If I change the Windows Close-button OffsetX from "0" to "5" it just disappears partly (5px) behind some dark border... the Frame_Rightborder.png!

Entry name 'Icon', what is it for? The settings can be removed without any visual effect, at least I tried it some time ago and did not notice any effect. I leave the 'default' settings (in case I missed something which needs those settings).

Images.xml: I understand that it would be 'best practice' to leave the 'SmallIcons' (and other Icon-resources) a default MC-resource instead of putting them in a Skin. But using the default Icons looks bad, both on the Mainframe and all the Options windows (Options-menu, Toolbar-menu). Icons that are "glued" to the border and/or vertically to other Icons is not my idea of 'nice'. I have a solution for that: a 'space' around every Icon. Unfortunately whenever a new Icon emerges I have to edit my SmallIcons.png...
Good for a wish list: ALL skins would benefit from an update that takes care of decent margins around the Icons.

WaveForm Bar: nice feature but a problem for skin-layout. Easy Grey's Volume-button, Volume slider, Progress slider, repeat, shuffle and DSP button are aligned, vertically positioned. Changing the skin-size is no problem. Turn on the WaveForm display, change the skin-size and see: the WaveForm gets 'out of line'... Tried changing the button-height, Yes, 1 skin-size can display the Waveform exactly in place of the progress slider. I have no real solution. Okay, this kind of precise positioning is a 'bridge to far' maybe.

Those rounded corners. Yes, a great challenge. I dropped them for the Options-windows (only 1 pixel border, no rounded corners). Above desktop resolution of 1920x1080 we get the automatic fullscreen Options windows... Borders will be invisible (on my LG Oled) or hardly noticeable. And if transparency is a problem on some systems or MC-View, better not use them at all. (It won't stop me from trying)
Rounded corners for the Mainframe (that is: around Tree + List-area): yes, I found a solution. Only a bit more complicated and limited compared to Blue Steel, Green Eyes and Thunderstorm skins. Left and Right border can only be small.

Easy Grey update? Soon...

[EnglishTiger]

Jappie
Button-images - well done unless you use the same image in more than one section 105 images is as low as you can go.

Window-system buttons; the most likely reason for the differences in the OffsetY and OffsetX values in the MainFrame and Frame sections is probably down to the Mainframe Top Bar does not usually have borders but the Frame usually does; play the Frame Windows, and the Window-system buttons tend to be smaller than the Main MC Window.

Entry name 'Icon' - is probably obsolete and can safely be removed. However that instruction does appear to contain what may be a unique piece of code; it doesn't give any indication as to what image/images it sues but it does allow the skin creator to specify what size they should be presented at.

Images.xml and customised SmallIcons.png - having to redo the customisation every time a New Icon is introduced can be a pain in the proverbial; thankfully that does not happen very often. Since you customisation of the Small Icons set is on one of the skins USP's my recommendation would be to resist all temptations to switch to using the standard/default SmallIcon.png. I agree with you that it would be nice to be able have greater control over the placement of those Icons, I would love to have full control over the placement of every skin element but that may well remain just a dream since it would require a major rewrite of the Skin Engine and the skin.xml files; an action that would probably end up making every existing skin unusable.

WaveForm Bar - this is a "Cool New Features" that a lot of users, probably even the majority, wish had never been implemented. As you have discovered the only thing a Skin Creator can do is specify the colorus to be used for WaveformBarA and WaveformBarB; but not it's size and position; thankfully since it is only a minority of users that have it showing like every other skin creator it is safe to ignore the fact that you can't get it nicely aligned to the other elements in that part of the PlayerBar.

Please don't give up on Rounded Corners, even if you are only able to achieve it for the MainFrame Top Border; the Blue Steel, Green Eyes and Thunderstorm skins all prove it can be done so hopefully it won't take you too long to get it working with your Easy Grey skin.

[Jappie]

Please don't give up on Rounded Corners, even if you are only able to achieve it for the MainFrame Top Border; the Blue Steel, Green Eyes and Thunderstorm skins all prove it can be done so hopefully it won't take you too long to get it working with your Easy Grey skin.

I succeeded! The left- and right-border are 15 px wide. This is the code that finally works:

Code: [Select]

    <Entry Name="TopBorder" Bitmap="MainFrame_TopBorder.png" Columns="8,6,?-Flex,6,8" Rows="?-Flex,6" Cells="A1-HTile,A2-HTile,A3-Tile,A4-HTile,A5-HTile,B3-VTile" />
    <Entry Name="BottomBorder" Bitmap="MainFrame_BottomBorder.png" Columns="8,6,?-Flex,6,8" Rows="6,?-Flex" Cells="A3-VTile,B1-HTile,B2-HTile,B3-Tile,B4-HTile,B5-HTile" />
    <Entry Name="LeftBorder" Bitmap="MainFrame_LeftBorder.png" Columns="8,1,?-Flex" Rows="?-Flex" Cells="A1-HTile,A2-HTile,A3-Tile" />
    <Entry Name="RightBorder" Bitmap="MainFrame_RightBorder.png" Columns="?-Flex,1,8" Rows="?-Flex" Cells="A1-Tile,A2-HTile,A3-HTile" />
Simplifying this code? Not working...

The Final version of Easy Grey is ready. I am very happy with it.
But... the files...
Issue with uploading:
"The attachments upload directory is not writable. Your attachment or avatar cannot be saved."
Server maintenance?
I will try later.
Problem solved!

[EnglishTiger]

Jappie - You cracked it, even though the image for MainFrame TopBorder looks very strange. Those rounded corners show up on my Win and Mac pcs and I like your subtle use of colour on some of the buttons.

Unfortunately there is a problem; the CARRADIO section is missing from the main.xml file in V1.7 resulting in MC using the default buttons instead of the ones for your skin.

P.S you can remove the "TheSkin.jpg" image from the skin folder, but don't delete it from you pc, that image used to be used on a now obsolete "Skin Manager" form/window.

If and when you are ready to upload it to the MC Servers send me a forum message and I'll go through what you need to do to be able to submit it, which will include supplying an Image hence the suggestion about not removing that "TheSkin.jpg" image from your pc.

[Jappie]

If and when you are ready to upload it to the MC Servers send me a forum message and I'll go through what you need to do to be able to submit it, which will include supplying an Image hence the suggestion about not removing that "TheSkin.jpg" image from your pc.

EnglishTiger,
I just made a new topic about the last versions of Easy Grey:
https://yabb.jriver.com/interact/index.php/topic,138930.0.html
Unfortunately I decided to stop developing Skins.
I am grateful for all your responses and from others. It kept me going, making a good Standard Skin!
Hope someone picks up where I left. A Skin 'Easy White' was on my mind, to have a white counterpart of Easy Grey...