Configuring Style & Bootstrap Compatibility

Instead of overriding Bootstraps components. We have made it compatible with theme using Bootstraps native scss varibles. And it's recommended by Bootstrap. This way we are able to manage leveraging decent ammount of css , as there is no overriding. And we made it centrally configurable with config.bs.scss file in vendor_assets/css/bootstrap/ directory

1. config.bs.scss

This file contains and controls all the Bootstraps default components.It also contains the color scheme, font, spacing and other common staff. If you want customize anything of Bootstrap, you can literally do it here by overriding bootstrap varibles.

2. Where and to find and how to customize Bootstraps SCSS variables

Go to vendor_assets/css/bootstrap/scss/_variables.scss and search for the variable or component name. Evey components configurable property will be avaible in this file. You can just copy the variable form there and paste it in config.bs.scss removing the default flag and assigning a new value. For Example, here I've redefined color scheme for this theme:

3. Where to look for, how to get, and how to change theme color variables

Go to theme_assets\sass\_css-variables.scss and search for the variable or component name. Evey components configurable property will be avaible in this file. You can just copy the variable form there and paste it in config.bs.scss removing the default flag and assigning a new value. For Example, here I've redefined color scheme for this theme:

Update Logo

How to change logo

Navigation Structure

Change the navigation according to your content, also you can add or remove according to your needs.

For Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.
You can add a Favicon to your Website using the following code:

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below: