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

28 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.

  9. Kevin on September 26th, 2010 5:12 pm

    Thanks for this tutorial. It helped me fix an issue I was having displaying data that required a font that would display code points from a Unicode corporate private use area. A further question I have, though, is, Can you change the font for Table View because my data isn’t showing up properly there either?

  10. Florian on September 26th, 2010 5:31 pm

    Kevin,
    I don’t think you can change the table view font. But you can do a workaround:
    create a blank new form. Create a self-referencing Related Data field (drag the current library onto the form). Then you can re-size the field to any size you wish, even to cover the whole form. If you have worked with Related Data fields before, you will know all the other customization options and how to add data.
    The font in THAT field you CAN change when you edit your theme: it’s called “linkTablefont.” Just don’t make it bigger than 13 points; it won’t fit.
    Good luck!

  11. Gerben on May 22nd, 2011 2:34 am

    linkTableFont

    I got great results with HelveticaNeue-Thin, 16 points.

  12. Florian on May 22nd, 2011 6:46 am

    Gerben,
    sounds interesting. BTW, my HelveticaNeue just has a “light” option, not “thin.” I thought anything bigger than 13 points would cut off letters… I’ll try it.

    Update: I just tried it. I was right, it is too big: half the letters are cut off horizontally. How did you solve that problem, Gerben?

  13. Gerben on May 29th, 2011 4:01 am

    Hmm, don’t know, looks great here.
    HelveticaNeue-Thin is built in every OSX I got, I’m running Leopard on a powermac, Snow-leopard on my macbook.
    You want a plist?

  14. Florian on May 29th, 2011 5:07 am

    Gerben, It’s not in my American System. I’m running the newest Snow Leopard. But I’m still surprised that the font height (16px) is fitting into the grid. Were you able to change the grid size somehow? I would like to see a screen shot.

  15. Gerben on May 29th, 2011 3:04 pm

    Sent a screenshot and PDF.

  16. Gerben on May 29th, 2011 3:19 pm

    1 more thing: it is possible that I got the HelveticaNeue-Thin variant by ‘accident’ – I used fontfolio in the past, maybe after a few backups, fresh installs and importing old data…

  17. Florian on May 31st, 2011 1:05 pm

    Got it. It looks good, very clear text in the list field. That still doesn’t explain how you fit a 16px font into the cells. When I did that, half of the text was cut off…

  18. Gerben on May 31st, 2011 2:18 pm

    Again: you want a plist?

  19. Florian on May 31st, 2011 2:47 pm

    Yes, please.

  20. Gerben on June 8th, 2011 4:15 am

    I’m interested in your results with my theme. Grtz, Gerben

  21. Florian on June 8th, 2011 6:32 am

    I can’t use your theme because of the font-variant I don’t have. I was just interested in the plist file, but I couldn’t see anything unusual in it. So I still don’t understand how you were able to fit a 16 pt. font vertically into the list fields.
    Have you tried different 16 pt. fonts?

  22. José Magalhães on August 22nd, 2011 4:18 pm

    Is there any way of increasing the size of cells in linked fields in order to fit larger fonts?

  23. Florian on August 22nd, 2011 7:03 pm

    Jose,
    no, not that I know of. It would be nice…

  24. Ales on August 25th, 2011 4:58 am

    Hi,

    does it work also with Bento 4? If yes, where precisely I can find *.plist file. Thank you very much.

  25. Florian on August 25th, 2011 5:31 am

    Ales, yes it works with Bento 4. To get to the built-in themes that come with Bento:
    go to Applications – Bento: right-click, choose Show Package Contents. Click on Contents, Resources, Themes: choose the theme you want to change and duplicate it.
    Right-click the duplicated theme, choose Package Contents. Click on Contents, Resources: there is the Attributes.plist file.
    After you make changes, you must restart Bento to see them.

  26. Gerben on October 24th, 2011 3:00 pm

    Using Bento 4.06 on fresh installed Lion Macbook Air.
    Same results with the fonts, they all work.

  27. Florian on October 24th, 2011 4:52 pm

    Gerben,
    do you have ANY problems with Bento and Lion?

  28. Gerben on February 3rd, 2012 11:46 am

    No, NO problems anymore.
    But: there were problems with Google calendar sync and bento, that was the problem.

    I deleted Gmail accounts and installed them again.
    The trick was to not show ical in bento, get the calendars fresh in sync and show them again.
    No crash since.

Leave a Reply