OS 7 Theme Tutorial

[BBThemes]

How to enable OS7 9900 themes.
please note you may wish to make a backup copy (and i reccomend you do) of your original files before copying over theme with the files inlcluded in this tutorial.

For the purose of this tutorial, the filesyetem on Windows 7 is used.

Step 1.

on your PC navigate to c:\program Files (x86)\Research in Motion\BlackBerry Theme Studio 6.0\resources\devices. (note if opn a 32 bit PC will be just C:\program files)

step 2.

copy the device_profiles.properties file included in this download and overwrite the existing one.

step 3.

open the blackberry folder, and copy the BB9900.properties file into that directory.

step 4.

open the images folder and copy the BB9900_thumbnail.png file into that directory.

step 5.

navigate back to the resources folder, and go into the theme folder, then the BlackBerry6_480x360 folder.

step 6.

copy the 9900BlackBerry6.Properties file into this folder.

step 7.

for the rest of the process you`ll need to be able to see hidden folders on your PC. To enable this, from any folder go into Tools> Folder Options (note some PC`s hide the nav bar, pressing the alt key will show this).
now in the folder options window select the `view` tab. you should see `files and folders` list, and inside that list there is a `hidden files and folders` list. ensure `show hidden files` is selected, click apply and then close the folder options window.

step 8.

navigate to c:\Users\yourusername\Appdata\Local here you should see a folder called Temp. to capture the build files from Theme Studio as it exports your theme, you need to stop the Temp folder from deleting its files when your theme has been compiled.
to do this, right click on the Temp folder, and select `properties`. now you should have a Temp Properties window open, select the Security tab. click the `advanced` button at the bottom right, then in the next window click the `change permissions` button, now select your username from the list, and click `edit`.
now a window called `permission entry for temp` should open, scroll down and check the `delete subfolders and files` and `delete` boxes and hit ok, then hit apply, and continue through any prompts.
there is no reason to close the `advanced security settings for temp` window, so leave it open as once youve exported your theme we want to go back and revert the temp folder to how it was.

step 9.

Open ThemeBuilder, and export the default theme, for the purpose of this write up i`ll export as a desktop install.

step 10.

go back into your temp folder, and organize by date with the newest at the top. you should see a properties file, named something like pz_chhgF.properties, copy this file to a new folder, lets say c:\themes\demo then go back into the temp folder, scroll down to the folders, and you should see some folders that match the start name of the properties file.
go into the folder, and if you have the correct one, you should have multiple files in there, such as homescreen-banner.pme and a matching svg, and several others, grab all of the contents of this folder and copy to your demo folder.

step 11.

go back into the temp folder, and back out to the local folder so that you can right click the temp folder as per step 8, and once again select properties, this should put you back into the adnvanced security setting panel as we didnt close it in step 8, now you should see an extra line in the permissions with `type` being deny, select this line, hit `remove` then hit apply.
youve now reverted the folder back to how it was before step 8. close all the properties windows that are open, and then go to you demo folder.

step 12.

first thing to do is grab your properties file, and rename it to build.properties, the edit the properties file, the two lines you need to edit are:
ThemeBundler.contentDir=C:\\Users\\yourusername\\A ppData\\Local\\Temp\\pz_gOsDU\\
ThemeBundler.outFileDir=C:\\where inital export went

the first line is where the files you grabbed sit, and the second line is where you wish to export to, note you need to \\ for subdirectories, one \ wont work on its own. your file for this example would look like
ThemeBundler.contentDir=C:\\themes\\demo
ThemeBundler.outFileDir=C:\\themes\\export

step 13.

edit the svg files in your demo folder, you`ll find 9900 based SVG`s included in this tutorial pack which you can copy into place, but of course you may wish to alter this.

when all your SVG`s are done, copy the build.bat file from this tutorial into the demo folder, open the build.bat file in a text editor and ensure it points to the correct loaction of you themesbuilder\bin folder.

step 14.

press the start key and type CMD, then hit enter, this should give you a DOS window, navigate to the c:\themes\demo folder, and run the build.bat file, this will now create the cod file for your theme to the location you assigned in step 12.

with the cod and alx files now built, you can load it into a sim, or use an app such as BBSAK/desktop manager to sideload onto your device to test and refine your theme (if loading to a device, BBSAK is the fastest way).


Credits:
Crackberry forums members: Russnash, Molson0, Deficitism, lucky45, and many others that have contributed on threads mentioned in the FAQ section.

[BBThemes]

9900 OS7 themes FAQ.


Q: What if i want to export as a set of cods and a .jad file for OTA install?
A: in the build.properties file, line 7 relates to desktop exports, line 8 for zip file exports (appworld export) and line 9 relates to jad export.
for OTA export you would set the Alx as false, and the Jad as true. then run the build.bat file as per normal.

Q: I want to add my own graphics/icons to the theme, how do i do that?
A: to do this, simply add them in themebuilder prior to export, when exported simply use the correct sized items, jus remember to keep the file names the same so they load into the theme.

Q: do i need to manually edit the svg each time?
A: no. once youve made your `templates` (or use the ones provided) you can copy them into place.

note: lockscreen.svg uses mainly the same components as homescreen-banner.svg, so you can copy the code across for items, making editing faster.

Q: whats the best program to edit the svg/bat/properties files?
A: we use Notepad++ its free and wewould reccomend it every time, but many text editors will do the job

Q: do i need to do anything with the .pme files?
A: no, you dont need to edit those

Q: i want to change the theme name, whats the best way to do this?
A: re-export from themebuilder with the right name, its the only headache free way. you can still use the images and svg if youve already edited them but the non pme/svg/image files need to be with the new name.

Q: i want to do this for a different OS7 device, what do i need to do?
A: personally i have only done the 9900, but there is now a great deal of information in this thread for other devices, thanks to the efforts of great forums members such as molson0

Q: iv got all this sorted, but i still have some issue/questions, wheres best to go?
A: the theme dev forum on crackberry.com has so many great members, so id reccomend there.


helpful links:
Notepad++ download page ---- http://notepad-plus-plus.org/download/v5.9.6.2.html
More on SVg editing and SVG objects ---- Undocumented SVG Objects (hand coded SVG)
More on temp directory persmissons ---- Having a WTF moment. Have you seen the 'Real Hero' theme?
More info on manually compiling your theme ---- How to compile themes by hand

[molson0]

Nice work.

[BBThemes]

Originally Posted by molson0

Nice work.

im just making it all `fit` the 9900, then i`ll share with the world, plus i`ll share the `fitted` files too and one or two `gotchas` iv found along the way.

[tsells]

Originally Posted by BBThemes

im just making it all `fit` the 9900, then i`ll share with the world, plus i`ll share the `fitted` files too and one or two `gotchas` iv found along the way.

Please don't forget the 9810!

[molson0]

Well, It seems it took me a couple of minutes to figure this out too..

Thanks for the push.





Guess I will be makig use of this as well soon.

[BBThemes]

Originally Posted by molson0

Well, It seems it took me a couple of minutes to figure this out too..

Thanks for the push.

lol, you go into it thinkin thats the hard part.....its not lol.

also fyi for composer you can just adjust canvas size, device info from composer doesnt matter. does look cool tho lol, i didnt change any images lol

[molson0]

I totally did[ B] not [/B] mean to sound condesending withthe "couple of minutes" comment. I appoligise.

I know you put alot of work into this.



I do understand how to change the other parts as well...
( the exporting part)_


I will have an 9810 theme done by this evening.


Thanks again for the BIG push....

[BBThemes]

Originally Posted by tellsells

Please don't forget the 9810!

i can `do` the 9810 for sure, but i only have a 9900 right now, and iv gone thru about 30 diff builds today testing stuff so in time maybe lol, and no, i dont trust sims lol.

[molson0]

Originally Posted by BBThemes

im just making it all `fit` the 9900, then i`ll share with the world, plus i`ll share the `fitted` files too and one or two `gotchas` iv found along the way.

Thanks dude.

I look forward to seeing your progress.

[BBThemes]

Originally Posted by molson0

I totally did[ B] not [/B] mean to sound condesending withthe "couple of minutes" comment. I appoligise.

I know you put alot of work into this.



I do understand how to change the other parts as well...
( the exporting part)_


I will have an 9810 theme done by this evening.


Thanks again for the BIG push....



Click to view quoted image

Click to view quoted image

haha wasnt taken like that at all mate, but you have to adjust the svg`s to `fit` the screensize. thats what takes forever and many many `trial and error` attempts, even tho i laid it all out in fireworks as a template first lol.
theres 3 svg`s as standard, lock, home and app banner, then of course if you theme the call screens etc then they will need sorting too. i have the first 3 done, as i did a blank export, now to get on with the rest haha. how this is gonna take RIM 6 months is beyond me, altho i cant see a way to do the 9850 due to not having an existing screen ratio partner.

[molson0]

hehe.


I hate the sim to test with . I am more of a trial & error type anyway.

I really do appreciate the push. I really am glad you figured this out & shared.

Some of the others wouldn't have .

[BBThemes]

Originally Posted by molson0

hehe.


I hate the sim to test with . I am more of a trial & error type anyway.

I really do appreciate the push. I really am glad you figured this out & shared.

Some of the others wouldn't have .

thanks, as i said, i can only do the 9900 with confidence it`ll look how i want it to, so sharing seems the easiest way that all devices can get themed. personally i hate putting out themes i havent tested myself, hence i have every OS6 and OS5 device, but i held off on the OS7 devices as RIM said 6 months lol, maybe not so long now for us at least

[molson0]

These are partial svg files from an export. I have tried to changed them to what would be required for 9810.

I assume there is more, but I will fin out as I go...(as I am sure you have been doing)

Homescreen 9810

<svg width="100%"
      height="100%"
      hotspot-wrap="false"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0"
        y="0"
        width="480"
        height="640"
        fill="none"/>
  <switch>
    <foreignObject x="0"
          y="0"
          width="0"
          height="0"
          xlink:href="dummy"
          requiredExtensions="x-object:/SkinManager"
          display="none">
      CDK
hs_profile_p=net.rim.ProfileHomeScreenApp;

    </foreignObject>
  </switch>
  <image x="0"
        y="0"
        width="480"
        height="640"
        xlink:href="x-object:/Image?src=wallpaper&amp;width=480&amp;height=640"/>

Banner9810

<svg width="100%"
      height="21"
      hotspot-wrap="false"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect id="bgRect"
        x="0"
        y="0"
        width="480"
        height="21"
        fill="none"/>
  <set xlink:href="#bgRect"
        attributeName="width"
        to="640"
        begin="custom(oc_to_landscape)"
        end="custom(oc_to_portrait)"/>
  <set xlink:href="#bgRect"
        attributeName="height"
        to="21"
        begin="custom(oc_to_landscape)"
        end="custom(oc_to_portrait)"/>
  <image id="wallpaper_p"
        x="0"
        y="0"
        width="480"
        height="640"
        xlink:href="x-object:/Image?src=wallpaper&amp;width=480&amp;height=640"/>
  <set xlink:href="#wallpaper_p"
        attributeName="display"
        to="none"
        begin="custom(oc_to_landscape)"
        end="custom(oc_to_portrait)"/>
  <image id="OwnerInfoBackground-landscape"
        x="0"
        y="0"
        width="480"
        height="640"
        display="none"
        xlink:href="OwnerInfoBackground-landscape.png"/>
  <set xlink:href="#OwnerInfoBackground-landscape"
        attributeName="display"
        to="inline"
        begin="custom(oc_to_landscape)"
        end="custom(oc_to_portrait)"/>
  <image id="banner-app__Landscape"
      x="0"
      y="0"
      width="640"
      height="21"
      display="none"
      xlink:href="banner-app__Landscape.png"/>
<set
      xlink:href="#banner-app__Landscape"
      attributeName="display"
      to="inline"
      begin="custom(oc_to_landscape)"
      end="custom(oc_to_portrait)"/>
<image
      id="banner-app"
      x="0"
      y="0"
      width="480"
      height="21"
      xlink:href="banner-app.png"/>

ApplicationMenu9810

<svg width="100%"
      height="100%"
      hotspot-wrap="false"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0"
        y="0"
        width="480"
        height="640"
        fill="none"/>
  <switchGroup id="orientations"
        currentChild="portrait">
    <g id="portrait">
      <image id="background-mask_p"
            x="0"
            y="0"
            width="480"
            height="640"
            xlink:href="appicon_background_portrait.png"/>
    </g>
    <g id="landscape">
      <image id="background-mask_l"
            x="0"
            y="0"
            width="640"
            height="480"
            xlink:href="OwnerInfoBackground-landscape.png"/>
    </g>

Incoming Call SCreen 9810

<svg width="480"
      height="640"
      hotspot-wrap="false"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0"
        y="0"
        width="480"
        height="640"
        fill="white"/>
  <g transform="translate(0,-20)">
    <switchGroup id="lineImage"
          currentChild="lineImage_default">
      <g id="lineImage_default">
        <image x="0"
              y="0"
              width="480"
              height="640"
              xlink:href="IncomingCallBackground.png"/>
      </g>
      <g id="lineImage_1">
        <image x="0"
              y="0"
              width="480"
              height="640"
              xlink:href="IncomingCallBackground.png"/>
      </g>
      <g id="lineImage_2">
        <image x="0"
              y="0"
              width="480"
              height="640"
              xlink:href="IncomingCallBackground.png"/>
      </g>
      <g id="lineImage_5000">
        <image x="0"
              y="0"
              width="480"
              height="640"
              xlink:href="IncomingCallBackground.png"/>
      </g>
      <g id="lineImage_13000">
        <image x="0"
              y="0"
              width="480"
              height="640"
              xlink:href="IncomingCallBackground.png"/>
      </g>

Incoming Call Screen Landscape

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<?plazmic pmeVersion="1.2" pmb="false"?>
<svg width="640"
      height="480"
      hotspot-wrap="false"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0"
        y="0"
        width="640"
        height="480"
        fill="white"/>
  <g transform="translate(0,-20)">
    <switchGroup id="lineImage"
          currentChild="lineImage_default">
      <g id="lineImage_default">
        <image x="0"
              y="0"
              width="640"
              height="48"
              xlink:href="IncomingCallBackground-Landscape.png"/>
      </g>
      <g id="lineImage_1">
        <image x="0"
              y="0"
              width="640"
              height="480"
              xlink:href="IncomingCallBackground-Landscape.png"/>
      </g>
      <g id="lineImage_2">
        <image x="0"
              y="0"
              width="640"
              height="480"
              xlink:href="IncomingCallBackground-Landscape.png"/>
      </g>
      <g id="lineImage_5000">
        <image x="0"
              y="0"
              width="640"
              height="480"
              xlink:href="IncomingCallBackground-Landscape.png"/>
      </g>
      <g id="lineImage_13000">
        <image x="0"
              y="0"
              width="640"
              height="480"
              xlink:href="IncomingCallBackground-Landscape.png"/>
      </g>

I got these so far for the 9810.

I havn't began to export anything yet, but assume this is mostly where we need to focus attention...

[BBThemes]

Originally Posted by molson0

These are partial svg files from an export. I have tried to changed them to what would be required for 9810.

I assume there is more, but I will fin out as I go...(as I am sure you have been doing)


I got these so far for the 9810.

I havn't began to export anything yet, but assume this is mostly where we need to focus attention...

nice! obv theres going to be more for the 9810 due to rotation, for the 9900 so far iv sorted the 3 main ones needed, and now im on to the activecallscreen and incoming call.

this is where my homescreen banner is at right now



so close to looking stock, just the fonts to play around with.

also to be clear, nobody explained to me how to alter TB to export OS7 (it took me a fair while because i was trying to get `export to device` to work by using the device properties files along with the hardware codes from the desktop manager software lol) and i figured out the using svg to control the stuff after having seen the pic shown above, mainly due to the 2 well helpful threads i linked above.

as i mentioned someone did ask me for help, and the svg idea was what i came up with, then they bolted because i made a theem over 6 months ago lol. thats like what? ten years in tech lol. anyways, thats why iv put it out right now as iv been doing it, so that everyone can see its me doing it for the community, both users and devs. cos we all want themes