krileonNow that Bootstrap 4 is finished it's time to move forward again! This time we're finally bringing the much needed configuration to personalize your Community Builder site with your own color schemes. This functionality will be included as part of CB Template Changer. Check out the details below!
One of the largest complaints we've had about Bootstrap in general is being unable to customize it to fit their site unless they use a Joomla template that is also Bootstrap, but that's just not always an option and even then you've to deal with templates using different Bootstrap versions. We hear you and we've finally figured out a solution.
The idea is to allow you to generate your own Community Builder templates. These generated templates are fully install-able (and installed) template plugins. They'll have the same great functionality as any CB template plugin with default template fallback, CSS overrides, etc.. The problem with this is that it has always been too heavy to do since we need to include a SCSS compiler so it was always a no-go to include in CB it self, but we've CB Template Changer which provides the functionality for users to select a different CB template for their profile. It just made perfect sense to include it in CB Template Changer and it keeps CB from having to include the bulky SCSS compiler.
So first and foremost you've 100% control over your template. You can completely customize ALL the SCSS variables that Bootstrap 4 supports. However, for simplicity sake the Theme functionality is limited to the core color variables to make things easy. Check it out below.
All of the color inputs include a color selector so don't worry about having to supply color hex codes your self. Simply click one and the color picker will display. It also supports SCSS functions as you can see with the link hover color. The previews are also live and will update as you change the color. Once you've finished selecting the colors you want you'd simply click "Compile Template", which will run the SCSS compiler and prepare your templates CSS. Once it has finished you'll notice that the Bootstrap and Template tabs now contain your generated CSS.
Now all you need to do is Save your template and it'll generate then install your CB template plugin. If one already exists (e.g. you're editing an existing template you've created) it'll simply update it. You can also provide your Overrides here directly if you like.
Another great feature is the Variables tab. This allows you to provide your own Bootstrap 4 SCSS. Once you've finished supplying your variables you'd simply click "Compile Template" at the bottom to generate your Bootstrap and Template CSS. This gives you FULL control over Bootstrap 4 styling.
It's not quite done yet as there are more features coming. Mostly the functionality to download your template as an install-able CB plugin. This will allow you to easily share your templates, install them on multiple sites, or just for backup purposes if you like.