PPCGeeks - View Single Post - HOW TO: Customize TouchFLO3D / Manila Themes

**GoodThings2Life** · #2 (**permalink**) 11-13-2008, 03:35 PM

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:

Code:

<?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:

Code:

     <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)...

Code:

<?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.

Code:

<?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...

Code:

      <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:

Code:

<?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...