Author Topic: How to make modifications to a skin that you like.  (Read 21905 times)

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
If the skin file has the extension xml:

Open the skin file that you like, but want to make changes to with an editor that can handle xml files. (e.g. Notepad++)
Find the element that you want to change the colour for.
(Using a colour picker such as Instant Color Picker together with the Sample Skin can be helpful for that)

Change the rgb values of the elements you want changed to your liking.
Save the file, and next time you select the skin in MusicBee you will see it displaying the colours that you have changed.
(it's probably a good idea to keep the original file intact, and save your edit under a different skin name)



If the skin file has the extension xmlc:

it is a compiled skin (a.k.a. a bitmapped skin) and you can not open or edit this file type.

However, you can create an additional (xml) skin file that will use an existing xmlc skin as the basis, but will override certain colour elements that you have specified in that xml file.
This will allow you to change most of the colours and icons of any xmlc skin.
Any element specified in your xml file will override the properties of that element as defined in the existing xmlc file.

note that:
-  The Player Controls bar is an exception, most colours and elements there can not be edited in this way.
-  The xml file is an accompanying file. So both the original xmlc file and your newly created xml file need to be present in MusicBee's Skins folder.

howto:

- Create a new text file.
- Paste the following code into it:

Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="OriginalSkin.xmlc">
 <element id="EXAMPLE" bg="100,100,100" fg="0,255,0" bdr="255,0,0" />
</root>

Replace where it says 'OriginalSkin' with the name of the skin you are using as the base skin.
Replace the whole third line (the one containing 'EXAMPLE') with the line of the element that you want to have a different colour for, and then change the RGB colour values of that element to your liking.
(Using a colour picker such as Instant Color Picker together with the Sample Skin can be helpful for finding the element you are looking for)

Add other elements that you may want changed right beneath that line. (above </root>)
Save the file with a new and unique skin name of your choosing and save it with the extension .xml

Copy that file to MusicBee's skin folder, and make sure the original skin is also present there.

Then select your newly created skin in MusicBee.
do make sure you select the name of your new skin file and not the original xmlc skin)

That's it.
Last Edit: December 25, 2023, 05:11:40 PM by hiccup

Johan_A_M

  • Jr. Member
  • **
  • Posts: 117
Hahaha, this is unbelievable! Literally some hours earlier today I downloaded the Elements skin, really fell in love with it but tried to just adjust some minor color thing but found out it was an xlmc file. Thank you SO much for this tips, talk about posting at a perfect time!


aktor

  • Jr. Member
  • **
  • Posts: 110
One question. When using xmlc skin is web link icon in track information panel customizable or removable.

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
One question. When using xmlc skin is web link icon in track information panel customizable or removable.
Something like this seems to work:

Code
<?xml version="1.0" encoding="utf-8"?>
<root dependsOn="MusicBee3.xmlc">

<images id="Default">
  <element id="Controls.WebLinkIcon">
        iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
        bWFnZVJlYWR5ccllPAAAA4hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
        bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
        eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAxIDc5LmMw
        MjA0YjJkZWYsIDIwMjMvMDIvMDItMTI6MTQ6MjQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJk
        Zj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVz
        Y3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hh
        cC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBl
        L1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4
        bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NjM3Y2Y5YTEtZjhiOS1kNzRmLWFjNWIt
        MzhkZGUxNjU4ZTBjIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE1NzFGRTBDQTMzMDExRUU4
        RUM4ODA3MjE4Q0NFOTgxIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE1NzFGRTBCQTMzMDEx
        RUU4RUM4ODA3MjE4Q0NFOTgxIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAy
        MDE1IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAu
        aWlkOjYzNTZkN2RlLTdmNTItNTA0Ny1iMWQ0LTZjZTVlMTQ1ZGU3YyIgc3RSZWY6ZG9jdW1lbnRJ
        RD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmNkYjdhYjM5LTI2NDEtZjg0YS04YjE1LTQ0Yzk2MWIz
        ZDk2MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFj
        a2V0IGVuZD0iciI/PrswH18AAADESURBVHjaYvz//z8DJYCJgULAQkjBSUZGrE40//+fkVgXnALi
        JiCWgmJ9FFlQGODDJxgYfE6AlcH5Ish8Fqgz1wGpQDSb1wKdGQKkNwNxOZL4H2xhANIcDMSXkPx4
        B+r/KiC7C8iuArJbod5B9QLISUCsguZ0kFgjlF0P5XsC8UkML+AAiUA8H+qKelioA8F2olwAFY+A
        2Qak12ALZEYQAbUFJQxg4YCcHpBcgRGI60GhjiURIXPXY/Mn44DnhYE3ACDAADRnqDw+tKzNAAAA
        AElFTkSuQmCC
  </element>
</images>
</root>

- save as "MyPiggybackSkin.xml"
- copy to skin folder and then select it as your skin

(it's best to ask further questions in the appropriate board)
 
Last Edit: December 25, 2023, 02:23:37 PM by hiccup

aktor

  • Jr. Member
  • **
  • Posts: 110
Probably a mod should move the tread to appropriate place .
The code made the icon from blue to red.
What is the "text block"?

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
- The code made the icon from blue to red.
- What is the "text block"?
- No, it's a different icon alltogether
- It's a 16x16 image encoded as base64
(search for base64 to learn about it)


aktor

  • Jr. Member
  • **
  • Posts: 110
Continuing: Is this line of sample skin configurable so the background is a image generated with base64.
<element id="Content[Artwork].GroupingHeaderFile" bg="217,217,217" fg="107,107,107" />

hiccup

  • Sr. Member
  • ****
  • Posts: 7781
Continuing: Is this line of sample skin configurable so the background is a image generated with base64.
<element id="Content[Artwork].GroupingHeaderFile" bg="217,217,217" fg="107,107,107" />
No, elements under <colours> are defined by RGB values, elements under <images> are defined by base64 encoded images.