Fila - Documentation

Getting Started

The template folder fila is available inside the downloaded zip file. Need to unzip the zip file to find the template also the documentation folder.

The files and folders structure is similar to the following:

1. assets/css — folder with CSS files.
2. assets/fonts — folder with fonts files.
3. assets/images — folder with images files.
4. assets/js — folder with JavaScript files.
5. assets/js/custom — folder with Custom Javascript files.
6. assets/scss — folder with SCSS files.

Upload the template files to the server with the help of one of the FTP-clients like FileZilla.

Files Edit & Upload:

Individual pages can be customized by opening in a code editor such as VS Code. Once all the customization completed then to make the website live you need to upload the updated project files to the hosting server for your own domain. The files can be uploaded using FTP client such as FileZilla.

Javascript Structure

Followings are the JS files which loaded before the end of HEAD or BODY Section:.

<!-- Link Of JS File -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/sidebar-menu.js"></script>
<script src="assets/js/quill.min.js"></script>
<script src="assets/js/data-table.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/fullcalendar.main.js"></script>
<script src="assets/js/jsvectormap.min.js"></script>
<script src="assets/js/world-merc.js"></script>
<script src="assets/js/custom/apexcharts.js"></script>
<script src="assets/js/custom/echarts.js"></script>
<script src="assets/js/custom/maps.js"></script>
<script src="assets/js/custom/custom.js"></script>

HTML Structure

The Fila is a responsive template and is based on the Bootstrap Framework. For more information you can check the Bootstrap CSS.

The general template structure is the same throughout the template and each of the part is under a section with a section id name. Here is the general structure:

<div class="card bg-white p-20 rounded-10 border border-white mb-4">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-20">
        <h3>Profit</h3>
        <div class="dropdown select-dropdown without-border">
            <button class="dropdown-toggle bg-transparent text-secondary fs-15" data-bs-toggle="dropdown" aria-expanded="false">
                Last Month
            </button>

            <ul class="dropdown-menu dropdown-menu-end bg-white border-0 box-shadow rounded-10" data-simplebar>
                <li>
                    <button class="dropdown-item text-secondary">Last Day</button>
                </li>
                <li>
                    <button class="dropdown-item text-secondary">Last Week</button>
                </li>
                <li>
                    <button class="dropdown-item text-secondary">Last Month</button>
                </li>
                <li>
                    <button class="dropdown-item text-secondary">Last Year</button>
                </li>
            </ul>
        </div>
    </div>

    <h2 class="lh-1 fs-26 fw-medium" style="margin-bottom: -10px;">$359K</h2>
    <div id="profit_chart" style="margin-bottom: -17px;"></div>
</div>

Main Color Change Option

File path: assets/scss/_variables.scss

$body-color: #919aa3; 
$body-color-40: #697689; 
$body-color-50: #7E8999; 
$body-color-60: #8E8DA1; 
$body-bg: #eff3f9; 
$primary: #0f79f3; 
$primary-30: #138BFD; 
$primary-40: #f1f2fd; 
$primary-50: #796df6; 
$primary-60: #978bff; 
$secondary: #475569;
$secondary-40: #314055;
$secondary-50: #2B2A3F;
$info: #00cae3;
$info-40: #2AA9FF;
$info-50: #52C7FF;
$success: #2ed47e;
$success-40: #eafbf2;
$success-50: #00b69b;
$success-60: #2ecc71;
$success-70: #0EAC5D;
$success-80: #06B48A;
$success-90: #52D689;
$warning: #ffb264;
$warning-40: #F1B31C;
$warning-50: #FC7013;
$warning-60: #FE9039;
$danger: #e74c3c; 
$danger-40: #fdebf3; 
$danger-50: #ee368c; 
$danger-60: #FD5812; 
$light: #f4f6fc;
$light-40: #ddddef;
$light-50: #e7effd;
$light-60: #E6E1F8;
$light-70: #D2D2E4;
$dark: #000000;
$border-color: #e7e2e2;
$border-color-40: #eeeeee;
$border-color-50: #e0e0e0;
$border-color-60: #eaecf2;
$border-color-70: #c2cada;
$border-color-80: #e0e2ec;
$border-color-90: #F5F5F5;

Note: After SCSS file run then it will be work

How to Change Image?

Please go to the image file path: assets/images/... replace the image which one you want following placeholder image size & name

How to Add a Google Maps to The Website?

1. Please go to maps.google.com. Type the location in the search box and click on Share.

2. In the new window click on Embed a map and copy the HTML code of the map. After that add the HTML file.

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images from:
https://freepik.com/
https://pixabay.com/
https://unsplash.com/

Google Fonts:
Outfit

IconFont
RemixIcon
Material Symbols