1. Introduction

We would like to thank you for choosing Qolle.

We made Qolle from the ground-up with flexibility in mind. Each element of Qolle is extremely customizable, where you can make
Qolle to reflect your own branding styles.

The guide gives you detailed methodologies about how you can customize Qolle and make it fit your brand perfectly!

1.2. What's Included

After purchasing Qolle template on templateforest.net with your Envato account, go to your Download page. You can choose to download Qolle template only or the entire Qolle template package which contains the following files:

  • Qolle Html: A .zip file with all .html files with all necessary assets.
  • Documentation: An HTML format documentation.
  • Licensing.

2. Template Structures

2.1. HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

2.2. CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

2.3. JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

3. Change Contents

3.1. Changing Images

To change any images of the website
  1. Carefully collect the source name of the image (i.e. banner-img.jpg)
  2. Open the file called images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

You have to do the following to change this image with your own image:

  1. Open the file called images.
  2. Find the particular image file called banner-img.jpg
  3. Replace the file with your image
  4. Make sure that the file name does not change.

Note: Images seen in the live preview are only set for preview purposes.
They are not included in the download files.

3.2. Changing Brand Logo

  1. Open the folder called images.
  2. Find the .png files called logo.png and logo-2.png.
  3. Replace the files with your own logos.
  4. Make sure that the file names does not change.

3.3. Changing Colors

You can change color and font via CSS variables value And

3.3.1 Changing Template colors With css

  1. Open the main.css file from assets > css folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.

Have a look at the following image for a visual description:

Image

3.3.1 Changing Template colors With SCSS

Before using this method you have to install scss compiler on you computer.
Read More About SCSS From Here.

Then

  1. Open the _variables.scss file from assets > scss > abstracts folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.
  4. Now Compile your scss file.

Have a look at the following image for a visual description:

Image

3.4. Change FontAwesome icons

  1. Open the .html file with a text-editor from where you want to change any FontAwesome icon
  2. Choose and collect an icon from fontawesome.com
  3. Replace the existing icon from the .html file with the new icon you got from fontawesome.com

To get the icon from fontawesome.com-

  1. Go to fontawesome.com
  2. Click the icon tab
  3. Search for your desired icon font and click on the thumbnail to get the icon
  4. Copy the red bordered text as shown in the following image
  5. Collect this text to and replace the existing icon from the .html file.

4. Sources and Credits

We've used the following fonts, free icons and plugins as listed:

5. Support

Support Scope

Included in Free Support Scope:

  • Fixing bugs
  • Helping clients in changing site contents by sending instructions that couldn’t be covered by documentation

NOT Included in Free Support Scope: