I thought it would be it would be useful and motivating if I’ll describe my way of creating themes. I’ve used it to create Marina in Windows but you can use it in any OS I think. Special thanks to Master Carsten “Stskeeps” Munk for all the info and guides. And here we go.
Step 0: Downloading required software.
[download link] MADDE – Maemo Application Development and Debugging Environment
[download link] Hildon-Theme-Example template
[download link] Coordinates template file
Step 1: Software setup.
First of all you need to install MADDE environment. It’s pretty straightforward so don’t panic, just follow the instructions.
Then you’ll need to untar downloaded Hildon-Theme-Example file called hildon-theme-example-stskeeps-hildon-theme-example-stskeeps-master.tar.gz (yeah yeah :) into <MADDE INSTALLATION FOLDER> / <MADDE VERSION NUMBER> / home / <USER NAME> / Theme name (Marina, for example).
Step 2: Theme editing.
Now lets move to the editing itself. Open theme folder that you’ve just created and filled with files from tar archive.you’ll see a bunch of files and folders. Right now we need the one called template. There you’ll see 4 files: coordinates.png, template.png, template.svg and MakeFile.am. Remember, if you’re a fan of svg editing – go on, but remember that it should be converted to template.png anyway. But let’s pretend that you want to edit template.png. Open it with your favourite Photoshop clone (:P) and you’re good to go. Almost. Cause there’s the only one problem with this file – it doesn’t have “zones” mark up – special layer that will show you exact sizes of different UI elements. This layer is held in coordinates.png as you may have guessed, but there’s the catch – if you’ll just copy and paste it – it won’t be placed right cause it’s actually smaller than it should be. That’s why I’ve created “right” coordinates.png file for you. Download it and paste it into your templates.png file. Now you’re clear to launch your creativity into the stratosphere :)
But before you’ll start, please note that some of the theme files are not covered with templates.png. Take a look at the “applications” folder that lies in your theme folder. It contains different subfolders, where you’ll find different backgrounds, icons and templates, that should be edited too. Especially rtcom-messaging-ui (“Conversations” app). Never forget about it, or terrorists win!
Step 3: Theme packaging.
Ok, you’re done with drawing all this stuff, now let’s move to actual packaging (you want to test your theme, right?)
- run MADDE and cd to your theme folder (for example cd Marina)
- type sh try_it_out.sh . It will start some kind of first run wizard that will guide you thru the process of initial theme setup. It will ask you some simple questions, answer honestly :) IMPORTANT: If your theme name has first letter upper case, directory name must have first letter lower case!
IMPORTANT: If your theme name has first letter lower case, directory name must have first letter upper case!
This is REALLY GODDAMN IMPORTANT, DON’T MESS THIS UP.
- Ok. Now minimize MADDE and go to debian subfolder in your theme folder. You’ll see some files there, right now we need control. Open it up with your favourite text editor.
Here, after “Standards version” row you’ll need to insert one more row and it should look like this:
This is the bugtracker URL, replace it with the address where you’ll want to, you know, track bugs.
Now we need to add a pretty icon for the package and it’s really not that straightforward as it looks like :) Right after “Depends:…” row in the same control file you should add this:
then break (new row) and now we came to the most weird part :) Icons are 48×48 png files actually BUT they are stored right in this control file in base64 format. So, you’ve drawn a png with right dimensions (transparency allowed btw) then you need to convert it into base64 fomat. You can do it here. Just upload your file and this website will show you base64 code you need. Paste it on the next row after XB-Maemo-Icon-26:. You’re almost done.
BUT REMEMBER TO DO LAST IMPORTANT THING. YOU SHOULD PLACE “SPACE” IN THE BEGINNING OF EACH LINE OF THAT BASE64 CODE OR YOU’LL RECEIVE AN ERROR.
Ok, we’re done with icon, let’s move to Description row. Right now you can see just your theme’s name there, it’s boring. Write something more descriptive there.
And the last one bit of code you’ll need to add is Pretty Name ©. Without that row your package will be shown in Application Manager like hildon-theme-marina for example, and we want something like Marina Theme instead. Just add a new line after description and place that row there:
XSBC-Maemo-Display-Name: Marina Theme
Congratulations, we’re done with control file!
- Now let’s move to changelog file. Don’t worry, it’s much simplier than control. Open it up with your favourite text editor.
Though it’s simple, but it’s really important file cause it will tell MADDE which version you want to build and it’s the right place to track your changelog. It should have format like this:
hildon-theme-marina (1.095) jaunty; urgency=low
* Calendar agenda view fixed
* Titlebar arrow color changed
— Andrew Zhilin <email@example.com> Tue, 19 Jan 2010 11:53:02 +0000
hildon-theme-marina (0.1) jaunty; urgency=low
* Initial release.
— Andrew Zhilin <firstname.lastname@example.org> Mon, 18 Jan 2010 12:00:00 +0000
Top row always shows the version you want to build right now, don’t forget about it
- Ok, we’re done with text editing at last, now the most sacred process – package creating. You’ll be surprised but it’s as easy as typing 1 row of text in MADDE console. Yeah, MADDE will do the rest. So, cd to your theme folder (Marina for example) an simply type:
mad dpkg-buildpackage -S -us -uc -d
And that’s it. If you’ve done everything well – you’ll see 3 files appeared in your MADDE home/<user name> folder .changes, .dsc and .tar.gz. Congrats!
Step 4: Autobuilder
Ok, we almost did it, now we only need to upload all this stuff to The Mighty Autobuilder ©.
- First of all you’ll need to have maemo.org account.
- Now go to the maemo.org Extras Assistant and just follow the steps. After all this registration stuff it will finally ask you to give it your 3 files (don’t mess up with file versions!) and autobuilder will create a .deb package for you. But how can you find it?
- There’s an app for that – Maemo Package Interface. There you can search for yor new shiny .deb and, if it’s worth it, you can promote your package from Extras-Devel repository to Extras-Testing repository, where users will judge if it’s worth to be placed in Holy Maemo Extras or not :)
- IMPORTANT: Every autobuilder or promotion related action takes time. If autobuilder will fail at building your .deb – it will e-mail you with log, don’t worry and be patient.
- IMPORTANT: SSH key is “blahblah” :)
Well, that’s all, folks, I hope to see some more professional themes for Maemo 5 soon!
Thanks for reading and stay tuned.