Apr

24

Customizing Themes – Logo Display

Filed Under Tutorials 

Several people expressed interest in displaying a company logo in the background of a Bento form. That’s another relatively easy theme customization.

Again, go back to the Resources folder in the package content of our test theme Starfield Casual in the sample ThemePack file. There you’ll find the picture file Background.png. That file makes up the main background of the theme. That particular picture is a customized photo I used myself as a test. You just have to replace that Background picture with your logo picture (in the theme you want to customize). But that’s not all…

You need to know that Bento tiles the background picture – similar to the tiling option for the computer desktop wallpaper. So if you just want one logo displayed (like a letterhead) then, first of all, you have to make your picture big enough to fill the whole Bento screen so it can’t be tiled. You could place your logo at the left top, for example, and then expand the rest of your picture background to the right and down.

Finally, to make your logo look as close as possible to the original picture, several background parameters in the .plist file have to be adjusted, which is a bit tricky. The test file (Starfield Casual) demonstrates the following changes.

First you should normally turn off the transparency of the title banner. If you don’t, your background picture continues as a mirror image in the title banner, as used in the Swimming Pool theme for effect, and in some other themes as well.
Find the <key> named bannerFill. The <string> below gradientColorBottom and gradientColorTop has four parameters. Change the fourth parameter of each to “1.” The first three make up the actual color.

Next I would change the <real> parameter of the first two keys in the .plist file: backGroundBrightness to “-0” and backGroundContrast to “1.” To be safe you could also change backgroundHueAngle (0) and backgroundSaturation (1).
Finally change backgroundTileScale to “1” to make sure your logo doesn’t look skewed.

That’s it. And please, give me feedback, ask questions. Have fun with your new logo!

Comments

5 Responses to “Customizing Themes – Logo Display”

  1. Watzey on May 4th, 2009 1:27 pm

    That´s great ! Thanks; I´ll do it right away !

  2. Gerben on May 1st, 2011 3:25 pm

    Hi,

    Thanx for al the great tutorials, I’m getting there!
    One problem: I don’t get the logo right, how many pixels do I need for the display of one logo? Bento keeps tiling them or it gets al blurry and fuzzy.

    Best regards,

    Gerben

  3. Florian on May 1st, 2011 4:12 pm

    Gerben:
    the moment Bento added the Image Box as a new feature, you didn’t have to customize a theme anymore to get a logo. The Image Box does exactly the same thing.

    The number of pixels would depend on your screen size. If you don’t know it, you can look it up in the Display preferences.

  4. Gerben on May 2nd, 2011 12:20 am

    Thanx Florian for the fast reply.

    I was hoping I could paste one big background file and built a form upon it.
    Reason: more advanced and rich editing, till now I exported PDF’s and pasted them into Apple pages with my company’s style on format A4 in the background.

    But: this will do, only the company logo and the tweaking of fonts and colors has the same results.

    Thanx again!

  5. Florian on May 2nd, 2011 8:33 am

    You’re welcome, Gerben.

    In theory it should be possible to put a PDF screenshot as a background image into a theme (form). But it takes a lot of playing around. You’d have to turn off all the gradients, transparencies, and more. It might not be worth it. From experience, Bento themes simply look better with a tiled background, using a small picture: that’s the original concept. But feel free to experiment further.

Leave a Reply