HOW TO: Customize TouchFLO3D / Manila Themes

[GoodThings2Life]

Over the past week, I've seen dozens of posts asking for help on how to modify the Diamond and Touch Pro themes. Unfortunately, I've also noticed that there is very little coherent, thorough documentation on the topic. Lots of little one liners here and vague hints but no real tutorials. That changes right NOW. I want this post to become a great guide for editing and customizing the themes.

If you're like me, you look at the Sprint theme and say something like, "The Sprint theme looks pretty decent except for that god-forsaken yellow. It's like a snow field that somebody at Sprint decided to pee on! Why would they do that?!"

Well, it's taken me a week to get it how I like it, but I did it. I hope to God I never have to do it again! Editing Manila themes is by far the WORST experience I've ever had with Windows Mobile tweaking. It's time consuming and challenging.

But while I never want to go through the process again, I do want to share some information I learned from the experience and encourage others to add their own information here-- as long as it's thorough! Be precise when contributing, including step-by-step.

OK, so let's get started... at the bottom you will find two installers-- sprint_manila_blue will tweak the default Sprint skin and will leave the Sprint Music and Sprint TV tabs as they are out of the box. The "revised" tweak will remove the Sprint Music Store link, rename the Sprint Music tab to "Music", and remove the Sprint TV tab.

Other changes-- ALL YELLOW has been replaced with a deep shade of BLUE (it's not exact, but it's pretty close to the PPCGeeks dark blue background, and surprisingly that wasn't intentional, lol). Also, the unread mail/sms notifications are RED... I was going to be consistent and use the blue, but they really didn't show up very well.

For those interested, the blue has a hex value of #283048. The grays used are #333333, black is #000000, and white is #FFFFFF. The light grays used for the email account, landscape, and program highlights are #C1C1C1.

Here are some screenshots:











Here's how to install this:

1. Copy the file of your choice to your phone.
2. DISABLE TOUCHFLO3D and switch to another Today skin (temporarily). Do this by going to Start > Settings > Today ... select a skin that isn't "Sprint" and then click Items and uncheck TouchFLO3D. IF YOU DONT DO THIS, BAD THINGS MAY OR MAY NOT HAPPEN, SO JUST DO IT!
3. Install the file by tapping on it in File Explorer.
4. Soft reset even if it doesn't ask you to do so!
5. Re-select the Sprint skin and re-enable TouchFLO3D (reversing step 2).

Troubleshooting:

If you have trouble with this or if some of the graphics don't look right or if you actually find some yellow that I've somehow missed, let me know so I can look into it.

THIS CAN ONLY BE INSTALLED ON THE STOCK SPRINT THEME. DO NOT INSTALL THIS IF YOU HAVE ANY OTHER ROM OR SKIN! DO NOT INSTALL THIS IF YOU HAVE MADE EXTENSIVE CHANGES ON YOUR OWN TO THE SPRINT THEME!

[GoodThings2Life]

OK, here's where some explanation is going to begin...

First of all, I want to link to a few XDA threads for some information and ready-made themes:
Manila Editor -- You'll need this to extract and replace many of the Manila graphics.
Diamond TouchFLO3D Config -- This is an easy way to disable some of the tabs you don't use OR to enable some of the ready-made themes.
Ready Made Themes for TF3D Config -- Pretty obvious what this is.

Now, with those important tools out of the way, let's begin...

Customizing Tab Order and Tab Names
If you edit the file called 090661f7_manila, you'll be able to edit all the "Display Names" for the tabs. For example, if you want to call it "Music" instead of "Sprint Music", this is the file to do it. You'll also need to edit this file if you want to ADD tab names as well. So if you want to add the Calendar or Communications tabs, you'll need to add their names here too. (More on that later).

Here's an example of the file:

<?xml version="1.0" encoding="utf-16"?>
<xliff version="1.0" lang="en-us">
  <file datatype="plaintext" original="icons">
    <header />
    <body>
     ........
     <trans-unit id="IDS_MUSICTITLE">
        <source>Music</source>
      </trans-unit>
     ........
    </body>
  </file>
</xliff>

As you can see, I changed the IDS_MUSICTITLE value from Sprint Music to just plain Music. But you need all three lines to add new ones, so if I want to a Calendar tab it might look something like this:

     <trans-unit id="IDS_CALENDARTITLE">
        <source>Calendar</source>
      </trans-unit>

Again, I'll post more information on that process later.

How to Disable or Re-Order Tabs:
For this part, you'll want to turn your attention to two files... one of which might not exist until you create it... 26948339_manila and 26948339_manila_disabledtabs. Let's start with the one you have to create (it's also created automatically with TF3D Config tool)...

<?xml version="1.0" encoding="utf-16"?>
<DisabledTabs>
  <Page Order="10" Name="tv.page" PackageName="HTC" Title="[[IDS_SPRINTTV]]" ExternalScriptPath="HTC\Scripts\sprinttv.luac">
    <ComponentReference Name="page" Mode9Path="HTC\sprintfavorites.mode9" Component="GizmoRoot" SmartComponent="true" />
    <ComponentReference Name="icon_normal" Mode9Path="HTC\sprinticons.mode9" Component="SprintTV_Off" />
    <ComponentReference Name="icon_selected" Mode9Path="HTC\sprinticons.mode9" Component="SprintTV_On" />
    <ComponentReference Name="icon_preview" Mode9Path="HTC\sprinticons.mode9" Component="SprintTV_Preview" />
  </Page>
</DisabledTabs>

In this case, I've disabled the SprintTV tab, so I moved the entire "Page" section of code for SprintTV to this file. I removed it from the other file (more on that in a moment).

The other file is a lot longer, but it's pretty easy to follow once you understand the layout of the PAGE code shown above.

Oh and by the way, this is where you can change the order of buttons in Landscape mode as well as the content on the Music page and various dialogs and menus. I think it's fair to say that this is definitely one of the "CORE" Manila files. While I encourage having a backup of ALL the original files in case of a mistake, if you don't make one of this file in particular, you're just begging for trouble.

<?xml version="1.0" encoding="utf-16"?>
<Manila Mode9Path="HTC\manila.mode9">
  <PreloadImage Path="HTC\Assets\Images\Common\dottedline.qtc" />
  <PreloadImage Path="HTC\Assets\Images\Common\transparent.qtc" />
  <PreloadImage Path="HTC\Assets\Images\Common\alpha-hitbox.qtc" />
  <PreloadImage Path="HTC\Assets\Images\Common\down_arrow.qtc" />
.....
  <Navigation>
    <PageGroup Name="Root">
      <!-- 'page' extension == Manila pages -->
      <Page Order="0" Name="home.page" PackageName="HTC" Default="true" Title="[[IDS_HOMETITLE]]">
        <ComponentReference Name="page" Mode9Path="HTC\FakeHome.mode9?testParam=1" Component="GizmoRoot" SmartComponent="true" />
        <ComponentReference Name="icon_normal" Mode9Path="HTC\icons.mode9" Component="Home_Off" />
        <ComponentReference Name="icon_selected" Mode9Path="HTC\icons.mode9" Component="Home_On" />
        <ComponentReference Name="icon_preview" Mode9Path="HTC\icons.mode9" Component="Home_Preview" />
      </Page>
      <Page Order="1" Name="people.page" PackageName="HTC" Title="[[IDS_FAVORITEPEOPLETITLE]]">
        <ComponentReference Name="page" Mode9Path="HTC\people.mode9" Component="GizmoRoot" SmartComponent="true" />
        <ComponentReference Name="icon_normal" Mode9Path="HTC\icons.mode9" Component="People_Off" />
        <ComponentReference Name="icon_selected" Mode9Path="HTC\icons.mode9" Component="People_On" />
        <ComponentReference Name="icon_preview" Mode9Path="HTC\icons.mode9" Component="People_Preview" />
      </Page>
.....

Like I said, there's a lot here, but here's a brief breakdown. The first section is the definition of global graphics like the sliders and icons and such that are used consistently throughout the whole interface. More on that MUCH later.

Moving down to the Navigation section, you'll see the Page sections. These define the individual tabs that appear. In the example above, I pasted the code sections for the Home and Favorite People tabs.

Notice the [[IDS_HOMETITLE]] and [[IDS_FAVORITEPEOPLETITLE]] ... this is where the variables from the first file come into play. Although you can set them statically here, I do NOT recommend it.

Now as far as reordering the tabs is concerned, in each Page section you'll see the parameter labeled Order="#" where # is the actual order it appears on the navigation menu beginning with Home at 0. But what if I want my Programs tab to be 0 and Home to be 9? Simple-- change the order for both pages, save, and soft-reset... Presto! Now you'll see the Programs tab by default.

Add a Call History Tab
Adding the Call History tab is the easiest of the custom tabs to add to your interface. You just add one section of code to your 26948339_manila file using the guidelines above and the attached 1d1ee632_manila file to your \Windows directory on the phone. Here's the code to add...

      <Page Order="10" Name="callhistory.page" PackageName="HTC" Title="[[IDS_CALLLOGTITLE]]">
        <ComponentReference Name="page" Mode9Path="HTC\CallLog.mode9" Component="GizmoRoot" SmartComponent="true" />
        <ComponentReference Name="icon_normal" Mode9Path="HTC\Icons.mode9" Component="People_CallHistory_Off" />
        <ComponentReference Name="icon_selected" Mode9Path="HTC\Icons.mode9" Component="People_CallHistory_On" />
        <ComponentReference Name="icon_preview" Mode9Path="HTC\Icons.mode9" Component="People_CallHistory_Preview" />
        <ComponentReference Name="icon_notification" Mode9Path="HTC\Icons.mode9" Component="Notification_People_CallHistory" />
      </Page>

Just be sure you change the Order="10" to use a number that's not already in use which may involve scrolling through the file to check.

Changing the Internet Globe Icon or Remove the YouTube Link
For some reason, Manila Editor has a really hard time replacing this graphic. In fact, if you even try, you'll end up with a "white out" effect where the icon belongs. The actual manila files in question are:

Globe: 7d3f1247_manila
Globe Selected: 3f00cd2f_manila

However, until Manila Editor works for this graphic, you might think you're out of luck. Not really... instead of those two files, create your own graphics based on 512x256 dimensions with 96dpi and save them as Globe.png and Globe_Selected.png. Then, edit 27c65cbd_manila instead. Change the code for the entire file to look like this:

<?xml version="1.0" encoding="utf-16"?>
<InternetPortal>  
  <IncludeUserFavorites>True</IncludeUserFavorites>
  <Banner
    DefaultImagePath="\Windows\Globe.png"
    SelectedImagePath="\Windows\Globe_Selected.png"
    Width="480"
    Height="215" />
  <OperatorLinks>
    <Link
      Text="YouTube"
      Executable="\windows\youtube.exe"
      ImagePath="\Windows\HTC\Assets\Images\InternetPortal\youtube.qtc" />
  </OperatorLinks>
</InternetPortal>

Notice the \Windows\Globe.png and \Windows\Globe_Selected.png? That's where your new files need to go along with this updated file.

The only other graphic that has this problem (for now) is the primary background graphic, which is 4a087e41_manila. I'll post more details on that later.

Oh, speaking of 27c65cbd_manila... if you remove the code between the OperatorLinks section, you'll also get rid of the YouTube Link on the Internet tab.

Replace the Email/SMS Notification Icon
If you want to change the color of the Email/SMS Notification icon, you need to use Manila Editor to replace file 36eabe92_manila. To do this, copy the manila file to your computer, use Manila Editor to open it, and click Save As... save it as a PNG on your computer, recolor it, and the use Manila Editor to Replace it. Then copy the new 36eabe92_manila file to your phone.

There's plenty more to come...

[GoodThings2Life]

These are advanced hacks that may or may not work and/or may or may not require additional tweaking on your own:

Add a Comm Manager Tab
Adding the Comm Manager tab is pretty easy, however, there are some limitations to doing so. Specifically, the text is always BLACK at first (which doesn't work well on the stock background). There is a hack to change the font color, however, it also changes the Settings > Sounds font color as well. This means that changing it to really bright colors (like white) doesn't work either. I'll link to the font color hack and let you choose whether to implement this one on your own. Here's the code you need:

Add the following code to the file: 090661f7_manila

      <trans-unit id="IDS_COMMUNICATIONS">
        <source>Comm Manager</source>
      </trans-unit>

Add the following code to the file: 26948339_manila

      <Page Order="9" Name="communications.page" PackageName="HTC" Title="[[IDS_COMMUNICATIONS]]">
       <ComponentReference Name="page" Mode9Path="HTC\settings.mode9" Component="CommunicationsPageComponent" SmartComponent="true" />
       <ComponentReference Name="icon_normal" Mode9Path="HTC\icons.mode9" Component="Settings_Communication_Off" />
       <ComponentReference Name="icon_selected" Mode9Path="HTC\icons.mode9" Component="Settings_Communication_On" />
       <ComponentReference Name="icon_preview" Mode9Path="HTC\icons.mode9" Component="Settings_Communication_Preview" />
      </Page>

Just be sure you change the Order="9" to use a number that's not already in use which may involve scrolling through the file to check.

Add a Calendar Tab
OK, this one seems a little pointless since it literally only adds a calendar that doesn't do anything. For now, I'm going to link to the plugin for those who want to try this out. If and when this plugin or another plugin is available that offers signficant functionality, I'll update this section.

http://forum.xda-developers.com/showthread.php?t=423647

Use Flip Clock Instead of Digital Clock
In order to install the Flip Clock you will need either the White Flip Clock or Glass Flip Clock packages below. Once you save the file, extract the files in the package and copy them into the \Windows folder on the phone. Oh and by the way, if you like the Glass Clock, I do recommend using a mid-to-light color background so the numbers show up (or just replace the number graphics yourself using Manila Editor).

Of course, you can always change your mind and revert back to the Sprint Clock at any time by using the SprintClock.zip package.

White Clock:


Glass Clock:



Enable Background on All Tabs + Flip Clock
In order to enable backgrounds on all tabs, you must be using the Flip Clock. No one seems to have gotten it working with the Sprint clock yet. That said, all the existing packages floating around also require you to install things in sequences and all sorts of nonsense. My package does not... just unzip all the files into the \Windows directory on the phone, and soft-reset (or disable TouchFLO3D from Start > Settings > Today > Items).

Again, the packages are available in White or Glass in the attachments below. Also, you can revert back to the default setup at any time using the SprintClock.zip package.

[GoodThings2Life]

This post will briefly document how to use the Manila Editor (and possibly other tools in the future).

Manila Editor is the tool available for directly editing the Manila graphics files. This allows you to start designing your own themes or tweak graphics. While there's not much too it, it can be pretty time consuming and tedious to edit the graphics, so here's an explanation of how to make it as effective as possible.

Before we begin, make sure you have ALL of the following on your PC:

1. Manila Editor available from sushilange on XDA.
2. Graphic Editing program (you can use whatever you want, but I'm partial to using Paint.NET)
3. All of the ########_manila files from the Phone. I've attached the default Sprint Theme to use as a template (see attachments below).

Now that you have those, let's begin...

If you haven't already, extract the "Original Files.zip" file to a folder where it's convenient for you. Immediately make a copy of the entire folder called "New Files" (ALWAYS ALWAYS ALWAYS make changes to the New Files copy and save the Original Files as a backup in case you completely screw up an image!)

First, open Manila Editor (NOTE: If you're running Vista, right click and Run As Administrator). You'll see pretty much an empty looking program with only a few options. Let's click the most obvious one-- Select Path...



Now, back on the Select Path dialog, choose the location of the New Files...



This will take some time to process, but when it's done you'll see a very large list of files on the left side, and a preview of the image on the right side...



Now, notice how it shows the Manila filename as well as the "interpreted" QTC filename. The next thing you want to do is Save the graphic you want to change to your computer (preferably somewhere different from the manila files like "New Graphics" for example). To do this, find the file you want to save, and click the Save as button. This will prompt you for the location and filename you want to save. In the example below, I made it easy on myself and called it ########_familiar_name.png (always save as PNG for the best results)...



Once you do that, it returns to the main Manila Editor screen. For now, you'll want to save all the files you want to modify. If you plan on making your own theme, you might be inclined to use the Export option. Otherwise, go ahead and save just files you want, and then you'll want to use Paint.NET or whatever tool to edit those graphics as you see fit... go ahead, I'll wait...

Ready? Good... now let's replace the original graphics. Click the Replace button for the graphic you want to replace. It will prompt you for the graphic file (which you can browse to), a header location (99% of the time, just accept the default, I have found no files requiring a different header... yet), and whether you want to make a backup of the original file. I always make backups...



Once you do that for all the graphics you plan to change, you have to options. You can either bundle the whole file package into a Zip file, or you can bundle just the files you've changed into a Zip file. I recommend testing your work first, so for now, let's just bundle the Changed files, and then you can put those files on your phone's \Windows directory...

Click Zip, Only changed images, and give your file a name/location...



Now, once you have the zip file created, I would extract that file to a whole separate folder from what you've been working with. Now, take those files, connect your phone, open My Computer > Mobile Device > My Windows Mobile-based Device, and drop those files into the Windows folder (I usually Copy/Paste to make it easier).

It will ask if you want to replace the existing files. As long as you have a backup of the originals, click YES TO ALL.

To view the changes, you should either Disable/Reenable TouchFLO3D from Start > Settings > Today > Items tab... or you should soft-reset your phone. If something goes horribly wrong, restore the files from the backup you made.

That's pretty much it, but as you can tell by the screenshots... there are a LOT of files (just look how tiny that scollbar is!!) so that's why I say this isn't an easy or quick process.

Also, if you want to customize my theme from the first post, you are welcome to do so. I have also posted the files I've modified in the attachments below.

[lipidfats]

thanks, i've been wanting to get rid of that yellow ever since i first booted my phone... i like the red notifications you have, but are you planning to make a version of "sprint manila blue revised" with blue notifications? i think i saw a post on here that told how to do it, but it'd be nice to have an all in one like your originals.

[GoodThings2Life]

As I said in my initial post, I am NEVER making changes to my version again, lol. However, by the time I'm done documenting, you'll be able to make any change you want.

[shaun0207]

Great start. I see why you said its a "bear" to change. I must be really weird. I like the yellow icons.

FYI: Pretty cool that it caught the PM I sent you.

[IMG]file:///C:/DOCUME%7E1/richmosp/LOCALS%7E1/Temp/moz-screenshot-2.jpg[/IMG][IMG]file:///C:/DOCUME%7E1/richmosp/LOCALS%7E1/Temp/moz-screenshot-3.jpg[/IMG][IMG]file:///C:/DOCUME%7E1/richmosp/LOCALS%7E1/Temp/moz-screenshot-4.jpg[/IMG]

[GoodThings2Life]

You're not weird, just different tastes. I just happen to think that yellows and greens are the ugliest colors in the spectrum.

Then again, I am generally not a flashy "look at me" kinda guy. I like darker, mellower shades that are subtle, professional, but still mix in enough color to be easy on the eyes.

[shaun0207]

Originally Posted by GoodThings2Life

You're not weird, just different tastes. I just happen to think that yellows and greens are the ugliest colors in the spectrum.

Then again, I am generally not a flashy "look at me" kinda guy. I like darker, mellower shades that are subtle, professional, but still mix in enough color to be easy on the eyes.

LOL. That's bad, dude. Hey did u check that PM?

[Fruzion]

How do I get 36eabe92_manila on my computer... my computer dosen't show the Windows folder when active sync'd, and TC won't let me copy the file elsewhere...