Theming Bootstrap
To generate [client-name]-theme.css you must follow these steps:
- Under “Premier.CMS/Mvc/assets/scss/PatternLibraryVariables” copy “_SmarterTek.scss” file and rename it with your new site name.
- Under “Premier.CMS/Mvc/assets/scss/ThemeVariables” copy “_SmarterTek.scss” file and rename it with your new site name.
- Under “Premier.CMS/Mvc/assets/scss/Theme” copy “_SmarterTek.scss” file and rename it with your new site name. You now have this 3 files created:
4. In the Premier.CMS/Mvc/assets/scss/Themes/_ThemeName, remove all the content inside the file, then add this line: @import "./_SmarterTek.scss";. This means the new template inherits from SmarterTek theme, and all the styles rules must be added in this new file. Under “Premier.CMS/Mvc/assets/scss” copy “_smarter-tek-theme.scss” file and rename it with your new site name.
5. Within this file, rename all “SmarterTek” appearances with your new theme name.
6. Now you must include four lines in the Grunt processor, which will generate the output css on the run of the designed task. Grunt file is in the following path: “Premier.CMS/Mvc/Grunt/Gruntfile.js”. Remember to follow the same folder structure as “~/ResourcePackages/Bootstrap4/assets/[YourFolderName]/css/”.
7. In the same file, find the chachebuster task and add the line to include new files in the cachebuster.json file, used to deliver the last updated css to website users.
8. Find
the postcss task right after the cachebuster task and add the lines to
include the files so the task can minify the css.
9. Under
the path “Premier.CMS/Mvc/Grunt/, open a command console
and run “grunt deploy” to obtain minified css files or “grunt” to see the
unminified version.
10. Once the “grunt” or “grunt deploy” task is run, automatically the file structure will be created in “Premier.CMS/Mvc/assets/css/[YourFolderName]/css/theme-name-theme.css".
11. Use the
recently generated theme css and cachebuster.json files to update the corresponding Sitefinity resources
packages.
This Section Also Contains
- ECommerce CMS MVC with Bootstrap 4
- Creating a New Sitefinity Custom Template
- How to Share Template in Multisite Instance
- How to Customize a Site with Resource Packages
- How to Configure the Not Available Images for Configured Products
- Page Long Cache Considerations and Configuration
- Replace Not Available Images
- Mappings Module
- Personalization Integrated with JDEdwards
- How to Add New Widget Template
- How to Include Local Web Font
- How to Use External Plugins Locally
- Sitefinity Images
- Sitefinity Authentication Expiration
- Sitefinity Health Check Service Configuration and SmarterCommerce Health Checks
- Internal Plugins Configuration in Update 6
- Internal Plugins Configuration in Update 7
- How to Setup Pickup Instructions Page
- How to Setup Terms and Conditions Page
- Sitefinity Multisite Resource Override
- Content Search Configuration
- Product Assignments (Filter by Attribute)
- Google Analytics Configuration
- Configure Azure Redis Cache (ASP.Net State Server Provider)
- Task Manager Email Notifications
- Configure Google Maps
- Catalog and Product Content Metatags (SEO)
- Cookies Configuration
- Reset Password Configuration
- Recycle Bin
- Login Page Configuration
- Error Page Configuration
- Configure SmarterCommerce Menu Backend
- Sitefinity User Group
- Copy Settings and Mapping on Multisite
- New Site – Activate Modules
- Shared Products Module
- Configure Image Optimization
- Management Console Email Templates
- How to Enable Canonical URL
- EIPP Modules
- Sitefinity File Manager
- PunchOut Configuration
- Troubleshooting