When creating my theme Reflex, instead of sticking purely to theme builder and adding my own hand-coded SVG within it, I took the approach of writing my homescreen.svg completely from scratch and then compiling the theme by hand. Following this method is definitely more tedious and prone to mistakes, however, it does allow a lot more control over the home screen objects. For example, the cutoff GPS icon in 6.0 themes was not an issue and I was not limited to only being able to manipulate objects that theme builder adds an ID tag to in it's generated SVG. It also allows for much more efficient svg resulting in a faster, more fluid theme.
I have been asked by some other theme builders to share the method used to do this, hence this thread. I should also add that I'm sure I'm not the only person who is using this method and don't consider it to be my discovery, however, I have had to learn quite a few things about the packaging of the theme files by trial and error and want to share these tips also.
To break down the steps I used initially in building Reflex:
1) I created everything except the home screen in Theme Builder in the usual manner, including the home screen banner as this is used on other screens such as the lock screen.
2) After saving and naming the theme file, I removed delete permissions from the temp folder and exported an OTA version of the theme.
3) From the windows temp folder, I located and copied the directory containing the theme files to my theme directory and named the folder 'source'.
4) Again, from the temp folder, I located the xxxxxx.properties file and copied that into my newly created source folder and renamed it 'build.properties'.
5) I opened up the 'build.properties' file in notepad and modified the .contentDir to point to my 'source' directory and the .outFileDir to point to where I wanted the compiled theme to be placed.
Here's an example properties file:
Code:
ThemeBundler.applicationName=Reflex
ThemeBundler.libraryName=com_plazmic_theme_Reflex
ThemeBundler.targetOs=6.0.0
ThemeBundler.targetDevice=9650
ThemeBundler.contentDir=U:\\Themes\\Reflex\\OS6\\480x360\\source
ThemeBundler.outFileDir=U:\\Themes\\Reflex\\OS6\\480x360\\jads
ThemeBundler.exportAlx=false
ThemeBundler.exportZip=false
ThemeBundler.exportJad=true
ThemeBundler.exportCso=false
ThemeBundler.exportDebug=false
ThemeBundler.exportThemeReader=false
ThemeBundler.codFileName=com_plazmic_theme_Reflex.cod
ThemeBundler.jadFileName=com_plazmic_theme_Reflex.jad
ThemeBundler.rapcFileName=com_plazmic_theme_Reflex.rapc
ThemeBundler.csoFileName=com_plazmic_theme_Reflex.cso
ThemeBundler.debugFileName=com_plazmic_theme_Reflex.debug
ThemeBundler.alxFileName=Reflex.alx
ThemeBundler.zipFileName=Untitled.zip
ThemeBundler.zipOverwriteBundle=true
ThemeBundler.vendor=
ThemeBundler.copyright=
ThemeBundler.version=
ThemeBundler.description=
6) Next, I created a batch file in the source dir called 'build.bat' with the following contents:
Code:
@echo off
"c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\svgc.exe" *.svg
"c:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\bin\tbbundle.exe" build.properties
pause
7) After deleting the homescreen.svg from the source dir and writing my own I simply ran the build.bat to compile the theme into a jad and cod files. Note that you must watch the output of the batch file to ensure that your svg files compiled into pme files with no errors.
The above process is actually quite straightforward.
Here are some tips I've picked up while using this method:
Making further Theme Builder changes after the fact
You may want to make further changes to the initial theme builder work after the fact without going through the entire process again (especially if you did more than just editing / re-writing of a few svg files). You can bring over any changes like this:
1) Load up Theme Builder and make the changes you require, then export the theme again with the delete permissions removed from the temp folder.
2) From the temporary export directory copy the following files and paste them into your 'source' folder:
theme.xml
theme_manifest.mf
theme_*.cbtf
theme_*.png
theme_*.xfont
"*" will be the name of your theme file.
3) If you modified anything on any of the following screens, you will need to also copy over the relevant svg as listed:
activecallscreen.svg - Active call screen
application-menu.svg - Application menu screen
banner.svg - Application banner
incomingcallscreen.svg - Incoming call screen
lockscreen.svg - Lock screen
4) Run your build.bat file again to recompile your theme.
Can I use this with OS5.0 themes?
Yes! Just make sure that you change the build.bat file to point to svgc.exe and tbbundle.exe in the 5.0 version of theme builder instead.
Custom Thumbnails
You can easily change the thumbnail image associated with your theme in the theme chooser screen and the dialog that pops up when a new theme is installed by creating your own thumbnail.png in the source directory. I used the same dimensions as Theme Builder for this file, which is 192x144 but I haven't experimented to see if different sizes will work.
How do I use my own graphics in the SVG?
If you use your own graphics, such as a dock background on your homescreen, just place the .png file in the source directory and refer to it by name in your svg, for example:
Code:
<image id="table"
x="0"
y="260"
width="480"
height="100"
xlink:href="table.png"/>
How do I test in the simulator?
Use the 'Load application or theme' menu option on the simulator and select all the .cod files to load the theme. You will need to 'reset' the simulator each time you want to load a new build.
"Gotchas" to be aware of Don't try and rename your theme by editing the build files
I tried this early on and caused myself a major headache when my testers tried to download the OTA version, they were getting weird errors about an invalid version number. If you want to rename your theme, rename the original theme builder .thm file, re-export it from theme builder and copy over the theme.xml and theme_manifest.mf, then remake your build.properties file from the newly exported version.
Font sizes / styles wrong in your theme
As I mentioned above, make sure that you *always* replace the files mentioned above when you make any changes in Theme Builder or you may end up with some messed up fonts in your theme.
Files in your source directory
This file list below is the entire contents of an exported 9650 OS6 theme, there are a few files from other device versions as I did manage to mix and match quite a few of them to lighten the load with creating each device version of Reflex. In this section I am going to try and build a list of the different files and their purpose:
- theme.xml
- theme_manifest.mf
These two files are core to the theme, theme.xml seems to hold all the settings chosen within Theme Builder. The theme_manifest.mf file is important to include along with the theme.xml each time as without the correct one, the theme won't build properly. It contains a checksum hash against the theme.xml. I would love to be able to decode the theme.xml file, but it appears to be in binary format which makes the job much harder. Perhaps someone who is good at this kind of thing can help out here?
- theme_Reflex-0.xfont
- theme_Reflex-0.png
- theme_Reflex-0.log
- theme_Reflex-0.cbtf
These sets of files are created for the custom fonts used in Theme Buidler, there is a utility in TB's bin dir called make_rim_bitmap_font.exe which creates them. So far I've had no issues creating these files and putting them into my source directories so I can reference them in my svg's.
- osicon_hourglass.gif
This is the animated gif file used for the hourglass.
- activecallscreen.svg - Active call screen
- activecallscreen.pme
- application-menu.svg - App menu screen
- application-menu.pme
- banner.svg - App banner
- banner.pme
- homescreen.svg - Home screen
- homescreen.pme
- incomingcallscreen.svg - Incoming call screen
- incomingcallscreen.pme
- lockscreen.svg - Lock screen
- lockscreen.pme
SVG files with their accompanying pme's (compiled svg's via svgc.exe) for the different screens. Pretty straightforward stuff. You can edit these to your hearts content, just make sure that any custom fonts or graphics they reference are available in your source dir.
- active_button.png
- activecall_button.png
- activecall_button_p~focus.png
- disabled_highlight_button.png
- DialogBoxBackground.png
- MenuNormalBackground.png
These are the button graphics and menu and dialog backgrounds from the controls section of TB.
- appicon_background_portrait.png
- ButtonHighlightBackground.png
- ButtonNormalBackground.png
- incomingcall_button_p~focus.png
These are the button graphics used on the call screens. Storm and Torch naturally have a few more of these.
- banner-app.png
- banner-home.png
Banner background graphics for app and homescreen banners.
- groupboxBodyBackground.png
- groupboxCaretBackground.png
- groupboxTitleBackground.png
Three graphics from the group box section in TB.
- icon_move_underlay.png
- icon_underlay.png
- icon_underlay~focus.png
These are the icon underlay and focus graphics from the app screen section in TB.
- Applications.png
- Applications~focus.png
- com_plazmic_weblink.png
- com_plazmic_weblink~focus.png
- default_application.png
- default_application~focus.png
- folder.png
- folder~focus.png
- Games.png
- Games~focus.png
- IM.png
- IM~focus.png
- LockscreenLock.png
- LockscreenLock-landscape.png
- net_rim_bb_activation.Activation.png
- net_rim_bb_activation.Activation~focus.png
- net_rim_bb_addressbook_app.AddressBook.png
- net_rim_bb_addressbook_app.AddressBook~focus.png
- net_rim_bb_addressbook_app.Compose.png
- net_rim_bb_addressbook_app.Compose~focus.png
- net_rim_bb_app_center.ApplicationCenter.png
- net_rim_bb_app_center.ApplicationCenter~focus.png
- net_rim_bb_bb_feeds.png
- net_rim_bb_bb_feeds~focus.png
- net_rim_bb_browser_daemon.mds.private.png
- net_rim_bb_browser_daemon.mds.private~focus.png
- net_rim_bb_browser_daemon.mds.public.png
- net_rim_bb_browser_daemon.mds.public.rim.png
- net_rim_bb_browser_daemon.mds.public.rim~focus.png
- net_rim_bb_browser_daemon.mds.public~focus.png
- net_rim_bb_browser_daemon.png
- net_rim_bb_browser_daemon.wap.png
- net_rim_bb_browser_daemon.wap~focus.png
- net_rim_bb_browser_daemon~focus.png
- net_rim_bb_calendar_app.Calendar.png
- net_rim_bb_calendar_app.Calendar~focus.png
- net_rim_bb_camera.Camera.png
- net_rim_bb_camera.Camera~focus.png
- net_rim_bb_clock.png
- net_rim_bb_clock~focus.png
- net_rim_bb_file_explorer.Files.png
- net_rim_bb_file_explorer.Files~focus.png
- net_rim_bb_file_explorer.Media.png
- net_rim_bb_file_explorer.Media~focus.png
- net_rim_bb_file_explorer.Music.png
- net_rim_bb_file_explorer.Music~focus.png
- net_rim_bb_file_explorer.Pictures.png
- net_rim_bb_file_explorer.Pictures~focus.png
- net_rim_bb_file_explorer.Podcasts.png
- net_rim_bb_file_explorer.Podcasts~focus.png
- net_rim_bb_file_explorer.RingTones.png
- net_rim_bb_file_explorer.RingTones~focus.png
- net_rim_bb_file_explorer.Videos.png
- net_rim_bb_file_explorer.Videos~focus.png
- net_rim_bb_file_explorer.VoiceNotes.png
- net_rim_bb_file_explorer.VoiceNotes~focus.png
- net_rim_bb_help.Help.png
- net_rim_bb_help.Help~focus.png
- net_rim_bb_ldap_browser_pgp.png
- net_rim_bb_ldap_browser_pgp~focus.png
- net_rim_bb_ldap_browser_x509.png
- net_rim_bb_ldap_browser_x509~focus.png
- net_rim_bb_manage_connections.png
- net_rim_bb_manage_connections~focus.png
- net_rim_bb_maps.png
- net_rim_bb_maps~focus.png
- net_rim_bb_mc_app.png
- net_rim_bb_mc_app~focus.png
- net_rim_bb_memo_app.png
- net_rim_bb_memo_app~focus.png
- net_rim_bb_messaging_app.Messages.png
- net_rim_bb_messaging_app.Messages.service.bes.png
- net_rim_bb_messaging_app.Messages.service.bes~focu s.png
- net_rim_bb_messaging_app.Messages.service.png
- net_rim_bb_messaging_app.Messages.service~focus.pn g
- net_rim_bb_messaging_app.Messages~focus.png
- net_rim_bb_messaging_app.SavedMessages.png
- net_rim_bb_messaging_app.SavedMessages~focus.png
- net_rim_bb_messaging_app.sms_and_mms.png
- net_rim_bb_messaging_app.sms_and_mms~focus.png
- net_rim_bb_options_app.png
- net_rim_bb_options_app~focus.png
- net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r.png
- net_rim_bb_passwordkeeper.net_rim_bb_passwordkeepe r~focus.png
- net_rim_bb_phone_app.png
- net_rim_bb_phone_app~focus.png
- net_rim_bb_profiles_app.default.png
- net_rim_bb_profiles_app.default~focus.png
- net_rim_bb_profiles_app.discreet.png
- net_rim_bb_profiles_app.discreet~focus.png
- net_rim_bb_profiles_app.loud.png
- net_rim_bb_profiles_app.loud~focus.png
- net_rim_bb_profiles_app.medium.png
- net_rim_bb_profiles_app.medium~focus.png
- net_rim_bb_profiles_app.off.png
- net_rim_bb_profiles_app.off~focus.png
- net_rim_bb_profiles_app.phoneonly.png
- net_rim_bb_profiles_app.phoneonly~focus.png
- net_rim_bb_profiles_app.png
- net_rim_bb_profiles_app.quiet.png
- net_rim_bb_profiles_app.quiet~focus.png
- net_rim_bb_profiles_app~focus.png
- net_rim_bb_qm_peer.BlackBerryMessenger.png
- net_rim_bb_qm_peer.BlackBerryMessenger~focus.png
- net_rim_bb_remindermanager.png
- net_rim_bb_remindermanager~focus.png
- net_rim_bb_ribbon_app.png
- net_rim_bb_ribbon_app~focus.png
- net_rim_bb_standardcalculator_app.Calculator.png
- net_rim_bb_standardcalculator_app~focus.png
- net_rim_bb_task_app.png
- net_rim_bb_task_app~focus.png
- net_rim_bb_toolkit.png
- net_rim_bb_toolkit~focus.png
- net_rim_bb_videorecorder.VideoRecorder.png
- net_rim_bb_videorecorder.VideoRecorder~focus.png
- net_rim_bb_voicenotesrecorder.VoiceNotesRecorder.p ng
- net_rim_bb_voicenotesrecorder.VoiceNotesRecorder~f ocus.png
- net_rim_bb_vvm.png
- net_rim_bb_vvm~focus.png
- net_rim_device_apps_games_brickbreaker.BrickBreake r.png
- net_rim_device_apps_games_brickbreaker.BrickBreake r~focus.png
- net_rim_device_apps_games_wordmole.png
- net_rim_device_apps_games_wordmole~focus.png
- net_rim_LockSystem.png
- net_rim_LockSystem~focus.png
- net_rim_PowerOff.png
- net_rim_PowerOff~focus.png
- net_rim_Ribbon_Profile-icons32x32.png
- net_rim_SIMToolKit.png
- net_rim_SIMToolKit~focus.png
- net_rim_vad.png
- net_rim_vad~focus.png
- up_folder.png
- up_folder~focus.png
These are the icons and their focus variants from the app screen section in TB. You can pretty much just drop these into the source dir, although the usual sizing issues are still relevant.
- new_overlay.png
This is the overlay used for icons that have new unread items.
- profile_focus.png
Focus graphic used for the profiles icon on the homescreen.
- SearchFieldBackground.png
Search field background graphic from the controls section in TB.
- SvgBackgroundWallpaper.png
Main wallpaper from the home screen.
- thumbnail.png
Thumbnail image used for the theme in the theme chooser list and in the popup when the BB detects a new theme was loaded.
- rapc-filelist.txt
- com_plazmic_theme_Reflex.rapc
These are files generated by rapc, the java cod file compiler. Not of much use that I've found so far.
- today_focus0.png
Focus highlight graphic for your today displays, although you can use any name you like and just adjust the SVG accordingly.
- TitleBarBackground.png
- vertical_divider.png
- border_gcm.png
- DateSeparatorBackground.png
- gcm~focus.png
- horizontal_divider.png
I'll get to these later.
---
As I've already mentioned, I'm sure I'm not the first person to work out how to use this method, but hopefully by sharing we can do even more cool things past those already discovered in the hand coded svg thread.
I should also point out that while I went ahead and re-wrote my entire homescreen.svg from scratch for Reflex, you can always just make changes to the homescreen.svg exported by Theme Builder and still initially create your homescreen in TB.
Additionally, you can play with the other .svg files also and make some unique looking themes. I did play around a lot with the ribbon manager x-object on the app screen, but found it to be very intolerable to changes.
If I can think of anything else I missed or if any relevant questions come up I'll update this post. Hopefully, everyone can get something useful out of it.
Russ.
Thread Author #1
How to compile themes by hand
CrackBerry Genius
Originally Posted by megacn 
Topics 
Reply
