HOW TO: Customize TouchFLO3D / Manila Themes

[GoodThings2Life]

Originally Posted by Hallucination

No, I've tried all three headers. All gives me the same result with the edited image being off center. Can you try it out?

What I had to do is to do a canvas size to 316, and resized back to 256. And it works fine. Hmm...wonder why.

Is that true of all the weather graphics or just that one? I know there's a few graphics Manila Editor doesn't handle well in the current build, so I'd like to add any known ones to my list.

[wavezero]

What are you using to edit the XXXXXXX_manila files? I could tweak a few of them with total commander, but the one I really want is 128k and TC maxes out at 64k...

[GoodThings2Life]

I copy all of the files to the PC and use Notepad or Manila Editor.

[ibivibiv]

Since this is looking like a good Sticky candidate, is anyone interested in inventorying the touchflo 3d files? The names are pretty darn difficult to decipher anything meaningful from. I've been digging through them one at a time, but its very cumbersome and I don't always know what they are. I found a nice listing of some of them that I'll paste here. If I get more info I'll add them in future posts.

FYI most of these are for grafix files. I'm trying to get a good working list of the xml config files going.

Graphics Files:

6c658481_manila Background Square
4e670504_manila Clock Tab Stack + AM/PM Indicators
18c460d8_manila Top Bar
1864da05_manila Bottom Bar
1e29e8e7_manila Slide Button
776726f2_manila Menu Home Big
4d06823d_manila Menu Home Small
1d2cf08e_manila Menu Contacts Big
40b0d619_manila Menu Contacts Small
5acc5861_manila Menu Sms Big
5780582c_manila Menu Sms Small
6b46b991_manila Menu E-Mail Big
59c727fc_manila Menu E-Mail Small
03092c92_manila Menu Internet Big
7fbd2c5d_manila Menu Internet Small
3c5a5c12_manila Menu Photos/Videos Big
5fde419d_manila Menu Photos/Videos Small
0cfe494a_manila Menu Music Big
7b7eb7b5_manila Menu Music Small
7a18fbb9_manila Menu Weather Big
730f3c64_manila Menu Weather Small
06c88ffa_manila Menu Settings Big
037c8fc5_manila Menu Settings Small
48c215bc_manila Menu Programs Big
40ebb8a7_manila Menu Programs Small
6771380f_manila Contacts Frame
7d3f1247_manila Globe Opera
1c813f6c_manila Clock numbers 1
0aa5b915_manila Clock numbers 2
78ca32be_manila Clock numbers 3
757e7332_manila Clock numbers 4
060bb8f2_manila Weather - Moon
1bbfdc9b_manila Clock Tab Stack 2 + Alarm indicators
00ad7edb_manila (home_clockfocus_middle)
063f5858_manila (?_focus_?)
1608b879_manila home_focus_glow
274184c5_manila home_focus_side
281cbfcf_manila home_focus_middle
39064485_manila home_clockfocus_glow
4a3f10d1_manila home_clockfocus_side


XML Config Files:

090661f7_manila IDS Name Properties For Titles
26948339_manila Touchflo 3D tabs (Order and Name) and Icons
26948339_manila_disabled Kind of what it says (disabled tabs from above file)
27c65cbd_manila Internet Tab with links
00c5a875_manila Music IDS Properties for Music Tab
00336a977_manila Some kind of file relating to SprintMusicLauncher?
0eda40d4_manila Stylesheet for txt colors
17278385_manila Stylesheet for fonts
1abf2ef5_manila IDS Properties for "Close"
1c8e4e38_manila IDS Properties for Question and Response
1dea52e0_manila IDS Properties for Favorites People
24cdd53b_manila IDS Properties for email, tasks, messages, web search
32b4cd2c_manila IDS Properties for Photos and Videos
3398255c_manila IDS Properties for Music
3b89434c_manila IDS Properties for Phone settings (ringtones, volume, etc.)
3ee7eaa1_manila IDS Properties for Contact actions (call, txt, etc.)
4cdb88a5_manila Audio Textures for Controls (positioning buttons)
50d9e6de_manila Stylesheet for LMenu button text
532f9cce_manila IDS Properties for SprintTV actions
590ad244 IDS Properties for Main View (date format, Missed call indicators etc.)
5aee9e83_manila IDS Properties for Email actions and messages
5c6fbc96_manila IDS Properties for Internet page
5fd81316_manila Channel config for SprintTV (Launch Icon)
62b1c5d9_manila IDS Properties for Call Log
6be6fd25_manila IDS Properties for Programs Tab
6fe0d90d_manila IDS Properties for Manila Title
6fe8c8cf_manila IDS Properties for Music Lists
743c3099_manila IDS Properties for Messaging
767a192b_manila IDS Properties for Weather
7895cc73_manila Stylesheet for background, tabs etc.
7f6b00a5_manila IDS Properties for Music (playing I think)
7fc62a3c_manila IDS Properties for Unknown?????

[wavezero]

OK, so this may be getting greedy- slap me if it is... Is there a way to:
Use the clear flip clock
and flick it up to show appointments etc.
but NOT enable custom background for all tabs?

I like the clear flip clock and I've seen where you can still get the clock to flick up, but you need to enable the background on all tabs, which I don't want to do. Thanks!

[GoodThings2Life]

Just use the Glass Flip Clock package... you don't need to do the Backgrounds on All Tabs package to have that.

[wavezero]

I downloaded the zip file you posted (FlipClock_Glass.zip) and pasted the contents in the \windows file with TC. The glass clock is installed and looks great. But when I do a finger swipe up nothing happens. With the default clock it scrolls down allowing you to see appointments (if you have a voicemail you cannot see them).

[GoodThings2Life]

I'm not sure I quite understand what you're looking to accomplish ... if I install the glass cab, my home page looks the same as I would expect it to look. Can you PM me more details?

[shaun0207]

Originally Posted by 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...

Can I just drop this into the Manilla folder or do I have to go through of the rest steps you outlined above?

[chronster]

this is the best thread ever lol