Getting Started

Setting up your environment

Before you get started you need to install the latest version of TomTom HOME. Go here http://www.tomtom.com/home/ to download the latest version. Remember that for some functionality in TomTom HOME you will need a TomTom device.

After installing you need to make some adjustments to your installation. You will need the TomTom HOME Debug Menu and the DOM Inspector. These tools will help you access the error console and the DOM of you XUL pages.

Both these extensions can be downloaded from the Tools page.

Extracting the basic theme

First we need to extract the original TomTom HOME theme because we are going to use that as a starting point. Before we start we need a folder to extract the basic skin to, so first create the folder C:\tomtom\mytheme. Inside this folder create a subfolder that will hold the original theme, call it original. Next we have to copy the original TomTom HOME theme into this folder. You can find the he original theme here:

Windows

C:\Program Files\TomTom HOME 2\xul\chrome

Mac

On the Mac you have to follow these steps:

  1. Go to \Applications\
  2. Control click the TomTom HOME icon and choose Show Package Contents
  3. Copy the file tttheme.jar from the directory Contents\Resources\chrome from this package to the original-folder we made before

Now that you have the original theme we have to extract it to start changing the files. Start with renaming the tttheme.jar file to tttheme.zip. Now you can easily extract this zip file to the c:\tomtom\mytheme folder, make sure you maintain the directory structure. After you are done, please remove the original folder. We don't need it anymore.

Directory structure

chrome
Contains the skin folder
chrome\skin
Contains the styles for all the bindings used within TomTom HOME and styles for important panels, dialogs and the help window
chrome\skin\dialogs
This folder contains all the styles used in dialogs troughout the application
chrome\skin\images
Contains all the images used in TomTom HOME
chrome\skin\subtask
Contains all the styles for the subtask that make most of the functionality in TomTom HOME

CSS Files

The CSS files in the theme tell TomTom HOME how to layout and display all the elements on screen

To get started we will change the border color around TomTom HOME's main menu. Start with opening the file content.css in a text editor. Find the class called .content-container. Inside this class change the border to border: 2px red solid; and save the file.

Installing your new theme

After changing the theme to your liking you have to repackage it again for distribution. For now we will call our theme "mytheme" but that could be any name of course.

Creating the install files

First, create two empty text files in your theme's folder, install.rdf and chrome.manifest

install.rdf

Paste the text below into the empty install.rdf file we created before.

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
    <Description about="urn:mozilla:install-manifest">
        <!-- front-end metadata -->
        <em:id>theme@tomtom.test</em:id>
        <em:internalName>mytheme</em:internalName>
        <em:version>1.0</em:version>
        <em:type>4</em:type>
        <em:name>mytheme</em:name>
        <em:creator>Your Name Here</em:creator>
        <em:description>An example theme</em:description>
        <em:optionsURL/>
        <em:aboutURL/>
        <em:iconURL/>
        <em:updateURL/>
              <!-- Supported applications-->
        <em:targetApplication>
                <Description>
                        <em:id>home2@tomtom.com</em:id>
                        <em:minVersion>2.4*</em:minVersion>
                        <em:maxVersion>2.4.*</em:maxVersion>
                </Description>
        </em:targetApplication>
      <em:updateKey/>
    </Description>
</RDF>

Some of the values above are example values and have to be changed to something that matches to your extension.

  • theme@tomtom.test - this is the ID of the extension, it has to be in the format of an email address but is does not have to be your e-mail or a valid email addess .
  • <em:type>4</em:type> - the 4 specifies that we are installing a theme. Other values can be found on http://developer.mozilla.org/en/Install_Manifests#type
  • home2@tomtom.com - this specifies that your extension is working with TomTom HOME.
  • 2.4 - the minimum version of Firefox you're saying this extension will work with. Set this as the minimum version you're going to commit to testing and fixing bugs with.
  • 2.4.* - the maximum version of Firefox you're saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, "2.4.*" indicates that the extension works with Firefox 3.0 and any subsequent 3.0.x release.

chrome.manifest

Paste the lines below into the empty chrome.manifest file we created before.

skin	mytheme	classic/1.0	chrome/skin/
skin	tthome	mytheme	chrome/skin/

Repacking the JAR

To create a package all you have to do is zip up the folder. Make sure you don't zip up the mytheme folder itself, only its contents. After you are done packing rename the archive to mytheme.jar and you are done.