All right guys, after riding the wave for a while on my HTC Desire HD theme, I've decided to share the method which took me over a week to figure out. I'm gonna try to be as thorough and fool-proof as possible, follow along!
This tutorial is gonna walk you through how to do this for a touch BlackBerry. The method is more or less the same for a keyboard device, but I'll leave that up to you to figure out.
Step 1 - Obtain a font editor
"Purchase" a copy of FontCreator by High Logic
I personally have version 6.0, and is what will be used for this tutorial's examples.
Step 2 - Modify a font
For my theme, I chose to edit the Arial font. In FontCreator, go to File -> Open -> Installed Font... and open Arial (its File Name should be "arial.tff")
Once it's opened, we're gonna make an entirely new font so we don't overwrite the original font. So go to Edit -> Select All, then Edit -> Copy.
Let's make a new font now. File -> New... and name it whatever you like. I didn't touch any of the settings on this screen. Hit Ok to create the new font. Now we Edit -> Select All, then Edit -> Paste.
Now on to the fun part. Go to Tools -> Glyph Transformer.
- For your range, select All
- Under the Available Features box, click on Outlines to expand it, then click Scale. Click the right arrow to add it to the Script box.
- Change the percentage values to 250.0000
- Change the Around value to "Corner or middle of glyph" then pick the top-middle dot
Click Ok. Find the colon glyph. If you're doing exactly what I'm doing, it's the $003A glyph. Double-click on it so it opens a new window so you can edit it. There will be two rectangles, delete the bottom one. Click the top rectangle then hit the "Zoom to selected" button on the top toolbar, it's to the right of the current zoom percentage.
Now we're gonna make this rectangle super thin, we're gonna try to make it so that it looks only 1 pixel high (or close enough). Now we're gonna Edit -> Cut this rectangle, close this window, and open one of the number glpyhs. You have to try to determine which number is the widest. In this case, I'm gonna go with the number 8. So double click on the number 8 glyph to open a new window.
We're gonna Edit -> Paste the rectangle onto the 8. Now we will edit the rectangle's width to make sure it's wider than the number, with sufficient and even padding on both sides. Once you've figured that out, move the rectangle on top of the 8 so it doesn't interfere with the number.
Now simply Copy and Paste this rectangle to the rest of your number glyphs. The reason we do this is because when using custom fonts in Theme Builder, it cuts off the spacing between characters, making them look all squished together. When we make this very thin line to the point where it's invisible, we prevent that from happening. You can also paste this thin rectangle on your colon glyph if you want the space between your numbers, it's completely up to you.
Now File -> Save your font. Before you close it, make sure you Edit -> Copy that thin rectangle one more time, you will need it again in a bit.
You've just created the top half of your font. We're gonna make the bottom half now. Follow the steps above EXACTLY, except this time, when you scale your font, pick the bottom-middle dot after you select "Corner of middle of glyph" for your Around option.
After scaling, you'll want to again open up all your numbers and Edit -> Paste the SAME rectangle you used from the first font. If you're doing it right, it should paste in exactly the same spot as your first font. Remember that if you pasted that thin rectangle for your colon glyph on the first font, you'll want to do that again for your second font.
Save this font as well. Navigate to where you saved the top and bottom half and install the newly created .tff files (Right-click -> Install). If you have Theme Builder open, you'll want to restart it so it shows the newly installed fonts.
Step 3 - Set the fonts up in Theme Builder
Now let's set these fonts in Theme Builder. Set the first font (top font) as your portrait Clock font, and set the second font (bottom font) as your landscape Clock font.
Step 4 - Obtain the code, steal the code, use the code
You need to be familiar with getting into the exported SVG code. If you aren't familiar with this, please read up on it here as I will not go into how to do this:
http://forums.crackberry.com/f115/ha...3/#post4933863
Anyways, export the theme, paying CLOSE ATTENTION to what you put in the Theme Name. Go to your Temp folder where the theme is exported, and note your two custom fonts with a "cbtf" file extention. Open up homescreen.svg and look for your clock codes. You'll want to find
<image
id="BannerTime-home"
and also
<image
id="BannerTime-homescreen__Landscape"
Now notice how their font-family attributes are set up in these image tags. Look familiar? This is why I said to pay close attention to what you name it. I'm also going to advise you that there's an 18 character limit for naming your theme and how it shows up for the font-family attribute. Here's what I mean:
If I exported my theme with the name "Big_Clock", it will show up as
font-family=theme_Big_Clock-0
and
font-family=theme_Big_Clock-1
respectively. However, if I name it something beyond 18 characters, such as "HTC_Desire_HD_Metal" then it will use the first 18 characters:
font-family=theme_HTC_Desire_HD_Meta-0
and
font-family=theme_HTC_Desire_HD_Meta-1
I hope you understand what I mean by that! Now you'll want to take those image tags of BannerTme-home and BannerTime-homescreen__Landscape and paste them into your own custom SVG. You'll want to play around with the co-ordinates to get the top and bottom halves to line up properly. You should also hide the original Clocks with this code:
<set xlink:href="#bannerTime-Home" attributeName="display" to="none" begin="0"/>
<set xlink:href="#bannerTime-homescreen__Landscape" attributeName="display" to="none" begin="0"/> Concluding Statements
And that's pretty much how you do it. One thing to keep in mind is you always have to make sure your font-family attributes in your SVG match what you're gonna name the exported theme, otherwise the clocks won't show up at all.
I look forward to seeing what you guys come up with!
Cheers,
Vince (the Prince)
1Likes
Thread Author
#
Tutorial: Big Homescreen Clock 
Linear Mode
