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.
- In Sitefinity CMS Project manager, create a Sitefinity CMS project.
- 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.
- 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.
- 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.
- 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.
- 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/.
- 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.
- 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.
- Add the references:
- Open the default.cshtml view, located in the <root>/ResourcePackages/BootstrapTimer/Mvc/Views/Layouts/ folder.
- 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.
- Place the favicon.ico file in the root of the project (under <root>).
- Restart the Sitefinity CMS application.