[TUTORIAL] Tutorial On Skinning and Customizing WM65 Themes and Titanium QVGA VGA

[Mike20PR]

the main thread with all the info can be found here if you want to explore deeper

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

My aim is to centralize WM6.5 Themes and any discovery on how to skin items such as messageboxes, etc. and any discovery on which could be changed via registry values.

I myself have just started on playing around with it and here is what I have so far:

1) Files could be saved anywhere on the Storage memory. I opted to save my image files and tsk files on \My Documents\Themes folder instead of overwriting the default files on the \Windows directory.

2) Which could be skinned: Bubble, Listview, Menu, Messagebox, Scrollbar, Tabview, Taskbar, Toast, UpDown Control.

3) Main Registry keys/values to look at:

- HKLM\Software\Microsoft\Color\MultiColorTheme\
- HKCU\Software\Microsoft\Today\MultiColorThemeEnabl ed = 1
- HKCU\Software\Microsoft\Today\Bubble, etc.
- HKLM\Software\Microsoft\Color\MultiColorTheme\
- HKLM\Software\Microsoft\Color\MultiColorTheme\Them eColors
- HKLM\Software\Microsoft\Color\MultiColorTheme\Them eValues

A 'theme' cab is simply a .CAB renamed to .TSK. My instructions aren't 'there' but they're simply in-between the lines (I added this to my (now) mega-post):

1. Name your theme (use your name instead of the *)
2. Make your images according to the guidelines set. If you don't know what each image does, unpack some of the original shipped themes to get some ideas.
3. Make the TSK. Use WinCECabManager to edit my base theme so that wherever a key says "REPLACEWITHNAME" in the Registry section, put in *.
4. Add wallpapers. This is where you have to make separate files for VGA and QVGA. You need stwater_640_480.jpg, stwater_480_640.jpg, stwater_320_240.jpg, and stwater_640_480.jpg each at the resolutions given. Just drag and drop your files (these will be the backgrounds) into the Files section of your TSK and put them in the Windows folder and select Hard Code Path.
5. Save your TSK and create a new CAB. This will be your theme installer.
6. Drag and drop all of your TSK theme elements and the TSK itself into the files section and put all of the files in /My Documents/Themes/*/ and select Hard Code Path.
7. Test your theme by installing it. Select your theme in the Today settings and check that all of your theme elements are displayed. If some aren't, make sure you have everything in the right path and at the right resolution (also check filename!). If you had to edit something, just recompile your theme and test again.
8. If your theme works, share it! We all love a new theme in our midst Make sure you take some screenshots (preferably of the Home Screen and the Dialer with the right soft-key pressed) with SPB Screenshot. Then add your screenshots to the PSD template that is provided in the first post of this thread.

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

And here's the resolutions for VGA images:

listViewSelector.png 474x72
menuBorder.png 118x101
menuDownArrowBackground.png 289x67
menuSelector.png 172x72
menuUpArrow.png 34x30
menuUpArrowBackground.png 289x67
menuUpArrowDisabled.png 34x30
msgboxBorder.png 104x101
msgboxTitle.png 389x46
scrollbarThumb.png 26x70
scrollbarTrack.png 26x120
scrollbarUpArrowButton.png 26x40
scrollbarUpArrowButtonSelected.png 26x40
sipHighlight.png 120x52
softkeybar.png 480x52
softkeyHighlight.png 180x52
TabCurveH.png 68x46
TabCurveEdgeHShadow.png 68x46
taskbar.png 480x52
taskbarHighlight.png 120x52
toastBorder.png 472x230 (Somebody please tell me what the hell this IS!!!!)
UpDownArrowPushed.png 54x44
UpDownArrowPushedRight.png 54x44

Instructions on how to build a theme:

1. Name your theme (use your name instead of the *)
2. Make your images according to the guidelines set. If you don't know what each image does, unpack some of the original shipped themes to get some ideas.
3. Make the TSK. Use WinCECabManager to edit my base for VGA (and then for QVGA) so that wherever a key says "REPLACEWITHNAME" in the Registry section, put in *. Name the TSK "* VGA.tsk" for VGA and "* QVGA.tsk" for QVGA
4. Add wallpapers. This is where you have to make separate images for VGA and QVGA. You need stwater_640_480.jpg, stwater_480_640.jpg, stwater_800_480.jpg, stwater_480_800.jpg for your VGA tsk and stwater_320_240.jpg, stwater_240_320.jpg, stwater_400_240.jpg, and stwater_240_400.jpg for your QVGA tsk. Make each image at the resolution given in its filename. Just drag and drop your files (these will be the backgrounds) into the Files section of each of your TSKs and put them in the Windows folder and then select Hard Code Path.
5. Save your TSKs and create a new CAB. This will be your theme installer.
6. Drag and drop all of your TSKs' theme elements and the TSKs themselves into the files section and put all of the files in /My Documents/Themes/*/ and select Hard Code Path.
7. Test your theme by installing it. Select your theme in the Today settings and check that all of your theme elements are displayed. If some aren't, make sure you have everything in the right path and at the right resolution (also check filename!). If you had to edit something, just recompile your theme and test again.
8. If your theme works, share it! We all love a new theme in our midst Make sure you take some screenshots (preferably of the Home Screen and the Dialer with the right soft-key pressed) with SPB Screenshot. Then add your screenshots to the PSD template that is provided in the first post of this thread

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

You can also make your own template if you aren't as lazy as some people *cough*

Happy theming!!!!!!

Base Themes to get you started and get the feel of the theming attached

TITANIUM WALKTHROUGH

Titanium:[/b] CHome is the plugin/programs name. CHome is also one of the plugins as well. Its the Notifications Plugin. This is the plugin that has Voicemail, Missed Calls, Email, SMS, and MMS all in one line. Titanium is the name of the way it displays things. There is also Bronze and Neo. In Titanium the glass panel always centers itself after you move it. In Bronze (Smart Phone version of CHome from Windows Mobile 6.1), as you move from panel to panel from top to bottom, the Active panel slides down the screen or vice versa. Neo is from the Smart Phone from T-Mobile called the Shadow and made by HTC. Its similar to M2D where there is a list of Icons and a selector with the expanded panel taking up the rest of the screen. NeoTitanium is a revamped CPR layout of Titanium cloning the design of Neo hence why I named it NeoTitanium.

CHome Registry (Titanium): This should cover most of what youll need to know about the registry for CHome.

Directories (HKLM = HKEY_LOCAL_MACHINE): List of Directories CHome uses.
HKLM\Security\CHome\DefaultSettings
(NOTE: Any registry entries in this directory and its subdirectories will overwrite those in the Software Directory listed below when you disable and re-enable Titanium or Soft reset. Its basically a safety backup.)
HKLM\Software\Microsoft\CHome
(NOTE: Also, all of its subdirectories.)

Values:
ACTIONURL= Location of exe/ink/etc for the plugin when you press on the panel or press the center D-Pad Button (Example: ”\Windows\fexplorer.exe” to make the plugin open File Explorer)
SK1URL= Same as ACTIONURL, but for the “Left Soft Key”.
SK1TEXT= The text displayed for the “Left Soft Key”.
SK2URL= Same as ACTIONURL, but for the “Right Soft Key”.
SK2TEXT= The text displayed for the “Right Soft Key”.
DefaultXML/ExtensibilityXML= Active plugins and their order. Also tells CHome which CPRs to use (filename).
<Plugins Order="CClock;CMyFaves;CContacts;CPhone…" CPRFileName="Neo" DisplayStyle="Titanium" />
Filename is all text before the “ _resolution”.cpr (Resolution = 240x320 etc…).
(NOTE: ExtensibilityXML is the Priority and Default is a fall back in case something in ExtensibilityXML breaks CHome.)
Plugins= List of all available plugins. These are the same as the subdirectory names of CHome.
(NOTE: List of plugins in NeoTitanium that work; CAppointments, CClock, CContacts, CEmail, CHome, CHomeFavs, CInternet, CLinks, CMessage, CMusic, CMyApplication, CMyFavs, CMyPhotos, COffice, CPhone, CTesUIPlugin (Old Titanium Weather uses this), CText, CVoicemail, CWelcomeCenter, CWindowsLive, HTCMUSIC, Settings.)
Pages= Pages and order of pages within a plugin. If a plugin has plugins itll have subdirectories for each page.
GUID= Defines how the specific plugin works. What registry entries it “requires”. What layout template in the CPR it uses, etc.
(NOTE: The GUID “{F0A1B246-6E64-40cd-8E15-347D29FF6F18}” (without quotes) is for custom plugins. It requires a registry entry for the layout telling it which custom layout from the CPR to use. There are a few already in NeoTitanium. Use those as a template to make your own. You can add custom Registry values for text and images. If the registry is “CustomImage1”, itll look for <Image ID=”CustomImage1” Left…..” in the plugins layout of the CPR. It is best to not edit this value unless you are making a custom plugin of your own.)
ICONPATHS/Image/Pictures/Etc= Location of the image to be used. (Example: “\Windows\Neo_SelectionPanel_45x45.png� �)
If you see number in this field, they are pointing to that resource in a .dll. Usually itll be the Bronzeres.dll.
CONDENSETITLE/TitleText/PluginLabel/Etc= Usually the title displayed for the plugin such as CLinks being known as Launcher or Extras.
DataSource= Specifically for the custom plugin GUID. This tells CHome where to find the registry values for each page.
(NOTE: CondensedPage is a required subdirectory. As these are custom plugins, CHome does not know what information is used in condensed and must be told.)

The CPR XML code: The code inside the CPRs is XML. If you open the XML with an XML editor such as “Microsoft Visual Studio”, itll recognize the code and highlight errors in the same manner “Microsoft Word” does for spelling and grammar. It also color codes the code so its easier to read. The CPRs can be opened and edited with any text editor though like “Notepad” or “WordPad”.

EDIT: XML Notepad 2007 by microsoft for editing the cpr files found by justpctech. Special thanks to him for finding this.

The code: The main parts of the cprs are the left/top (Position) and width/height (size) entries represented in pixels. They control how big something is and where it is positioned onscreen. The left/top values are from the images of the specific layer, not the whole screen. So, if the layer is 240 pixels wide by 100 pixels tall, the left/top value are for within that rectangle. To scale images use this code, ScaleStyle="***". Known working values are Fit and Stretch. Color refers to the color of the text and its offset. OffsetNone is the text itself. Vertical/HorizontalAlignment is the layout of the text within its width/height box. If your image or text gets clipped off, try adding Clip=”False” to the Layer(s) in is inside of. Expanded layers are the layout of the plugin when active and Condensed is inactive. The page arrows are the NPI and MPI layers. TitaniumListView refers to Titanium. If you change both entries to BronzeListView, itll act as Bronze does on the Smart Phone as described above.

That should cover the basics of editing the CPR. Just start playing with them and youll catch on quickly as did I. If you know html or xml you have a head start.

[crazaytalent]

thanks looks good, ill look at it tonite or tomorro when I have time... now the Ive freed up a good 2 gig on my pc, im may be able to get photo or paintshop installed and take a crack at it...

[Longfist]

Interssting :yahoo:

[Mike20PR]

added a titanium registry and cpr walkthrough thanx to drkfngthdragnlrd

[thermus]

Hey,

I have a wierd thing going on. When I connect via active sync and transfer all the picture files to a fold on my desktop some of them are not there. I have the folder options set to show hidden files but they still dont all show up. I try to re transfer them to that folder and it asks to overwrite even though they are not there. :( I want to skin some of them items but they are not there for me to open.

example: all of the hh_ files do not show up

[Moebius]

I wonder if anyone's working on a ThemeGen (aside from the one MS is apparently going to host) for 6.5? I used to enjoy working with the old ThemeGen CE back in my Mogul days.

[D/\SH]

Originally Posted by Moebius

I wonder if anyone's working on a ThemeGen (aside from the one MS is apparently going to host) for 6.5? I used to enjoy working with the old ThemeGen CE back in my Mogul days.

there might be one or we can make that an Wckediden group project with the coders and get it knocked out.... kind of like an atr group project :) venum let me know if you are down for this since i would def need your help on a project like this from you since i dont know how to code it all.

[thermus]

can some PLEASE just tell me how to edit the hh_ files??

[Mike20PR]

Originally Posted by thermus

can some PLEASE just tell me how to edit the hh_ files??

which ones? from manila2d? they are image files bro you can take them out and edit them, not sure how to take them out using activesync like you stated cuz i usually take a custom theme perhaos in a zip file, open it up and edit. if its not showing in the windows folder then double check the explore settings in sync or you can open a custom theme like i do, find the name of the file you want to edit (you can look at the images also and find what you would like to change) edit to your liking, and replace the one in the windows folder with yours

[thermus]

Originally Posted by Mike20PR

which ones? from manila2d? they are image files bro you can take them out and edit them, not sure how to take them out using activesync like you stated cuz i usually take a custom theme perhaos in a zip file, open it up and edit. if its not showing in the windows folder then double check the explore settings in sync or you can open a custom theme like i do, find the name of the file you want to edit (you can look at the images also and find what you would like to change) edit to your liking, and replace the one in the windows folder with yours

When I open a theme file all I see is a bunch of .oo1.002.003.003 etc etc files. When I drag them of my ppc to my computer it's like they are hidden. I have my folder options set to show but the are still not visible. :( I have tried to recopy them to the folder and it asks to overwrite them which measn they are there somewhere :(

[NINE'SICKS]

originally found here:

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

I DON'T KNOW IF ANY ONES ACTUALLY TAKEN THE TIME TO READ THROUGH THIS AND I DONT KNOW IF ITS BEEN POSTED ANYWHERE IN THIS SITE BUT THERE'S A WAY TO MAKE THE SLIDER AS TRANSPARENT AS U WANT IT, THERE ARE A COUPLE OTHER TWEAKS ON THE ABOVE LINK BUT IM SURE MORE PEOPLE CAN BENIFIT FROM THE ONE BELOW

- How can I make total transparent silder?
Quote:
- Find Titanium_XXXxXXX.cpr file in the windows folder and edit it with notepad.
- Look for line: <Image ID="Image Default" Left="0" Top="0" Width="480" Height="260" ScalingAlgorithm="TriLinear" Opacity="1.0" />
- Change opacity to whatever you like( 0, 0.1, 0.2,... 1.0)

[omarnova]

anyone have a full custom taskbar on wm6.5? i got a few but cant get the full to work, im missin the message icon! can some1 share where they got theirs?

[jr5416]

Originally Posted by omarnova

anyone have a full custom taskbar on wm6.5? i got a few but cant get the full to work, im missin the message icon! can some1 share where they got theirs?

Tell you what bro im running juicy7 with 6.5 and im runnning with 6.1 taskbars might not make sence but i get all my icons i installed a 6.5 taskbar and no luck so maybe try what i did.

[NINE'SICKS]

here u go.. got what i need hope this helps.. dont forget to hit the thanx button..