How do I create a New Page Wrapper?

Anonymous Blackbaud User

Getting Started

1. Click Create a New Page Wrapper in the upper left portion of the Page Wrapper List page.

2. On the screen that opens, enter a name for the new page wrapper. The name is required and will only be visible to administrators.

3. Click Next.

Editing the Head Element of the Wrapper

1. Provide (optional) information for any of the following portions of the Header element for your Wrapper page:

Important: The system will automatically generate the content type, a base href, your standard style sheets, and keywords (from the page being displayed). Enter information for the following fields only if you want to add to what is automatically generated.

-Site Title - Any title you enter here will be prefixed to the title that you specify for individual pages when you build them. The title will appear to your constituents in their browser and will also be the title that search engines display. Field limit: 200 characters.

-META Keywords - Keywords you enter here will be added to the keywords that you specify for individual pages when you build them. Search engines frequently use keywords to index your site. Keywords are only visible to your constituents if they view the HTML source of your pages. Field limit: 4000 characters.

-META Description - The description you enter here will be used for every page on your site so it should describe your site as a whole. Search engines frequently use this description to index your site. The description is only visible to your constituents if they view the HTML source of your pages. Field limit: 2000 characters.

-Additional HTML Tags for the HEAD Element - If you want to include SCRIPT elements for Javascript or STYLE elements, you can enter them here. The META keywords and description tags are generated from the keywords and description entered above, but you can enter additional META tags here as well. Field limit: 8000 characters.

2. Click Next.

Editing the Body Element of the Wrapper

1. Provide (optional) information for any of the following portions of the Body element for your Wrapper page.

-Margin - Enter a Margin Height and Width in pixels if you would like to provide space between the edge of the browser and your page.

-Background - Enter a value for a background color or a background image as follows:

Background Color - Enter a background color as a named color (for example, red) or as a hex string (for example,#FFFFFF for white).

Background Image - Enter a background image as a relative URL. For example, since the base href that is created for your site is in the format of http://www.convio.com/site/, then the relative URL might be as follows: ../images/logo.gif.

-OnLoad Action - If you want to run a JavaScript method upon loading the page, you can enter it here. Use apostrophes rather than quotes to specify any literal arguments for the JavaScript. Field limit: 200 characters.

-OnUnload Action - If you want to run a JavaScript method upon unloading the page, you can enter it here. Use apostrophes rather than quotes to specify any literal arguments for the JavaScript. Field limit: 200 characters.

-Additional Attributes - If you want to include additional attributes for the BODY element, you can enter them here. For example, you could specify the class (class = "foo"). Field limit: 1000 characters.

2. Click Next.

3. Choose the basic layout for your wrapper.

4. Click Next.

5. On the screen that opens, edit the HTML content for the Page Wrapper using the full features of the WYSIWYG editor. You can use tables with background and border colors, incorporate images, apply styles, include links, etc.

Important: If you have chosen to Start with a blank page, be sure to include a placeholder for the dynamic body content on your site by placing your cursor in the appropriate section of the WYSIWYG window and selecting Page Body Placeholder from the Page Wrapper section of the Components menu. If you have chosen any other layout, the placeholder will already be in place for you.

6. When finished designing the HTML content for the wrapper, click Next.

7. On the screen that opens, edit the printable version of the wrapper. The printable version of the wrapper can include a banner or logo at the top, but it should not include anything to the right or the left of the page content. Include a placeholder for the body content (just as you did in the onscreen version) by selecting Page Body Placeholder from the Page Wrapper section of the Components menu.

8. When finished designing the Printable version of your wrapper, click Next.

Previewing and Publishing the Wrapper

1. On the final configuration screen, click Preview Page Wrapper to view the page wrapper in a new window. You will be able to navigate your entire site with the new wrapper, just as your constituents would do.

2. Close the Preview.

3. If everything looks good and you are ready to do so, you can click the Publish Page Wrapper button. Your site will immediately switch over to the new wrapper.

Important: If you are not yet ready to publish, you can return to this screen later or publish the wrapper using the Publish link on the Page Wrapper List screen.

4. Click Finish to return to the Page Wrapper List page.