Create a website with Timer Bootstrap template: Setup project and pages

Default resources, such as widget views and grid widgets, reside in the <root>/Mvc folder and Bootstrap package-specific resources reside in the <root>/ResourcePackages/BootstrapTimer folder. Therefore, you need to make sure the resources are located in the proper locations and folders.

  1. In Sitefinity CMS Project manager, create a Sitefinity CMS project.
  2. Make a copy of the Bootstrap package folder under <root>/ResourcePackages and rename it BootstrapTimer.
    Thus, a default page template is automatically created in Sitefinity CMS. The template is located in Design » Page Templates. The template is based on the default.cshtml view, located in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts folder.
  3. Copy the Bootstrap Timer template frontend assets to the <root>/ResourcePackages/BootstrapTimer/assets/ folder.

    NOTE: The template does not use pre-processors, such as LESS, SASS, and Stylus. Therefore, files are located in the dist folder, as opposed to the src folder.

  4. Under <root>/ResourcePackages/BootstrapTimer/assets/dist, create a folder and name it Timer after the template.
    Copy all frontend assets in this new <root>/ResourcePackages/BootstrapTimer/assets/dist/Timer/ folder.
  5. Navigate to <root>/ResourcePackages/BootstrapTimer/Mvc/Views/.
    This is the folder that contains all widget views.
    Move all folders from <root>/ResourcePackages/BootstrapTimer/Mvc/Views/ (except the Layouts folder) and paste them in the <root>/Mvc/Views/ folder.
    The Layouts folder, located in <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/, contains the Razor view, on which the Bootstrap Timer page template is based. The template is located in Sitefinity CMS under Design » Page Templates. For more information about priorities, see Priorities for resolving views.

    NOTE: In case a folder with a name that corresponds to the name of a widget, for example, Blog post, does not exist in the custom BootstrapTimer package under <root>/ResourcePackages/BootstrapTimer/Mvc/Views/, Sitefinity CMS takes the view from the <root>/Mvc/Views folder.

  6. All grid widgets reside in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder. To preserve the default grid widgets and leave only the custom ones in the BootstrapTimer folder (as with the widget views):
    Move all files from the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder to the <root>/GridSystem/

    IMPORTANT: You must preserve the same hierarchy, as in the package, so that the GridSystem folder is on the same level as the MVC folder. Default grid widgets are pulled from <root>/GridSystem/ and the package-specific grid widgets are pulled from <root>/ResourcePackages/BootstrapTimer/GridSystem/.

  7. Create a custom grid widget Section.html and place it in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder.

    NOTE: Most HTML pages in the Bootstrap Timer template consist of sections, that is, <section> HTML tags, therefore you need a custom grid widget to contain these sections.

  8. Create a custom grid widget, called row.html and place it in the <root>/ResourcePackages/BootstrapTimer/GridSystem/ folder.

    NOTE: In some cases, a <div> HTML tag with CSS class row is used to wrap a section, therefore you need a custom grid widget for it.

    IMPORTANT: Put a sf_colsIn class to the <div> HTML tag to create a placeholder in the Sitefinity CMS user interface.

  9. Add the references:
    1. Open the default.cshtml view, located in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/ folder.
    2. Add all references to .CSS and .JS files. To do so, follow the instruction the article Refer to resources inside views and by using the @Html.Script and @Html.StyleSheet helper methods.
  10. Place the favicon.ico file in the root of the project (under <root>).
  11. Restart the Sitefinity CMS application.

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.


Was this article helpful?