Theming Bootstrap
In order to generate [client-name]-theme.css you must follow the next steps:
1. Under “Premier.CMS/Mvc/assets/scss/PatternLibraryVariables” copy “_SmarterTek.scss” file and rename it with your new site name.
2. Under “Premier.CMS/Mvc/assets/scss/ThemeVariables” copy “_SmarterTek.scss” file and rename it with your new site name.
3. Under “Premier.CMS/Mvc/assets/scss/Theme” copy “_SmarterTek.scss” file and rename it with your new site name. You now have 3 files created.
4. In the Premier.CMS/Mvc/assets/scss/Themes/_ThemeName, remove all the content inside the file, then add this line: F. 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 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 last updated css to web site users.
8. Find the postcss task just right after the cachebuster task and add the lines to include the files so this way 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 Sitefinity resources packages where correspond.
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
- Theming Bootstrap
- Page Long Cache Considerations and Configuration
- 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 Authentication Expiration
- Sitefinity Images
- Internal Plugins Configuration in Update 6 - SC20220114
- Internal Plugins Configuration in Update 7
- How to Setup Pickup Instructions Page
- How to Setup Terms and Conditions Page
- Resource Manage Multisite
- 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
- Change Password Configuration
- Recycle Bin
- Login Page Configuration
- Error Page Configuration
- Configure the SmarterCommerce Menu in Backend
- SmarterCommerce Settings Not Being Displayed
- Management Console Email Templates
- EPayments Modules
- Troubleshooting Errors
- Configure Kraken Image Optimization
- Sitefinity Health Check Integration