Theme Creation Tutorial
Simple tutorial, part 1: Creating a copy of Nuvo Theme
This tutorial does not explain everything in deep detail, but it will go through the basic steps of creating a theme for 770. What you need is:
* Java 1.4 or later installed on your system.
* Photoshop, GIMP or similar pixel editing program
Download latest version of Theme Maker. It is a .zip file, so you need to extract it. Let’s say, just extract it to your desktop. It will create a new folder called Theme Maker. In the folder you can see various files, of which most important is MaemoThemeMaker.jar.
Now, double click it. Maemo Theme Maker
should open. It will look a bit like this
(now, if you use XP, it will look a bit different,
but the components are the same).
Ok, Theme maker opens up. You could just fill
in some details and go to build theme dialog
and build a replica of nuvotheme.
Now, to do that, I’ll explain the fields for you.
After You’ve created replica of NuvoTheme,
you can then proceed to the part 2 of tutorial to
really create your own theme.
Theme Name: Well, obviously you need a name.
This name will be used for file name as well,
so this is why it’s restricted to 9 letters.
Theme Creator: Your nick or your name here.
Theme Background: This is a 720x480 image that will be the background image in maemo home view.
Theme Source Image: Now, this is where the magic (and 99% of the work) happens. This is a large image that contains a template that has example dialogs, buttons and stuff. Now, all you really have to do is edit this image to look what you would like the theme to look and save it as png.
Theme version: It’s used by the application installer to know if your version is later than previously installed on the devide. So, especially if you intend to develop the theme incrementally, this is important field. Start with 0.1 or similiar and when you are ready to launch the theme to public, go for 1.0 version number.
System font: This is the main font used in pretty much everywhere in 770. 11.75 is a bit small and the Nokia default is 16.75, which is a bit big. Some prefer 14, I prefer 12.75 (default). Go figure out the most suitable for your theme. System font is just Nokias default font for now, give me a shout if you need to support other fonts.
Dialog title text color: This is for the popup dialogs title text. Use normal web colors here.
Title text color: This is for the main view title text.
Background text color: Umm.. I think this is the background color. Let me know if I’m wrong.
And then there are the advanced color settings. If you need them, just open the dialog. On your initial tests and in this tutorial, you won’t need those.
Still missing something? Yep, that’s right.
Build Theme Tab:
Opening the Build Theme tab opens up a screen
like this (again XP looks different):
Build theme button: this is what is to be used
normally. It first creates a default theme from
defaultcontent.zip. Then your theme image is used to
replace the default content images. Your font settings
are applied to the theme and a .deb installation file
is created to your running directory (same as the app
is in).
Repackage!: This is the option that you can use to really go into advanced part and modify parts of the theme that Theme Maker currently does not do. So, if you’re just reading this tutorial, chances are you won’t be needing this button for some time. But eventually, you may need to. What it does, it repackages the theme folder to a .deb package. So, you can mess around with images that are not in the source image template, fix the gtkrc file and cool stuff like that that are not normally needed for a theme, but some themes might still benefit from it. Whenever you start doing stuff like that, pause for a sec and think: should I mail Urho Konttori and ask this thing that I’m doing to be a feature of the normal operation? If the answer is yes, mail me!
Creating Nuvo Theme as MoonTheme.
Ok, go back to Basic Settings. Change Theme name to MoonTheme and theme creator to your name (Thus, I’ll use Urho Konttori).
Theme version 1.0. It’s cool. Font settings should also be good. Ok. Go to Build Theme tab.
Press Build Theme button. Progress bar slowly builds up. Wait until you get dialog stating that process is complete.
Once you get that, press OK and have a look
at your theme maker folder. You should see
MoonTheme.deb there.
Plugin your 770. Copy MoonTheme.deb to your
MMC. Disconnect / eject your 770.
Unplug the cable.
Go to file manager and open MoonTheme.deb.
Install as usual. Tadaa! You have your brand new theme installed and running on your 770. Well, not brand new, as it’s really just a copy of NuvoTheme, but this is where your imagination comes along.
Get Back to your PC. Close down theme maker (it will save all your chages automatically). Open up the nuvoThemeSourceImage.png in photoshop or similiar. Make a few changes Change theme name to something more like your theme and repeat the process above. Now you have a brand new theme!
