Cutomization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

SCSS method - user.scss (highly recommended)

Customizing SCSS. This is more versatile and sustainable way to customize Cavistar, It requires the gulp compilation steps outlined above. There are two major benefits of this method are you can easily customize theme styles without touch Cavistar's and Bootstrap source and future updates will be much easier.

  • user-variables.scss: This file can be used to override Bootstrap core and Cavistar variables for customizing template.
  • user.scss: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and Cavistar's core files.

CSS method - custom.css

If you prefer to work with cavistar as a static source without Gulp and Sass, you will need to add custom CSS through a separate CSS file.

You just need to link custom.css at the end of <head> tag of each page. See example below:

copy

<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
  1. Logo can be changed from below code inside the header container.
    copy
    
<!-- Brand -->
<a class="navbar-brand mr-lg-5" href="index.html">
    <img src="assets/img/logos/logo.svg" alt="...">
</a>
<!-- End Brand -->
  2. If you want to place PNG image as logo, then simply replace the SVG code with img tag. Like this:
    copy
    
<!-- Brand -->
<a class="navbar-brand" href="index.html">
    <img src="assets/img/logos/yourlogo.png" alt="Logo" />
</a>
<!-- End Brand -->