Create a Custom BackDrop (background)

IMPORTANT: This guide applies only to websites hosted on our Legacy (pre-2015) Flash-based system. Click here to view articles for our current platform.

Creating your own Custom BackDrop™

What is a BackDrop? In its simplest form, a Custom BackDrop is an image that is used as a background for your website. By using the provided Photoshop templates in the Support Center, you can design and create your own custom background that incorporates your site’s navigation menu, the frame of your site, and your site images. With a little creativity, any design concept imaginable can become your site’s unique BackDrop. Please see the Gallery section of clickbooq.com for examples of websites that use the BackDrop™ feature to truly personalize their design.

1. Download the BackDrop Template. In the online Support Center, you can download Photoshop template files with guides for creating your own Custom BackDrop. Download the file that correlates to the Navigation type you selected in Layout & Style, either Top-Down or Left-Hand. The template file dimensions are 1280 pixels wide by 1024 pixels tall and has been preset to the correct resolution of 72 dpi. This should be sufficiently large to fill most browser windows. You may make your background image larger, but this will also increase your file size.

Fig.1 Example of the Left-hand template. The main site areas are shown in grey.

2. Design your BackDrop. The template outlines the placement of your main site areas in a browser window. Your site is always centered within the browser window. By using the transparent grey areas as a guide, you can create a background design that fits the layout of your website’s main areas.

1.  
   • The grey areas outline where your logo (if you are using one), navigation menu, site frame, and images will appear on top of your background.
   • Depending on your design, you may wish to change your Site Color to "None" to remove the site frame. You can select this option in the Site Color panel in Layout & Style.
   • When designing your background, keep in mind where the Navigation menu will appear. If you have Site Color set to "None", make sure your navigation menu text is visible against your custom background. You may need to adjust the color of your font so it's clear and legible.
   • The logo area displays where your logo appears if you decide to upload one in Layout & Style. However, you can integrate your logo as part of your background design if desired.
   • Experiment! Create a custom border around your site frame. Set the site color to "None" to test a "floating" site. Add text, images or patterns. You can always create and save a new site layout to play around with the different Layout & Style options with your custom backgrounds.
   • Feel free to extend your design outside of the template boundaries - don't feel restricted to what you can create for your design!

Fig.2 Designing the background using the template as a guide for where the elements will appear.

3. Save the background as a JPEG (best suited for full-color, photographic images) or GIF (best suited for line art, illustrations and solid color images) to your hard drive with an easily recognizable name. As always, aim for the smallest file size possible. Try not to exceed a background of 250KB as a maximum.

Be sure to Turn OFF Visibility of the template layer before exporting, so it does not appear in your final background design.

Fig.3 The completed background image, ready for exporting.

4. Log into the Toolbox and select the Layout and Style tab. Proceed to the Backgound section and select Custom BackDrop.

5. Click Upload. Locate your file on your computer and click Select. Once uploaded, your background will appear in the list window. Select it to view it in the Preview window.

Fig.4 The finished site with the custom BackDrop.