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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Tags

Was this article helpful?