BNL Home

Build a Big-Stripe Home Page

  1. Create New Site Home Page in Your Website
    Create a new page in your site's root subdirectory called index.php.
  2. Insert Big Stripe 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: HOME PAGE
  3. Set Big Stripe Primary Image
    On your newly created home page, set the value of the $bigStripeImgURL variable (at the top of the page code) to the location of your big stripe image file.

    Documentation on how to create (and position) big strip images
  4. Set Stripe Gradient/Background Color(s)
    Set the value of the $bigStripeColor1 variable to the hex value of the background stripe color that you want. Include the "#" in the value. E.g. "#1e5799" If you specify a value for the $bigStripeColor2 variable, then the stripe div will contain a vertical CSS gradient background using $bigStripeColor1 as the top color and $bigStripeColor2 as the bottom color. If you leave $bigStripeColor2 set to null, then the stripe will have a solid CSS background color of the value specified in $bigStripeColor1.
  5. Adjust Big Stripe Height ...if necessary
    The default height for the big stripe page is 360 pixels. If you need a different height, then add the following lines of CSS code to your site style sheet in /common/templates/siteStyles/YOUR-SITE-NAME.css:

    #stripe.bigStripe { height: XXXpx; }
    .bigStripe #banner { height: XXXpx; }

  6. Create Banner Nav Include File
    If you haven't done so already, you'll need to create a bannerNav.inc file for your site. To do so, 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.
  7. 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.

Sample Big Strip Home Page

web tools