It probably seems strange that it’s almost guaranteed the browser theme you create with exacting care in our theme creator will look different once it’s downloaded. I went into some detail on this point in the post BT:Engage How To – Browser Dimensions and Design. Now I’m going to offer up some tips and suggestions for making it a non-issue through your use of background images and colors.
1. Make Your Backgrounds 3,000 Pixels Wide
This is the guidance that Firefox gives for their own Personas design guidelines – make your background 3,000 pixels wide. It’s a good starting point if you’re only using a single background image and want to ensure the background works for almost all monitors. For BT:Engage themes, I’d also limit the height to 100 pixels. The theme creator currently re-sizes your background image to fit the height of the theme (about 100 pixels). So if you upload a 3,000 x 200 pixel background image, when it re-sizes to 100 pixels high, it’ll also shorten the width to 1,500 pixels.
If your background image falls short and you haven’t chosen a background color, your theme can end abruptly. The screen shot here shows the edge of my theme on a 24″ monitor with the browser about 1,800 pixels wide. It was looking good up to 1,700 and then just stopped. If you don’t use an extra wide background image, use the steps below.
2. Fade Your Images
You can use either JPG or PNG files for your background images. JPGs have a file size advantage, but the PNGs allow a transparent background. With a PNG you can fade the image to a fully transparent background and make it blend seamlessly into a background color or another image. This may be fairly straight forward to those of you with Photoshop or other graphics or photo editing software. For those without, don’t worry. I was able to teach myself how to do this thanks to a free open-source graphics software called GIMP and a range of How To tutorials both in text or video format.
A few that I think can help you are:
- Fade out an image using GIMP.
- Fade Out Images with GIMP
- Make one side of image fade to transparent with GIMP. The information you need is here, but in a very sparse description.
You have to add a Mask Layer to your image, but the other settings you’ll need are the default choices. And it’s a few commands, so it’s easy to retry if you make a mistake. Using CTRL+Z command is an Undo of the last thing you did. I use it a lot.
3. Choose a Complementary Color
If fading the image is a little intimidating, you can fake it with the right color choice – especially if the image your using ends with a single color. The Color Picker in the BT:Engage makes it easy to select any color you want from the image you’ve moved into the background. In this picture I clicked the Color Picker and then selected the orange on the far left. It took a couple tries. The first time, I hit a color that was too yellow. To select a different color, you just need to do the process over again. Click on the Color Picker then anywhere on the image to capture the color where you click.
I’d recommend you always choose a background color regardless of what image you use. It’s a simple safe guard that can protect the integrity of your design.
Hopefully, these suggestions will give you some ideas to try and explore with the product. It’s easy to make changes to your theme, so keep trying. Make sure you click Finish when you’re ready to download the theme, or update a theme you’ve already published and shared. It’ll refresh to your users the next time they start their browser.