Patchou's Cabana

The personal blog of Patchou

MCT Documentation – Change the pictures

< back to Media Center Themer’s documentation index

For the purpose of this documentation, the interface of Media Center can be broken into 3 distinctive parts: text formatting, resources, and structure. The first part, text formatting, has been covered in the How to use Media Center Themer and Text Formatting sections. Picture resources will be seen here. The remaining aspects of the user-interface will be covered in the more advanced Complete your Theme topics.

Extract Files from Media Center

The most important part of UI customization is probably replacing pictures. Why is it covered so late in this help file? simply because, despite the importance of the topic, there is no way your interfaces will look good if you simply change the main background of Media Center and keep the original blue text over it. It’s the kind of thing that’s been seen way too many times in the past and that’s also why you should always match your pictures changes with new text colors and fonts.

Every picture in Media Center is identified by a unique resource name (id). Replacing a picture is simply a matter of giving Media Center Themer the id of the picture you want to change, and the filename of the new picture you want to use. The best way to get original pictures’ id is to enable the LogResources settings as described in the Logging and Settings section of this documentation. When this very special feature is enabled, all the pictures and all the structure files loaded by Media Center (as well as some of its add-ons) are saved on disk. You’ll find the files located in the “Logged Resources” sub-directory of Media Center Themer (by default: C:\ProgramData\Media Center Themer\Logged Resources). With the setting enabled, try to start/restart Media Center and look at what gets generated; remember that by default, the ProgramData directory is hidden in Windows so you may need to enter the path manually in the Explorer path bar. All the files are organized by library name (dll), and type. The id of each resource is used as final file name (including the file extension if applicable). For example:

  • Logged Resources \
    • ehres.dll \
      • html \
        • HOME.XML
      • rcdata \
        • AUTOSCROLL.CHEVRON.BOTTOM.REST.PNG
        • COMMON.ANIMATED.BACKGROUND.PNG
    • microsoft.mediacenter.shell.dll \
      • html \
        • STARTMENU.MCML

Every time Media Center is started with the LogResources setting set to 1, Media Center Themer saves each resource in a file, while they are loaded and used by Media Center. This helps locate resources displayed in specific windows of Media Center as you get a chronological order of files; it also means you need to make Media Center display as many different windows as possible if you want to make sure your theme is complete and ready for public distribution. The MCML and XML files you’ll find in these directories are “structure files” which will be explained later. For now, let’s concentrate on pictures.

Modify the Pictures of Media Center

Most of the time, the first thing you’ll want to change in Media Center is the background picture that’s used almost everywhere in the program. The default installation of Media Center Themer already comes with a modified version of the background for demonstration purposes. Here is what the related part of the default MCTDefault.xml configuration file looks like:

<Resources>
	<Rcdata>
		<!-- Picture Resources. Modification of the default background -->
		<Resource Id="COMMON.BACKGROUND.PNG">
			<Replace File="Theme\bkg-demo.jpg"/>
		</Resource>

		<Resource Id="COMMON.ANIMATED.BACKGROUND.PNG">
			<Replace File="Theme\bkg-demo.jpg"/>
		</Resource>
	</Rcdata>
</Resources>

As with anything else configurable in Media Center Themer, the full documentation of the XML elements/attributes you see here can be found in the schema’s documentation (included in the documentation distributed with the software). Resource changing is pretty straightforward: for each picture you wish to replace, add a Resource element in the Rcdata element of Resources. Two mandatory properties are required: Id and File. The former is an attribute of Resource, the later is a child element of Replace. Note that files are by default relative to the directory of Media Center Themer so Theme\bkg-demo.jpg actually refers to C:\ProgramData\Media Center Themer\Logged Resources\Theme\bkg-demo.jpg. An additional Source attribute can be added to specify the name of the library where the resource is located. You can use it if two resource names coming from two different libraries conflict with each other.

In the example above, two pictures are replaced:

  • The COMMON.BACKGROUND.PNG picture is replaced by the file bkg-demo.jpg located in the Theme folder.
  • The COMMON.ANIMATED.BACKGROUND.PNG picture is replaced by the same file: bkg-demo.jpg.

Both those resources are located in ehres.dll. This is where you’ll find most if not all the pictures of Media Center. Replacing those two resources effectively replaces the background used in most windows, and many add-ons use the same picture as well. The reason why two resources need to be replaced in this case is because of the display options available in Media Center: on slower computers, the background is not animated and uses the first picture. On faster computers, the background has moving elements and the second picture is used as a base. When replacing the background with a custom bitmap, this distinction does not matter so you’ll generally want to replace both resources.

Now, let’s say you want to replace the thumbnail that represents the TV Guide in the main menu of Media Center. The XML code for that would be:

<Resource Id="STARTMENU.QUICKLINK.GUIDE.FOCUS.PNG">
	<Replace File="new_guide_picture.png"/>
</Resource>

As a general rule, different picture formats and dimensions can be specified when replacing resources but it is recommended to stick to the original attributes when trying new modifications (replace a PNG by a PNG and keep the same width, height and color depth as the original file). Test your modifications as often as possible, it will prevent unpleasant surprises such as Media Center crashing for no apparent reason.

Automatic Colorization of Media Center’s Pictures

Media Center uses hundreds of different pictures to construct its interface. One particular challenge that people quickly meet when theming Media Center is changing the original blue feel of the interface. The main reason for that problem is the abundance of small pictures, colored in blue, used in every corner of the windows (controls, overlays, partial backgrounds…). Let’s say you want to change the look of the default auto-scroll chevron Auto-Scroll Chevron to match your new reddish background. While browsing the resources extracted from Media Center, you’ll notice that there are of course 4 versions of the chevron, one for each orientation (left, right, top, bottom). Then, you’ll see that for each orientation, 3 different pictures need to be colorized, each one corresponding to a different state: normal, pressed, rest. In the end, it’s not 1 picture you’ll need to modify for the chevron but 12! imagine the time you’d be spending, manually editing all the buttons of Media Center.

A solution to that problem has been incorporated in Media Center Themer: using a single setting, more than 300 pictures of Media Center can be automatically colorized with the color of your choice. The tool has a built-in list of known mono-color bluish pictures used by Media Center. When one of these is loaded, Media Center Themerz colorizes the picture by extracting its original brightness and sends the result back to the screen. For this to happen, all you have to do is add a Colorize attribute in the Rcdata element that you saw previously. Colors are specified using the same rgb(r,g,b) syntax you used for changing text color (see the schema’s documentation of MediaCenterThemer/Resources/Rcdata for more details).

Here’s an example of a complete XML file that shows how to colorize the interface in green, taken from Sample 3:

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<Resources>
		<Rcdata Colorize="rgb(0,180,0)">
		</Rcdata>
	</Resources>
</MediaCenterThemer>
Automatic Colorization: Green

Note that automatic colorization only applies to pictures. You’ll still need to change the color of the text manually to get a perfect looking result. Also, keep in mind that this setting is here to help, not to do all the work for you. You should see auto-colorization as one less thing to care about when creating your theme, not an end-result on its own. Every picture that’s modified by that setting can still be modified with a Resource element. Remember that automatic-colorization may not always produce a perfect shade for some combinations of pictures and colors.

You’re now done with the basics and you should be able to do some nice things in Media Center. The next topics of discussion will give you detailed information on what else you can do with Media Center Themer, starting with modifying text labels.

  • Archive

  • Categories

  • Blogroll