You can edit every line in this file in two different ways to pick a color:
- Use a Color Name from this Name Color Chart
- Use a number sequence such as 215,0,0,0. Examples of colors can be found in this Decimal Number Color Chart
One advantage to using the decimal numbering method is the first number can be used to control the level of transparency on all text related and backdrop related lines in Pearl.
You should also take a look at Soultaker’s original description of how skinning works. That information can be found HERE
Here is a sample copy of the Pearl skin to use as an easy starting point for all users. Right click and choose save as on this download:
Open the pearl_styles.mcml with notepad to start editing and building your own skin. In depth instructions for each line are listed below to help you start building your skin.
The only thing you need to be aware of in this area is the version number. Future updates of Pearl could add things to this file and require a version number change to work along with adding additional new lines to this file.
Pearl 0.1.4.0 and above requires the version number be set to 3.
<!-- version:3 -->
<Mcml xmlns="http://schemas.microsoft.com/2006/mcml"
xmlns:cor="assembly://MSCorLib/System"
xmlns:me="Me" >
<!-- PEARL STYLES DEFAULT -->
<Color Name="P_Focus" Color="DodgerBlue"/>
<Color Name="P_Dim" Color="Gray"/>
<!-- PEARL FONT COLORS -->
<Color Name="P_Light" Color="190,190,190"/>
<Color Name="P_FilterColor" Color="0,0,0"/>
<!-- PEARL COLORS -->
<!-- Pearl media item colors -->
P_MediaItem_Border controls the color of the focus frame in pearl if enabled in mediabrowser:
<Color Name="P_MediaItem_Border" Color="White"/>
P_MediaItem_Icon controls the color of the text and icon inside the corner frame watched banners:
<Color Name="P_MediaItem_Icon" Color="White"/>
P_MediaItem_Base controls the color of the corner frame banners:
<Color Name="P_MediaItem_Base" Color="Firebrick"/>
P_MediaItem_Text Controls the title text in thumb view.
<Color Name="P_MediaItem_Text" Color="White"/>
P_Filter_Dark controls the color that you present in the bottom left of the screen and the top right.
<!-- Pearl gradient -->
<Color Name="P_Filter_Dark" Color="255,255,255"/>
P_Filter_Overlay This appears to apply a soft filter on top of all level backdrops, very faint.
<Color Name="P_Filter_Overlay" Color="0,0,0"/>
P_Filter_Base controls the overall backdrop color for weather page.
<Color Name="P_Filter_Base" Color="255,0,0,0"/>
P_Filter_Base2 controls the overall backdrop filter color
<Color Name="P_Filter_Base2" Color="215,0,0,0"/>
P_Menu_Base controls the onscreen folder menu background color
<Color Name="P_Menu_Base" Color="240,0,0,0"/>
P_Menu_Text controls the font color for the onscreen folder menu
<Color Name="P_Menu_Text" Color="White"/>
P_Menu_Text_Focus controls the the font focus color for this menu
<Color Name="P_Menu_Text_Focus" Color="Firebrick"/>
P_Font_Default controls the font color for the Play, Resume, Trailer, Delete, Next and Previous buttons on media details page.
<!-- PEARL TEXT COLORS -->
<Color Name="P_Font_Default" Color="White"/>
P_Font_DefaultFocus controls the font focus color for the buttons listed above.
<Color Name="P_Font_DefaultFocus" Color="Firebrick"/>
P_BreadcrumbColor controls the font color for the Breadcrumb media location trail
<Color Name="P_BreadcrumbColor" Color="White"/>
P_ClockColor controls the font color of the clock
<Color Name="P_ClockColor" Color="White"/>
P_ClockAMPMColor controls the font color for the AM/PM lettering of the clock
<Color Name="P_ClockAMPMColor" Color="Firebrick"/>
P_CounterColor controls the font color for the Item Counter underneath the breadcrumb trail
<Color Name="P_CounterColor" Color="White"/>
P_TitleColor controls the main title color font for any item. 30 Rock, 300, any place the title of the item is placed this will be its color.
<Color Name="P_TitleColor" Color="White"/>
P_DetailPageFocus controls the focus color for the media details page for the Director / Genre area.
<Color Name="P_DetailPageFocus" Color="Firebrick"/>
P_GenreColor controls the genre text color you would see in Poster or Thumbstrip views.
<Color Name="P_GenreColor" Color="White"/>
P_Normal controls the main description font coloring in media details page. Also the font color for the running time, mini descriptions in poster and thumbstrip view, the episode counter number and first aired text in certain views. Also the color of the font for the characters name in the actors tab on the media details page.
<Color Name="P_Normal" Color="White"/>
P_Normal_Focus controls the focus font color for the General, Actors, Media Details categories on media details page.
<Color Name="P_Normal_Focus" Color="Green"/>
P_Attribute controls the font color for Director, Genre, End Time, Name of actor, and category name under media info tab.
<Color Name="P_Attribute" Color="White"/>
P_Search controls the font color for the type as you search lettering.
<Color Name="P_Search" Color="White"/>
P_Search_Shadow controls the shadow color that appears behind the type as you search lettering.
<Color Name="P_Search_Shadow" Color="Firebrick"/>
P_RAL_Normal controls the text color of the Recently Added List
<Color Name="P_RAL_Normal" Color="60,60,60"/>
P_RAL_Focus controls the text focus color of the Recently Added List
<Color Name="P_RAL_Focus" Color="Firebrick"/>
P_MediaTab_Normal Controls the color of the General, Actors, Media-info area
<Color Name="P_MediaTab_Normal" Color="60,60,60"/>
P_MediaTab_Focus Controls the focus color of the General, Actors, Media info area
<Color Name="P_MediaTab_Focus" Color="Firebrick"/>
1. P_Flags_Text_Light controls the color of the DVD, Bluray and other media icons in the media bar at bottom of screen.
<!-- Pearl onscreen media info -->
<Color Name="P_Flags_Text_Light" Color="Firebrick"/>
2. P_Flags_Text controls the font color that appears in the media bar.
<Color Name="P_Flags_Text" Color="White"/>
3. P_Flags_Base controls the border and fill color of the media bar
<Color Name="P_Flags_Base" Color="White"/>
4. P_Flags_Studio controls the filter color that can be placed over the studio icon area in media info bar. Leaving at the KB Skin settings will allow full color studio icons to be seen.
<Color Name="P_Flags_Studio" Color="0,255,255,255"/>
5. P_Flags_WatchedIcon controls the color of the watched eye icon in media info bar if enabled in Pearl’s options to be shown.
<Color Name="P_Flags_WatchedIcon" Color="White"/>
P_Config_Focus controls the focus color of the buttons for Config, Parental Control, and the EHS Recently added list button.
<!-- Pearl config buttons -->
<Color Name="P_Config_Focus" Color="Firebrick"/>
P_Config_Base controls the normal color of the buttons listed above, the color you pick here will also be the border color box when you focus on an icon.
<Color Name="P_Config_Base" Color="White"/>
P_Weather_Focus controls the focus color of the weather button.
<!-- Weather Button -->
<Color Name="P_Weather_Focus" Color="Firebrick"/>
P_Weather_Base controls the normal color of the weather button, the color you pick here will also be the border color box when you focus on an icon.
<Color Name="P_Weather_Base" Color="White"/>
1. P_WeatherP_Current controls the color for the fonts used on the words Currently, the mini description for example, Partly Cloudy, and the days of the week all inside the weather page.
<!-- Weather Page -->
<Color Name="P_WeatherP_Current" Color="Firebrick"/>
2. P_WeatherP_Temp controls the color of all temperature numbers inside in the weather page.
<Color Name="P_WeatherP_Temp" Color="Firebrick"/>
3. P_WeatherP_Location controls the color of the city name location inside the weather page.
<Color Name="P_WeatherP_Location" Color="White"/>
1. P_RootItem_Text controls the font color for the EHS label for each category and also the Recently Added List.
<!-- Pearl EHS -->
<Color Name="P_RootItem_Text" Color="White"/>
2. P_RootItem_Frame controls the border frame color to appear around each EHS category icon.
<Color Name="P_RootItem_Frame" Color="TVWhite"/>
3. P_RootItem_Back controls the background color that the text appears on for the EHS category name.
<Color Name="P_RootItem_Back" Color="Firebrick"/>
4. P_RootItem_PosterBack controls the background color of the EHS button that an icon would sit on top of.
<Color Name="P_RootItem_PosterBack" Color="TVBlack"/>
1. P_Details_TitleText controls the font color for the media title in details view style.
<!-- Pearl Details Item -->
<Color Name="P_Details_TitleText" Color="White"/>
2. P_Details_Text controls the font color for the number count before the title and also the year behind it in details view.
<Color Name="P_Details_Text" Color="White"/>
3. P_Details_TitleText_Focus controls the focus font color for just the title text in details view.
<Color Name="P_Details_TitleText_Focus" Color="Firebrick"/>
4. P_Details_Text_Focus controls the focus font color for the number count before the title and the year behind it in details view.
<Color Name="P_Details_Text_Focus" Color="Firebrick"/>
5. P_Details_Background controls the color of the focus bar color that sits behind the selected item text in this view.
<Color Name="P_Details_Background" Color="215,0,0,0" />
<!-- END PEARL COLORS -->
<!-- PEARL ALPHA SETTINGS-->
1. P_Alpha_RootItem_Frame controls if the border frame to appear around each EHS category icon is active. 1 is on and 0 is off. In addition you can control the opacity by using values between 0 and 1, for example a value of 0.5 will be 50% transparent.
<cor:Single Name="P_Alpha_RootItem_Frame" Single="1"/>
2. P_Alpha_RootItem_Back controls if the color underneath the EHS category name is on or off.
<cor:Single Name="P_Alpha_RootItem_Back" Single="1"/>
3. P_Alpha_RootItem_PosterBack controls if the color appearing behind the EHS icon is on or off.
<cor:Single Name="P_Alpha_RootItem_PosterBack" Single="1"/>
P_Alpha_Flags_Base allows you to control the transparency of the surrounding border bars of the bottom bar where you would find ratings, runtime, and more.
<cor:Single Name="P_Alpha_Flags_Base" Single="1"/>
P_Alpha_MediaItem_Base allows you to control the transparency of the watched/unwatched indicator base.
<cor:Single Name="P_Alpha_MediaItem_Base" Single="1"/>
P_Alpha_MediaItem_Border allows you to control the transparency of the focus frame border.
<cor:Single Name="P_Alpha_MediaItem_Border" Single="1"/>
<!-- PEARL ALPHA SETTINGS-->
</Mcml>
To easily check your changes copy the pearl_styles.mcml into this location.
C:\ProgramData\MediaBrowser\Plugins\pearl
Open up MediaBrowser to start seeing your changes take place, you will need to close and reopen mediabrowser everytime you make a change.
Once you have completed all your coloring changes and your ready to distribute your skin to the public simply name this file what you want to call your skin. For example : BAS Rocks.mcml and then place in the pearl skins directory located at
C:\ProgramData\MediaBrowser\Plugins\pearl\skins
Pearl will then revert to it’s default look next time you startup mediabrowser and your skin should now be a choice in the skin selection area under Pearl Options.
This topic could use improvements.
- Better descriptions
- Comparison screenshots of changes
- Please use the improve button to suggest any improvements.