Create a website with Timer Bootstrap template: Setup page templates

1. Place the elements of the Bootstrap Timer template that are used on every page, for example, header and footer, in the default.cshtml view, located in  <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/.
   Do the same for all widget placeholders that are added in the Sitefinity CMS user interface.

   NOTE: The default.cshtml view, on which the default page template is based, is located in Sitefinity CMS under Design » Page Templates.

2. Navigate to Design » Page Templates and add the reusable parts of the Bootstrap Timer template to the default page template, so that they are present on all pages.
   Open the template and add the container grid widget to the header and footer placeholders.

   NOTE: The footer consists of Bootstrap columns, so put the grid-8+4 grid widget in it. The rest of the footer is HTML code, which can be placed directly in the HTML view in Content block widgets.

3. Choose the NavigationView.Horizontal.cshtml Bootstrap navigation from the Bootstrap package.
4. Modify the NavigationView.Horizontal.cshtml.
   Widgets get their views from the <root>/Mvc/Views folder, where you previously moved all default Bootstrap widget templates. To modify the NavigationView.Horizontal.cshtml:
   1. Make a new folder inside the BootstrapTimer package under <root>/ResourcePackages/BootstrapTimer/MVC/Views and name it Navigation.
   2. Copy the default NavigationView.Horizontal.cshtml view to the <root>/ResourcePackages/BootstrapTimer/MVC/Views/Navigation/ folder.
   3. Modify the view’s HTML as per the Bootstrap Timer template navigation template.

      NOTE: Make sure to remove the jQuery reference from the Navigation template since it is already loaded in the Layout file.

5. Replace the IDs from the Bootstrap Timer template with CSS classes.
   All pages contain section elements <section>, for which you already created a custom grid widget in step 8 of the Setup project and pages section. Most of the sections in the Bootstrap Timer template have IDs assigned. These IDs are used in the CSS to define CSS selectors. Since multiple instances of the same grid widget are used on the same page, there cannot be unique ID attributes for every grid widget, placed on the page. Therefore, you need to replace the IDs from the Bootstrap Timer template CSS classes. The sf- prefix is prepended to each of these CSS classes, so that they are distinguished from the native Bootstrap Timer template CSS styles. Thus, you can easily apply these CSS classes to specific grid widgets that you place on the page and alter their appearance. For example, if the Bootstrap Timer template contains a section element with <section id=”hero-area”>, the ID is replaced with the CSS class <section class=”sf-hero-area”>.
6. Place the sections, repeated in all or some pages, in the respective page templates:
   1. All pages have a "call-to-action" section, so add a "call-to-action" section to the default page template in Sitefinity CMS under Design » Page Templates.
   2. 7 pages have a "global-page-header" section, so create a template, based on the default one and call it default-with-global-header. It consists of a wrapping <div> with a CSS class, an <h2> heading, and a breadcrumb.
      Place the "global-page-header" section in the section and configure its contents:
      1. Drag a grid-12 grid widget and, in the widget designer Classes property, set the CSS class.
      2. For the heading, place a Content block widget in the grid-12 grid widget and, from the Actions menu, enable the Editable in pages option.
         In the template, specify the common markup.
      3. On each page, edit the specific Content block to enter the particular page name.
      4. For the breadcrumb, use a breadcrumb that has a different template than the default one.

RESULT: You setup all common elements on page templates and you can proceed with creating the actual pages.