Patchou's Cabana

The personal blog of Patchou

MCT Documentation – Reorganize the Menu

< back to Media Center Themer’s documentation index

One recurrent need among those who want to customize their Media Center interface is the need to change the start menu. Some menu items need to go, others have to be re-ordered, etc… the Personalize every Label section of this documentation already explained how to rename the menus by changing their corresponding string. In this page, you will learn how to make much more with these menus.

The Built-In Start Menu

The default start menu of Media Center consists of several entries such as Movies, Pictures, Music and Sports. Various add-ons such as MyMovies and TotalMedia Theatre can also add their own menu strip in there to simplify access to their own features. Overall, the start menu of Media Center is easy to use, pretty much complete, and tends to make people like Media Center in the first place. However, despite its many qualities, flexibility is somewhat lacking: users can’t re-order the default (built-in) menu items or hide the ones they don’t want to see. As you probably guessed already, this is where Media Center Themer can be of help.

In the schema’s documentation, take a look at the MediaCenterThemer\StartMenu\Builtin element. You’ll notice that it contains named elements for each of the built-in menus of Media Center: Extras, Movies, Pictures, etc… most of these elements can also include a collection of MenuItem sub-elements that identify individual items in each of the menus (for example, Pictures as PictureLibrary, PlayFavorites, VideoLibrary, etc…). Here are the two main attributes that can be defined for each of these elements:

  • Visible: true by default, If set to false, the menu or menu item will be removed from the start menu. Note: this attribute can’t be used to force show a menu hidden by Media Center itself (for non-supported features on a given system).
  • Order: a number between 1 and 100. If specified, the menu or menu item will be re-organized according to this value.

Here’s an example of code taken from Sample 5 that shows how all this translated in the real world:

<StartMenu>
	<Builtin>
		<Extras Visible="false"/>
		<Music Order="2"/>
		<TV Order="1"/>

		<Tasks>
			<MenuItem Name="Shutdown" Visible="false"/>
			<MenuItem Name="Settings" Visible="false"/>
			<MenuItem Name="Synchronize" Order="1"/>
		</Tasks>
	</Builtin>
</StartMenu>

Let’s see how it works: first, the Extras menu is hidden using the Visible attribute. Then, the position of the Music and TV menus is changed using the Order attribute. As you can see, TV will be displayed first, Music will be displayed second. Any other menu that does not include an Order attribute will be displayed in its original order, following all the menus that have been modified with Order. That means that the position of Music could be set 2 or 20, it wouldn’t change the fact that, in our example, it would be displayed second. If you want to completely re-order the start menu, you’ll need to specify a new order value for each of the menus or menu items that are in it.

The Tasks menu is kept visible and at its original position, however, its sub-menu items are modified. <MenuItem> elements also have a Visible and an Order attribute, in addition to a mandatory Name attribute that identifies each menu item individually. The list of allowed values for this attribute varies with each menu and is listed in the schema’s documentation. In the example, above, both the Shutdown and Settings entries are hidden and Synchronize is moved in front of everything else on the line. If you want to re-order the menus added by external add-ons, use <Addon1> to <Addon5> in the Builtin list. These elements work the same way as the others such as <Music>, except that their sub-menu items can’t be modified individually.

This simple set of attributes allows you to entirely re-organize your start menu. if you’re interested in theming menus, you should take this opportunity to experiment with that code before moving on to other subjects.

Adding a New Menu Strip

Now that you know how to move things around in the start menu, let’s see how to add your own entries into it. Take a look at the sample of code below:

Customization of the start menu
<StartMenu>
	<Builtin></Builtin>

	<Custom Title="My Theme Menu">
		<MenuItem Name="Display web site" HideToolbar="true">
			<Image>Logged Resources\ehres.dll\rcdata\SKITTLE.BOTTOM.PIECE.PNG</Image>
			<Link>http://www.patchou.com/projects/media-center-themer/</Link>
		</MenuItem>

		<MenuItem Name="Launch calculator">
			<Image>Logged Resources\ehres.dll\rcdata\STARTMENU.QUICKLINK.PICTURES.PLAYFAVS.FOCUS.PNG</Image>
			<Program>%windir%\system32\calc.exe</Program>
			<PlayingDirective>pause</PlayingDirective>
		</MenuItem>
	</Custom>
</StartMenu>

Custom menu items can do two main things: launch external programs, and display web pages inside Media Center. A third, more advanced option also allows you to execute any add-on-defined entry-point (see below). In the example above, the first menu item demonstrates how to show a web page. This can be particularly useful to access a web site on your internal network for various reasons (video content, security/camera monitoring, etc…). It’s a quick and easy way to extend the features of Media Center. The second menu item launches the Window’s calculator program and pauses the video/music that may be currently playing. When the program terminates (in this case, when the user closes the calculator), Media Center Themer automatically restores Media Center’s own window to its original position. Thanks to a proxy created specifically for this purpose, you can also use batch files (.bat) or any other script that does not requires user-interaction to execute more than one program at a time.

The Custom element of StartMenu is defined with a single attribute: Title. As its name implies, the Title attribute defines the label of your new menu strip. If you’re wondering how this menu will be ordered, consider Media Center Themer as working like any other add-on installed. To change the order of that menu, you’ll need to edit one of the Addon sub-elements of Builtin (see above). For now, let’s concentrate on the MenuItem elements shown in the example. Here is a list of their main attributes and elements:

  • Name attribute: label used to display the menu item in the start menu.
  • Image element: path to a picture file used to represent the menu in the start menu.
  • Link element: URL of an http web page to display when the menu item is selected.
  • Program element: path to a local executable file to launch when the menu item is selected.

Customize your New Menu

The four values presented above will allow you to add most of what you want to add into Media Center’s menu. Note that in that code sample, the pictures used for the menu items come from resources extracted from Media Center, as seen in the Change the Pictures page. In real scenarios, you’ll want to use pictures bundled with your own XML theme file. If you launch Media Center with this data, you’ll see a new "My Theme Menu" menu in the main list, with two sub-menu items. As for the ordering of the menu-items, they’re simply added in the same order as they are listed in your XML file.

If you feel like doing more with your menu items, here’s a list of additional attributes and elements you can use:

  • HideToolbar attribute: when used with a link to a web page, the navigation toolbar normally displayed at the bottom right corner of the screen is hidden.
  • ImageInactive element: Media Center will automatically generate a “grayed-out” version of the picture you specify in Image. If you want to specify your own, use this element.
  • PlayingDirective element: can be set to “close”, “pause”, “stop” or “mute”. That command that will be sent to Media Center to affect the currently playing media when the menu item is selected.
  • Addin and AddinContext elements: a special value used to send a command to any other installed add-in. For advanced users only.

Remember that Link, Program and Addin are all mutually exclusive. As always, you can find the full list of elements and attributes, with proper documentation, in the schema’s documentation. Always refer to it and, when possible, use a proper XML editor to validate your file. This will save you long hours of bug tracking. If you have more time to do some reading and you have mastered every other subjects covered by this documentation, the final User-Interface section of this documentation will keep you occupied for a while.

MCT Documentation – Personalize every Label

< back to Media Center Themer’s documentation index

Among other things, Media Center Themer lets you modify the text strings that are displayed in Media Center’s User Interface. This page will show you how.

Find the Strings

Media Center uses strings from its internal string tables to display most of its locale-specific content (“Guide”, “Mute”, “burn cd/dvd”, “video library”, …). Whenever you read the text labels of the menus, the music pages and the many other sections of the software, remember that the strings are loaded from a specific kind of resource: string tables. Every line/chunk of text is identified with a unique numeric identifier which allows Media Center to use the same UI files (MCML) for every language, and just load a different string table for every locale.

In the same manner you’ve learnt when modifying pictures, it is possible to enable a special logging setting to get a list of all the strings that are loaded by Media Center. Just set the LogStrings settings to 1 in the registry, as described in the Logging and Settings section of this documentation. Then, start Media Center, close it, and open the themer’s log file (again, by default, C:\ProgramData\Media Center Themer\MediaCenterThemer Log.txt). You’ll see lines such as these:

20:28:54| [diagnostic] String loaded from ehres.dll (14002): Tasks
20:28:54| [diagnostic] String loaded from ehres.dll (14071): close
20:28:54| [diagnostic] String loaded from ehres.dll (14073): shut down
20:28:54| [diagnostic] String loaded from ehres.dll (14012): settings
20:28:54| [diagnostic] String loaded from ehres.dll (6051): Guide Privacy Statement
20:28:54| [diagnostic] String loaded from ehres.dll (14003): burn cd/dvd
20:28:54| [diagnostic] String loaded from ehres.dll (14005): sync
20:28:54| [diagnostic] String loaded from ehres.dll (14030): Pictures + Videos
20:28:54| [diagnostic] String loaded from ehres.dll (14007): tune network
20:28:54| [diagnostic] String loaded from ehres.dll (12031): Fast Forward

Each line contains three pieces of information that you need to know about your strings: the source module from which the string was loaded (ex: ehres.dll), its unique identifier (ex: 14002), and its original value (ex: Tasks). There are two supported ways to change the strings: you can either specify the identifier (and optionally the source), or you can skip the “search in the log” part and simply specify what the string’s original value was. Be careful though, if you identify strings using their original text value, remember that your theme will only work on the same locale (same language) that you were using when creating the theme. For example, if you tell Media Center Themer to replace the text “Tasks” by the text “Wowbagger” and you later redistribute your theme file, only people using Media Center in English will see the new label. If, instead, you tell Media Center Themer to replace the string that has ID 14002, then your theme will work everywhere.

Apply your Modifications

Using the original text value to identify and modify a string is just a quick way to achieve what you want to do and is especially useful when testing or creating a theme for its own private use. Whichever method you choose, the end-result will go into your XML code, in the Strings sub-element of Resources. Here is an example:

<Resources>
	<Strings>
		<!-- Modify four strings of text -->
		<String Id="14030">All my Pics</String>
		<String Id="14002">Wowbagger</String>
		<String Match="shut down">bye bye</String>
		<String Match="Weather">How's the weather?</String>
	</Strings>
</Resources>

If you copy past the above code in your theme XML file (see Sample 4 for the complete file), you’ll notice that three labels in the start menu have been modified, two of them are shown in the screenshot below.

Modification of the "Tasks" and "shut down" labels

Remember that any of the text displayed by Media Center can be modified using this technique, it is not limited to start menu labels. All you need to do is get Media Center to show the string at least once, go into your log file, and take note of the string’s ID to make a perfect switch to whatever crazy thing you want to display instead.

Now that you’ve seen how to rewrite the user-interface’s text, let’s see how you can take complete ownership of the start menu items of Media Center.

MCT Documentation – Samples

< back to Media Center Themer’s documentation index

All the samples in this page are complete theme files. Just copy past one of these code sections in your XML file (by default, MCTDefault.xml) to give it a try.

Sample 1

Here, you’ll find various XML configuration files demonstrating different kinds of conditions and replacement attributes. The results in Media Center is not necessarily pretty but it may help you get more understanding of how attributes are defined in TextFormat.

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<!-- Sample file demonstrating different kinds of conditions/replacement values -->
	<TextFormat>

		<!-- Change all text originally displayed in white to pink and change the font to Courier New -->
		<Text Color="rgb(242,242,242)">
			<Replace Color="rgb(230,100,100)" Font="Courier New"/>
		</Text>

		<!-- Change all text displayed in blue with Segoe Media Center to Comic Sans MS, bold -->
		<Text Color="rgb(151,217,255)" Font="Segoe Media Center">
			<Replace Font="Comic Sans MS" Bold="true" />
		</Text>
		<Text Color="rgb(2,166,212)" Font="Segoe Media Center">
			<Replace Font="Comic Sans MS" Bold="true" />
		</Text>
		<Text Color="rgb(5,33,92)" Font="Segoe Media Center">
			<Replace Font="Comic Sans MS" Bold="true" />
		</Text>

		<!-- Change all text displayed in Segoe Media Center Light to yellow and a smaller font size -->
		<Text Font="Segoe Media Center Light">
			<Replace Color="rgb(255,255,90)" Height="20" />
		</Text>

	</TextFormat>
</MediaCenterThemer>

Sample 2

The following file is an example of how to change the colors of Media Center when it’s run in an Extender (tested with an Xbox 360). The procedure stays the same: Media Center is started from the extender and the log is checked to see what colors are in use. One particularity of the extenders is the absence of alpha blending effects in the text. This means for example that on the home screen, two colors are used instead of one (normally, Media Center displays the text in white and then applies transparency for all the items that are not selected). Here is the result:

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<!-- Sample file to replace the text color of the home screen in an Xbox Extender -->
	<TextFormat>

		<!-- Color of the text menu item when selected -->
		<Text Color="rgb(210,210,210)">
			<Replace Color="rgb(130,240,130)"/>
		</Text>

		<!-- Color of all the other non-selected items in the home screen -->
		<Text Color="rgb(104,185,200)">
			<Replace Color="rgb(205,240,205)"/>
		</Text>

	</TextFormat>
</MediaCenterThemer>

Sample 3

Here’s an example of an XML file that shows how to colorize the interface in green, modifying more than 300 pictures in one shot. The static background is modified using a custom picture.

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<!-- Sample file to change the color of all the blue pictures in Media Center -->
	<Resources>
		<Rcdata Colorize="rgb(0,180,0)">

			<!-- The default non-animated background is replaced by a different picture -->
			<Resource Id="COMMON.BACKGROUND.PNG">
				<Replace File="Theme\custom-pic.jpg"/>
			</Resource>
		</Rcdata>
	</Resources>
</MediaCenterThemer>

Sample 4

This sample modifies the text of four labels in the start menu of Media Center.

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<!-- Sample file to modify some of the text of Media Center -->
	<TextFormat>
		<!-- This modifies the font of some of the text -->
		<Text Color="rgb(151,217,255)" Font="Segoe Media Center">
			<Replace Font="Comic Sans MS" Bold="true" />
		</Text>
	</TextFormat>

	<Resources>
		<Strings>
			<!-- Modify three strings of text from Media Center -->
			<String Id="14030">All my Pics</String>
			<String Id="14002">Wowbagger</String>
			<String Match="shut down">bye bye</String>

			<!-- Modify the menu title of the Heatwave add-on -->
			<String Match="Weather">How's the weather?</String>
		</Strings>

	</Resources>
</MediaCenterThemer>

Sample 5

This sample shows how to hide the Extras menu from Media Center’s start menu, re-position TV, Music and Tasks on top of the menu (in that order), hide/reorder some of the menu items of Tasks, and add a new menu strip with access to a web site and the Window’s calculator. Pictures used in this sample come from resources extracted from Media Center using the LogResources setting.

<MediaCenterThemer xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="MCTSchema.xsd">
	<!-- Sample file to modify the start menu of Media Center -->
	<StartMenu>
		<!-- Changes to the built-in menus -->
		<Builtin>
			<Extras Visible="false"/>
			<Music Order="2"/>
			<TV Order="1"/>

			<Tasks Order="3">
				<MenuItem Name="Shutdown" Visible="false"/>
				<MenuItem Name="Settings" Visible="false"/>
				<MenuItem Name="Synchronize" Order="1"/>
			</Tasks>
		</Builtin>

		<!-- Addition of a new menu strip -->
		<Custom Title="My Theme Menu">
			<MenuItem Name="Display web site" HideToolbar="true">
				<Image>Logged Resources\ehres.dll\rcdata\SKITTLE.BOTTOM.PIECE.PNG</Image>
				<Link>http://www.patchou.com/projects/media-center-themer/</Link>
			</MenuItem>

			<MenuItem Name="Launch calculator">
				<Image>Logged Resources\ehres.dll\rcdata\STARTMENU.QUICKLINK.PICTURES.PLAYFAVS.FOCUS.PNG</Image>
				<Program>%windir%\system32\calc.exe</Program>
				<PlayingDirective>pause</PlayingDirective>
			</MenuItem>
		</Custom>
	</StartMenu>
</MediaCenterThemer>

MCT Documentation – Modify the UI

< back to Media Center Themer’s documentation index

If you’re still reading this after browsing through all the other sections of the documentation, you may start to feel a bit overwhelmed. Pictures, colors, text, etc… now that you’ve seen them all, here’s the recommended way to tackle a new theme project:

  1. Start by selecting a nice background picture for the theme. Spend as much time as needed on this as it will certainly be the corner stone of your new theme.
  2. Use auto-colorization and do many tests to find a good looking color that matches your background.
  3. Replace the default text colors so they look good in your windows. Text color is important and must not be neglected, check as many different screens as possible to make sure you don’t miss one.
  4. Explore Media Center to look for additional pictures to change (Music, Photos, TV, …) and colorize manually. If you don’t find any, you’ve not searched enough :-).

Now, if you have the patience to do more, here’s one last topic that may be of interest to you.

Advanced Topic: Windows’ Structure

Changing pictures and text color is interesting, but what about doing much more? for instance, you may want to re-organize the menu items on the start screen, erase elements in a couple of windows to achieve a minimalist look, etc… Media Center Themer lets you access and modify the actual structure of all Media Center’s windows. One note though: this topic is advanced and time-consuming one; nevertheless it’s also the most interesting thing to do from a geek point of view.

Here is what’s it about: each windows of Media Center is created from a template, located in XML files written in MCML: Media Center Markup Language. Each different screen uses one or more of these structure files to present data to the user. With the LogResources setting enabled (see the Change the Pictures section), you’ll find most of these files located in the html sub-directories of ehres.dll and microsoft.mediacenter.shell.dll. Both .xml and .mcml files represent the same thing and can be opened in any text editor. It is recommended to use a proper XML editor as it will be able to validate your changes to some extent. Changing something in a window means finding the proper file and figuring out the syntax of whatever you want to achieve. Luckily, Microsoft being the nice organized company that it is, you’ll find documentation about the MCML format online, in the MSDN.

As an example, let’s change the time that’s normally displayed in the top right corner of Media Center’s screens. The idea is that you may also want to see the current date, including the day of the week so that it looks like this:

Media Center - Before
Media Center – Before Modification
Media Center - After
Media Center – After Clock Modification

As this element, the time, is displayed in many windows, chances are that it’s defined in one single place, then shared among different screens. Looking into the logged resources directories, you’ll find a file called CLOCK.MCML which looks like what you’re searching for. The only way to know that for sure it to give it a try so make a copy of it in the directory of Media Center Themer, call it NewClock.mcml and add the following definition in your XML data file:

<Resources>
	<Html>
		<Resource Id="CLOCK.MCML">
			<Replace File="NewClock.mcml"/>
		</Resource>
	</Html>
</Resources>

As with pictures, this code instructs the tool to load NewClock.mcml instead of Clock.mcml when the resource is requested by Media Center. Now open NewClock.mcml in your favorite XML editor and spend some time trying to figure out what it does exactly. Use the MSDN documentation as much as possible to try and match element names with actual information. In order to achieve what we want, you’ll want to concentrate on the following line:

	...
	<Color Name="Color" Color="color://comm:OffWhite"/>
 <DateTimeFormats Name="Format" DateTimeFormats="ShortTime"/>
</Properties>
...

Notice the DateTimeFormats attribute being set to ShortTime… if you look at the documentation of the DateTimeFormats enumeration in the MSDN, you’ll find all the values that can be used for this attribute. Looking at some of their own examples, you’ll also see that more than one value can be specified and that everything must be separated with commas. So change the line to the following (put everything on a single line, no breaks), save and restart Media Center. You should now see the date and day of the week displayed next to the time.

<DateTimeFormats Name="Format"
	DateTimeFormats="LongDate,ForceDayOfWeek,ShortTime"/>

This small example illustrates how much the Media Center interface is open to changes. It is not straightforward and you’ll probably need to spend many hours trying all sorts of things, crashing Media Center, before anything good can happen. Don’t get discouraged too fast: for most people, changing the pictures and font attributes of Media Center is more than enough so you may want to stick to that at the beginning. Just remember that it is possible to do much more than that.

Epilogue

You’re now done reading this documentation, thank you for your time and patience. You’ll find additional examples of what can be done in the Samples section. As always though, the best thing to do is practice and learn along the way… have fun!

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