Mar

11

Customizing Themes – Fonts Galore!

Filed Under Tutorials 

There are at least three good reasons to meddle with the default fonts of the Bento themes:

  • You want to use your favorite fonts
  • You like the theme, but not the font
  • You want to use different sizes or variants

Of course you can only use fonts that are installed on your system. To check out all your fonts open the Fontbook application (in the application folder). In there you can look at samples of all fonts in any size – you can even type in custom text:

font sample in Fontbook

Now it’s time for action!

Open the .plist file of your theme bundle (where you changed the custom folder) and look for <key>fieldFont_larger</key>. The other sizes follow below it: largest, normal, smaller, smallest.
Now simply replace the <string> under <key>fontName</key> with the name of your custom font. Make sure you start it with a Capital letter.

Important note: for many themes Bento uses a second font for the two smallest sizes for better legibility. You should normally leave those alone except for their size.

A neat option is that you can even choose any available variant you find in Fontbook for your font, even combinations that are listed. You usually don’t have to add Regular, but you can.
To use a variant type Helvetica-BoldOblique, for example. You have to eliminate all spaces (also between a two-word font) and use a dash between the font and the variant. Capitalize both words in a two-word font and/or variant.

Finally, you should change the font in the title banner to match your field font. Find the <key>bannerFontFormView</key> near the top of the .plist file and change the font name as well. Don’t change the  <key>bannerFontTableView</key> – it can mess things up.

That’s it for the simplest theme customization! But read on…

For some strange reason, the Bento programmers are very inconsistent with their font sizes. Every field font comes in 5 sizes, and sometimes the difference between size 2 and size 3 is huge.
You can change the font sizes by changing the number between the <real> tags under <key>fontSize</key>. But don’t go crazy – you might get unexpected results. It looks nice, for example, when the banner font is the biggest. I always set it one point higher than the largest field font. I also usually start by raising the two smallest sizes by 1 or 2 points each. It’s also nice sometimes to push the largest size into the low 30s, depending on the font: that’s where Fontbook comes in for testing the look.

Finally it really improves readability to change the font and size of the list field font (for file lists, related records a.s.o.). It’s listed under <key>linkTableFont</key> and I’m using Optima-Regular as a font and I’m raising the font size one point to 13.

Now save the .plist file with all the changes.
Have Bento open. Go to the finder and find your themePack file. Now just double-click it and your custom theme should be automatically installed. You should get a short pop-up message on screen, and the theme chooser might open. If not, open it and look for your custom folder. Then you can apply your theme!

Have fun and good luck… … to be continued…

Comments

8 Responses to “Customizing Themes – Fonts Galore!”

  1. Florian on March 11th, 2009 10:38 am

    I forgot to mention an important thing:
    If you don’t like the results and you make changes to a custom theme you can not just re-install it – it won’t overwrite the theme that’s in the theme chooser.
    Go to the chooser, select your custom theme, and click the little “-” button underneath to remove it. That action will not delete the theme from your computer, just from inside Bento.
    Then double-click the changed themePack file in the finder to re-install it.

  2. Brian A on February 10th, 2010 6:56 pm

    Hi. I’m fiddling around with the trial version of Bento 3. I’ve dowloaded the invisible/printing themes, and attempting to change the font used.

    I’ve changed the attributes.plist file to the font I would like, using the Black theme attributes.plist as a guide.

    I’ve changed the font under fontName, and also under bannerFontFormView, and saved the file. I see no change. Am I missing a step?

    Thank you in advance for any suggestions.

    Brian A

  3. Florian on February 10th, 2010 7:39 pm

    Brian,
    Bento loads the themes into memory when it starts up, so it wouldn’t know of any changes while it’s running. Try to quit and restart and see if the changes are showing.

    If it still doesn’t show the changes you have to remove the theme from the chooser and re-install it as to the instructions in my article and the download page.

  4. Anthony on July 5th, 2010 11:57 pm

    Hello.. love this site, finally a way to get into theme editing…

    Anyway, I’d already found out how to poke around and make changes in the .plist doc and have brought my fonts into line with the rest of my professional identity style, but I don’t know how the colours have been specified – I don’t recognise this #.###### #.###### #.###### #.## method. Can you guide me towards some kind of reference table or resource?

    many thanks
    Anthony

  5. Florian on July 6th, 2010 9:25 am

    Anthony, here’s a link for figuring out the decimal values for colors that Bento uses:
    http://www.psyclops.com/tools/rgb/
    Here’s what the numbers in the .plist file represent:
    the first three numbers are the decimal representations for Red, Green, and Blue color. The fourth number is the transparency, with 0 being completely transparent and 1 being opaque.

    Good luck and have fun!

  6. Deborah on July 31st, 2010 9:33 am

    I also cannot figure out the decimal values for colors that Bento uses. I understand the RGBa system, and I have looked at the website referenced above: http://www.psyclops.com/tools/rgb/

    But I must be doing something wrong.

    The decimal values Bento uses are less than 1, such as “0.503471″ or “0.733696″, rather than the usual RBG decimal values of 0 – 255.

    If I try to put a Bento color value (“0.503471″ or “0.733696″) in the website’s rgb tool, I get an error message that says to uses a number between 0 – 255.

    Since the value I entered is between 0 – 255 (in fact between 0 and 1), I guess I have to use decimal whole numbers rather than decimal fractions.

    Can you help with this?

    Thanks

  7. Florian on July 31st, 2010 2:23 pm

    Yes, Deborah. Thanks to my co-conspirator, Simon, I can help.
    Download a copy of Spot Color from:
    http://zachwaugh.com/spotcolor/
    The last tab of the Spot Color app converts the color numbers into Bento numbers. The forth number is the transparency (opacity), which is just a percentage.
    Good luck!

  8. Deborah on July 31st, 2010 4:27 pm

    Thanks. That really helped. For anyone else who cares, be sure to download the “Developer Color Picker by Wade Cosgrove at Panic” referenced on the website.

    Thanks again.

Leave a Reply