INTERACT FORUM

More => Old Versions => JRiver Media Center 29 for Mac => Topic started by: EnglishTiger on July 01, 2022, 09:47:00 am

Title: How to modify the ModernCards Dark Edition Skin
Post by: EnglishTiger on July 01, 2022, 09:47:00 am
The ModernCards Dark Edition Skin is Identical on both the Mac and Win pc's - with the selected/playing track being presented as Black Text on Grey.
Changing that plus making the scrollbars larger, is something that the individual requiring those changes has to do themselves.

Unlike with Plugins, where the Plugins Folder Name is the Name MC uses to identify individual Plugins, for Skins it is an Entry in the Skins main.xml file that MC uses to Identify individual skins
To make those changes you first must copy the Folder the Skin is in to a different folder, on a Win PC the most obvious place is the Documents Folder, and change the Folder Name.
Then in a proper text editor, like Notepad++, open the main.xml file and look for this entry Name= and alter the text inside the quotes. I changed "Modern Cards: Dark Edition" to "Modern Cards: Dark Edition ET"
N.B. If you fail to alter the Folder Name or the Skins Name for a Skin that is supplied as part of every MC Install Package the unmodiied version will overwrite your modified version.

To change the selected/playing track colours scroll down till you see these line:-
   <LIST>
      <!-- Note that Text color will also affect borders around certain items. -->
      <Colors Text="909090" Back="2b2b2b" SelectedText="000000" SelectedBack="3A3A3A" HotText="018fff" Gridline="333333" GridlineBack="2f2f2f" OverText="a3a3a3" />

The entry you need to edit is SelectedText="000000" where 000000 is the 6 character hex code for Black, I changed it to SelectedText="ffffff" the hex code for white.

Changing the size of the Scrollbars takes a bit more work as you have to change this little lot:-
   <SCROLLBAR>
      <EntryGroup Name="HorizontalLeftArrow">
         <Entry Bitmap="Scrollbar_HorizontalLeftArrow.png" NumberImages="4" Margins="2,2,2,2" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalLeftArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
      </EntryGroup>

      <EntryGroup Name="HorizontalRightArrow">
         <Entry Bitmap="Scrollbar_HorizontalRightArrow.png" NumberImages="4" Margins="2,2,2,2" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalRightArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
      </EntryGroup>

      <EntryGroup Name="HorizontalHandle">
         <Entry Bitmap="Scrollbar_HorizontalHandle.png" NumberImages="4" Margins="6,0,6,0" DrawMode="REGION_E_HTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalHandle-2x.png" NumberImages="4" Margins="6,0,6,0" DrawMode="REGION_E_HTILE" />
      </EntryGroup>

      <EntryGroup Name="HorizontalBackground">
         <Entry Bitmap="Scrollbar_HorizontalBackground.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_HTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_HTILE" />
      </EntryGroup>

      <EntryGroup Name="VerticalUpArrow">
         <Entry Bitmap="Scrollbar_VerticalUpArrow.png" NumberImages="4" Margins="0,0,0,0" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalUpArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
      </EntryGroup>

      <EntryGroup Name="VerticalDownArrow">
         <Entry Bitmap="Scrollbar_VerticalDownArrow.png" NumberImages="4" Margins="0,0,0,0" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalDownArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
      </EntryGroup>

      <EntryGroup Name="VerticalHandle">
         <Entry Bitmap="Scrollbar_VerticalHandle.png" NumberImages="4" Margins="0,6,0,6" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalHandle-2x.png" NumberImages="4" Margins="0,6,0,6" />
      </EntryGroup>

      <EntryGroup Name="VerticalBackground">
         <Entry Bitmap="Scrollbar_VerticalBackground.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_VTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_VTILE" />
      </EntryGroup>

      <EntryGroup Name="Stump">
         <Entry Bitmap="Scrollbar_Stump.png" Margins="0,0,0,0" />
         <Entry Bitmap="Scrollbar_Stump-2x.png" Margins="0,0,0,0" />
      </EntryGroup>
   </SCROLLBAR>
   
   To something like this
   
      <SCROLLBAR>
      <EntryGroup Name="HorizontalLeftArrow">
         <Entry Scale="1" Bitmap="Scrollbar_HorizontalLeftArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalLeftArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
      </EntryGroup>

      <EntryGroup Name="HorizontalRightArrow">
         <Entry Scale="1" Bitmap="Scrollbar_HorizontalRightArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalRightArrow-2x.png" NumberImages="4" Margins="2,2,2,2" />
      </EntryGroup>

      <EntryGroup Name="HorizontalHandle">
         <Entry Scale="1" Bitmap="Scrollbar_HorizontalHandle-2x.png" NumberImages="4" Margins="6,0,6,0" DrawMode="REGION_E_HTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalHandle-2x.png" NumberImages="4" Margins="6,0,6,0" DrawMode="REGION_E_HTILE" />
      </EntryGroup>

      <EntryGroup Name="HorizontalBackground">
         <Entry Scale="1" Bitmap="Scrollbar_HorizontalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_HTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_HorizontalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_HTILE" />
      </EntryGroup>

      <EntryGroup Name="VerticalUpArrow">
         <Entry Scale="1" Bitmap="Scrollbar_VerticalUpArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalUpArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
      </EntryGroup>

      <EntryGroup Name="VerticalDownArrow">
         <Entry Scale="1" Bitmap="Scrollbar_VerticalDownArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalDownArrow-2x.png" NumberImages="4" Margins="0,0,0,0" />
      </EntryGroup>

      <EntryGroup Name="VerticalHandle">
         <Entry Scale="1" Bitmap="Scrollbar_VerticalHandle-2x.png" NumberImages="4" Margins="0,6,0,6" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalHandle-2x.png" NumberImages="4" Margins="0,6,0,6" />
      </EntryGroup>

      <EntryGroup Name="VerticalBackground">
         <Entry Scale="1" Bitmap="Scrollbar_VerticalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_VTILE" />
         <Entry Scale="2" Bitmap="Scrollbar_VerticalBackground-2x.png" NumberImages="4" Margins="0,0,0,0" DrawMode="REGION_E_VTILE" />
      </EntryGroup>

      <EntryGroup Name="Stump">
         <Entry Scale="1" Bitmap="Scrollbar_Stump-2x.png" Margins="0,0,0,0" />
         <Entry Scale="2" Bitmap="Scrollbar_Stump-2x.png" Margins="0,0,0,0" />
      </EntryGroup>
   </SCROLLBAR>
   
For some reason known only to the designer of the MC Skining Engine Software the Scale Command works in a less than obvious way; Higher numbers reduce the size and lower numbers increase the size.
The more observant of you may have noticed that in each EntryGroup section only the second Entry statement has Scale statement and uses a diffeent image; if you look at those ....-2x.png images in the folder you will spot they are larger that hte ones without the -2x in their name.
You can only use the Scale Command to reduce the size of the images that do not have -2 in their name; hence the need to add the Scale command and the change to the name of the Bitmap (image file)

Once you have done all the required editing save the main.xml and then copy the folder it is in to the relevant MC Standard Skins Folder and tell MC to use that skin.
NOTE - Since the MAC, Windows & Linux versions of MC use the same Skin Files you only need to make the changes on one Platform and, after checking to make sure have not accidently msde a mistake, simply copy the Folder containing your modified version to any other platform you are using.

OR - You could simply download, unzip and copy the modified version attached to this posting.
Title: Re: How to modify the ModernCards Dark Edition Skin
Post by: LilyAarseth on July 01, 2022, 10:44:00 am
Wow thanks for the help, It's much easier to spot the scrollbar now. I still don't understand why it behaves different on mac and windows if the skin files are identical. Here's screenshots on how it looked on my end previous to switching to your edit: