BNL Home

Build a Fluid Site

  1. Create New Site Template Page
    Create a new page in your site's root subdirectory called zz-template.php and mark it as "don't publish." This page will serve as the template page from which you will build all other site pages in the future.
  2. Insert Template Code
    In source code view, delete the existing source code from the zz-template.php file. Then, with your cursor at the top of the empty page, press ctrl+enter to open up Share Point Designer's Code Snippets palate and choose A - TEMPLATE: FLUID
  3. Create Banner Nav Include File
    Create a copy of the template bannerNav include file on DEV (/common/templates/bannerNav/bannerNav_template.inc) into the same folder on DEV and rename the copy to your site's name as follows:
    /common/templates/bannerNav/bannerNav_YOUR-SITE-NAME.inc. Update the site title and site navigation menu elements (ul#siteMenu) in your newly created bannerNav.inc file.

    From DEV, publish this file out to the other three servers (INTRANETDEV, INTRANET, and WWW).

    On your site's template page (YOUR-SITE/zz-template.php), update the reference to the bannerNav include file from:
    /common/templates/bannerNav/bannerNav_template.inc
    – to –
    /common/templates/bannerNav/bannerNav_YOUR-SITE-NAME.inc

    See documentation on the structure of bannerNav include files.
  4. Create External Site Style Sheet ...if necessary
    If your site will contain any elements that wil deviate from the standard BNL web template styles, then you must apply those style overrides with an external style sheet. Inline styles and local, page-level styles will result in improper mobile rendering.

    To create an external style sheet, copy the template site style sheet on DEV (/common/templates/siteStyles/zz-TEMPLATE.css) into the same folder on DEV and rename the copy to your site's name as follows:
    /common/templates/siteStyles/YOUR-SITE-NAME.css.

    From DEV, publish this file out to the other three servers (INTRANETDEV, INTRANET, and WWW).

    In the <head> section of your site's template page (YOUR-SITE/zz-template.php), update the reference to the external style sheet from:
    /common/templates/siteStyles/YOUR-SITE.css
    – to –
    /common/templates/siteStyles/YOUR-SITE-NAME.css


    If your site is not going to use an external style sheet, then remove the link to /common/templates/siteStyles/YOUR-SITE.css from the <head> section of your template page entirely.
  5. Start Building Your Site — Create Site Pages
    Preview your site's template page in a browser. If everything looks okay, then you can begin using copies of this page with your site for the actual site content. Be sure to create copies of this template page so that you don't overwite the template code in this page with actual site content.

Sample Fluid-Grid Page

web tools