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 Profit, 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 Profit's and Bootstrap source and future updates will be much easier.

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

CSS method - custom.css

If you prefer to work with Profit 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 me-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 -->