Customizing prebuilt Business Catalyst trial site templates

Additional Requirements

Business Catalyst Trial Site

• Sign up for a free account

Business Catalyst extension for Dreamweaver

• Download

The Business Catalyst Platform includes the Online Business Builder that enables you to create new trial sites. When you select the desired options for your new site, you can choose from a variety of prebuilt templates that define your site's appearance. (You can also choose to create a site from scratch, using your own HTML and CSS layouts.) In this article, you'll learn how to customize the appearance of the prebuilt templates to personalize your new site.

As you follow along with these instructions, you'll also get a better understanding of how the templates included with Business Catalyst are designed and learn where to edit the elements that are most commonly updated. You'll see how to upload and display your own logo graphic and primary page image. You'll also get information about the linked style sheets and how to edit the relevant rules.

This article is dvided into the following sections:

• Defining a Business Catalyst site in Dreamweaver
• Updating the logo graphic
• Changing the large template image
• Editing CSS styles to adjust the color of elements

Defining a Business Catalyst site in Dreamweaver

With the Business Catalyst extension, you can use Dreamweaver to connect to your Business Catalyst site via FTP and edit the site files. The new Quick Site Setup wizard automates the process of defining a site and downloading a local copy of the site files. In this section, you'll learn how to set up your Dreamweaver environment to begin editing the template file included with Business Catalyst when you register a free trial.

Everything you need to complete this tutorial is included in the sample files. However, if you like, you may choose to prepare and use your own logo and graphic file to update your trial site. Just make sure to resize your graphics to the same dimensions as the sample file image files and optimize your graphics to improve performance and reduce download times.

To get started, register a free trial Business Catalyst site using the flaming soccer ball template and install Dreamweaver: choose the full solution and use the same online business template when registering your free trial site in the Online Business Builder. Scroll through the available templates to select the template with the picture of the flaming soccer ball (or football, if you live outside the United States). Select this template and choose the default color scheme as shown in Figure 1.

Choose the first home page image (the blue strawberry) displayed in the list and then click Finish to fill in your details and complete the registration process.

Don't launch Dreamweaver yet; you'll install the extension first, and then you'll open Dreamweaver.

Follow these steps:

1. Download the Business Catalyst extension file to your hard drive.
2. Double-click the MXP file after it has finished downloading. The Adobe Extension Manager appears. Click Accept to agree to the extension disclaimer license agreement.
3. The Adobe extension manager displays a checkmark next to the extension to indicate it has been successfully installed (see Figure 2).

Note: The Triangle extension is the previous version of the Business Catalyst extension that is now deprecated. If you are an existing Business Catalyst user, you can install and use both extensions side by side in the same installation of Dreamweaver CS4/CS5 to compare them.

4. Quit the Adobe Extension Manager and launch Dreamweaver.
5. Choose Window > Business Catalyst to open the new Business Catalyst panel.
6. Enter the same login information (e-mail address and password) that you set up when you registered for your free Business Catalyst trial site (see Figure 3).

7. Once you have logged in, the list of your Business Catalyst sites is displayed. Since you'll use the same e-mail and password for all of your sites, you don't need to log out and log back in to switch between sites as you edit them. Choose the new trial site that you just registered from the site list (see Figure 4).

8. When you select a site that has not yet been defined, the Quick Site Setup wizard appears automatically. Defining a site is a one-time setup process. After you set up a site through the wizard, you won't be prompted to define it again. To complete the site definition, enter your e-mail address and password once again in the provided fields (see Figure 5).

9. Click Login to proceed to the Setup screen of the wizard (see Figure 6).

10. Click Setup to proceed to the Confirm screen of the wizard. Click Finish to complete the site definition process and download all of the site files to your local machine.

Note: In future sessions, if you do not want to get the entire set of site files at the time you define a site with the wizard, you can deselect the Download site locally option. Later, you can use the Files panel to download the site files when it is more convenient.

11. Click Yes in the dialog box that asks, "Are you sure you wish to get the entire site?"
12. When the files finish downloading, use the Files panel to review the site files. The Templates folder contains the DWT file that you'll be editing in this tutorial. Also note that the stylesheets folder contains several CSS files, including screen.css. This is the file you'll edit later in these instructions.

At this point, your new Business Catalyst site has been defined and you are ready to begin editing it. Next, you'll learn how to update the logo graphic.

Back to top

Updating the logo graphic

A well-designed, memorable logo that graphically represents the online business is essential to market a site and build a strong brand. Additionally, the logo image displayed on a site is a powerful way to help visitors recognize the associated company. Typically, the logo appears on every page of a site. For these reasons, the first element that you'll want to change on a Business Catalyst template is the logo graphic.

If you haven't already, download and uncompress the sample files folder to a convenient location on your hard drive.

The sample files folder contains the following files:

• new_logo.jpg
• new_banner.jpg
• screen_complete.css
• Main Template_complete.dwt

In this section, you'll upload new_logo.jpg to the remote server and replace the existing logo.

Note: The dimensions of the provided logo file are 210×50 pixels. If you'd prefer to use your own logo instead of the one in the sample files folder, use Fireworks, Photoshop, or the image editor of your choice to optimize and resize your logo to match these dimensions. Depending on your logo design, you may need to experiment in order to get the right sizing. Any logo smaller than 300×80 pixels should fit.

Follow these steps to add your own logo to the Online Business Builder template:

1. Copy new_logo.jpg and new_banner.jpg from the sample files folder to the images folder of your site's local root folder, placing them next to the other site image files.
2. Select new_logo.jpg in the images folder. Click the Put button to upload the new logo to the remote server (see Figure 7).

3. In the Files panel, double-click the Main Template.dwt file in the Templates folder to open it.
4. In Design View, select the existing logo placeholder text. Look at the tag selector and notice that div#placeholder-logo is selected (see Figure 8).

5. Press Delete to remove the placeholder text. Choose Insert > Image and browse to select new_logo.jpg from the images folder. Click Select or Choose, depending on your platform, to insert the image (see Figure 11).

6. In the Image Tag Accessibility Attributes dialog box that appears, enter the name of your business in the Alt field (to help with SEO and promote accessibility).
7. Choose File > Save. In the dialog box that appears, click Update to update all of the files that are based on the template.
8. Click the Put button to upload the Main Template.dwt file.
9. Choose File > Preview in browser (or open a browser and visit your trial site) to see the page with the new logo (see Figure 10).

Note: If you'd like to review the completed version of the updated template, copy main_complete.dwt from the sample files folder to the Templates folder at the root level of your site, and then use Dreamweaver to review the code.

You've successfully uploaded and replaced the placeholder logo text with the new logo graphic. In the next section, you'll update the larger image in the template to replace the blue strawberry graphic. This image is sometimes called the banner or the hero image. It is a prominent part of the site's appearance, so choosing a compelling image is important; it sets the right tone for an online business.

Back to top

Changing the large template image

In this section, you'll update the banner image that is inserted in the main template file. This is the default template for the site, and most of the web pages will use this same design, for consistency. However, it is important to note that you are not restricted to using a single template when building Business Catalyst sites. You have total freedom to create as many templates as desired, if you want different sections to have a different look and feel. For example, if you have a service-oriented site, you may use the main template for the home and scheduling pages, but use a different template with photos of the sales team for the about us, contact and customer service pages.

Note: Unlike web pages and other site files, you must either create new templates in the Admin Console, save and publish them, and then use Dreamweaver to Get the remote file to edit it in the Dreamweaver workspace locally, or create new DWT files in Dreamweaver, copy the source code, and paste it into the Online Editor of the Admin Console to save and publish templates. The Templates folder is locked and you cannot upload new DWT files created locally in Dreamweaver directly into the remote Template folder.

The dimensions of both the new and existing banner images are 600×216 pixels. If you'd prefer to use your own banner image instead of the one provided in the sample files, use Fireworks, Photoshop, or the image editor of your choice to optimize and resize it to match these dimensions. Depending on your banner image, you may need to experiment to find the perfect fit.

Follow these steps to update the large graphic in the DWT file:

1. Select new_banner.jpg in the images folder. Click the Put button to upload the new banner image to the remote server.
2. In the Files panel, double-click the Main Template.dwt file in the Templates folder to open it, if it is not already open.
3. In Design View, select the existing banner image. Look at the tag selector and notice that the img tag inside div#placeholder-hero is selected (see Figure 11).

4. While the blue strawberry image is selected, click the folder icon next to the source field in the Property inspector. Browse to select the new_banner.jpg file from the images folder. Enter the name of your business in the Alt field to help with SEO and promote accessibility (see Figure 12).

5. Save the template and click Update in the dialog box that appears.
6. Click the Put button to upload the Main Template.dwt file.
7. Choose File > Preview in browser (or open a browser and visit your trial site) to see the home page with the new banner image displayed.

Note: If you'd like to review the completed version of the updated template, copy main_complete.dwt from the sample files folder to the Templates folder at the root level of your site, and then open it in Dreamweaver to review the code.

After you've made just two small updates, the template is already starting to look more like a new design. Site images are very important to convey the desired mood and intention of a site. Next, you'll learn how to update the color of the background and change the color of text elements on the template to personalize the design with CSS styles.

Back to top

Editing CSS styles to adjust the color of elements

In the previous sections, you used the Property inspector to update the main DWT file directly to insert different images on the template itself. In this section, you'll use the Related Files bar at the top of the Document window to access the style sheets that are linked to the template, in order to update some of the CSS rules to change the design.

Updating the background color of the template

The background color is an important part of the page design, because the color borders the pages like a frame, and the color helps offset the other page elements. Different colors affect the visitor's perception of a site, and studies have shown that specific colors tend to elicit specific emotional responses when viewed. It is a simple process to update the background color, and it definitely makes a significant difference to the overall design.

Follow these steps:

1. In the Files panel, double-click the Main Template.dwt file in the Templates folder to open it, if it is not already open. Click the Split button to view the file in Split View mode.
2. In the Related Files bar at the top of the Document window, click the screen.css link. The source code for the CSS file appears in the Code pane (see Figure 13).

Note: This template has several related files, but in this tutorial you'll edit the CSS rules in screen.css.

3. Choose Edit > Find and Replace to open the Find and Replace dialog box. The Find In menu should be set to Current Document and the Search menu should be set to Source Code. In the Find pane, enter the following code: body { background:
4. Click the Find Next button. Dreamweaver highlights the corresponding code on the page. In this example, the background color of the body element is set to #313634.
5. Highlight the hexadecimal color value and type the new color value: #C27934 (see Figure 14).

6. Save the CSS file. Click the Put button to upload the screen.css file.
7. Choose File > Preview in browser (or open a browser and visit your live trial site) to see the page with the updated background color. Click the navigation items to see the other pages that are using the same template, and notice that they are all updated as well (see Figure 15).

Updating the color and style of the header text of the template

The online business is really shaping up, and the site is using a new different design direction. In this section, you'll make another small change to screen.css to update the color and style of the header text.

Follow these steps:

1. In the Files panel, double-click the Main Template.dwt file in the Templates folder to open it, if it is not already open. Click the Split button to view the file in Split View mode.
2. In the Related Files bar at the top of the Document window, click the screen.css link to open the CSS file, if it is not already open.
3. Choose File > Find and Replace. In the Find pane, enter h1 and then click Find Next (see Figure 16).

4. Choose Window > CSS Styles to open the CSS Styles panel, if it is not already open.
5. The current style is displayed. In the Properties pane, select the #fff hexadecimal color value and replace it with #561D00 (see Figure 17).

6. Click the Edit button (pencil icon) to open the CSS Rule Definition dialog box.
7. Choose the Border category and deselect the Same for all options. Set the Bottom style to dashed, set the width to 2 pixels, and set the color to #561D00 as shown below (see Figure 18).

8. Click OK to save your changes.
9. Save the CSS file. Click the Put button to upload the screen.css file.
10. Choose File > Preview in browser (or open a browser and visit your live trial site) to see the page with the updated headers that now display borders. Click the navigation items to see the other pages that are using the same template, and notice that they are all updated as well (see Figure 19).

Note: To review the completed version of the updated CSS rules, copy screen_complete.css from the sample files folder to the stylesheets folder, and then open the CSS file in Dreamweaver to review the source code.

The instructions provided above are essentially the same steps you'll use to update the CSS rules to affect the other text elements displayed in the template. Use the Document window to identify the element in the template you want to change, use Find and Replace (or the Code Navigator) to locate the associated rules in the style sheet, and then update the rules using the CSS Styles panel or the Property inspector. If you open a web page that you are updating and then click the Edit button to access the CSS Rule Definition dialog box, you can click Apply to see the changes take affect in Design View without leaving the editing interface. This strategy allows you to keep making minor changes to tweak the design until you achieve the desired effect.

Back to top

Where to go from here

As you can see from these instructions, you can use the Business Catalyst extension for Dreamweaver to update your Business Catalyst sites using the same workflow you use to edit static websites. Since Business Catalyst supports DWT files, you can leverage the power of templates to ensure consistency throughout a site and make the content easier to update. And now, in addition to using the prebuilt CSS layouts that are included with Dreamweaver, you can also choose to use the templates provided with Business Catalyst as the basis for your site's design.

To learn more about using Dreamweaver to edit your Business Catalyst sites, refer to Introducing the Business Catalyst tools and Building your first website in Business Catalyst. To get details about editing templates, visit the Business Catalyst Support Central Knowledgebase. Also be sure to check out the Business Catalyst Developer Center, where you'll find helpful articles and tutorials to get you up to speed quickly.