Avo HTML Documentation v1.0.3

Welcome

Thank you for purchasing our template.

We are happy that you are one of our customers and we assure you won't be disappointed. We do our best to produce top notch templates with great functionality, premium designs and readable code.

This documentation has been written to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.

If you have any questions that are beyond the scope of this documentation, please feel free to email, via my user page contact form http://themeforest.net/user/indonez

Package contents

The zip file contains which is everything you need to get started.

• dist    ~   all template distribution files like HTML/CSS/JS/PHP

• documentation    ~   contains all documentation files regarding the template

• psd    ~   contains an editable psd file used in this template

• src    ~   all source files that are processed (compiled/minified) to dist folder

• .npmrc    ~   npm config file

• blockit.config.json    ~   blockit builder config file

• package.json    ~   includes the list of dependencies to install from npm

• package-lock.json    ~   this locks any installed dependencies to a specific version number

Browser support

Latest

Latest

Latest

Latest

Latest

Changelog

Getting started

Please follow below steps to install and setup all prerequisites

Install node.js

If node is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system

Dependencies installation

To setup the template and start installing project dependencies, open command line/terminal in the root template folder and run

# Install all the dependencies needed
npm install

Npm commands

There are several commands that you can use in the development process using this template

# Command to compile source files from src to dist
npm run build

# Command to run Blockit Builder
npm run blockit

Blockit Builder

Blockit editor is an exclusive tool from Indonez that makes it easy for you to customize HTML templates quickly and easily. You can run this tool with the command below in your terminal.

npm run blockit

Some basic menus in Blockit and their use

Change contact form email target

To change the target email that you use on the contact form, please go to components > contact in Blockit editor, then replace the existing email with your target email

Change google map location

To change the location of the google map, make sure the location is already registered on the google map, then follow these steps

• Please go to components > contact in Blockit editor

• Open Google Maps and search for the address/company you want to show

• Once the location has been marked by the search, go into the "Share" option found directly below the locations image.

• Inside share you will find two tabs, open the "embed a map" tab. This display should now show you a copy of what your embedded map will look like on your website.

  

• click the ‘copy html’ button and paste it in "Map location" input form, then save components

SCSS customization

This template uses Bootstrap 5 as a front-end framework, so you can implement everything in the Bootstrap 5 documentation in this template.

To do advanced customization using SCSS, you can go to the src > assets > scss folder. The following is an explanation of each scss folder configured by Indonez for easy and fast development

• blockit    ~   custom sass style that used in some blockit elements

• mixins    ~   mixin method or reuse style in bootstrap component

• theme    ~   contains special sass styled for this template

• utilities    ~   contains various utilities sass that needed

• variables    ~   contains sass bootstrap variables for some elements

• vendors    ~   contains various vendor sass that needed in this template

• bootstrap.scss    ~   core of bootstrap css framework

• main.scss    ~   the entry point for the style.css file, everything is organized here

At the main.scss file entry point you can see what scss files are needed in making this template, you can explore each file referred to by this file.

// Theme fonts
@import "theme/fonts";

// Theme colors
@import "theme/colors";

// Theme global
@import "theme/global";

// Custom Bootstrap variables
@import "variables/variables";

// Bootstrap
@import "bootstrap";

// Blockit
@import "blockit/blockit";

// Vendors
@import "vendors/vendors";

// Utilities
@import "utilities/utilities";

// Theme custom
@import 'theme/custom';

Javascript configuration

If you want edit some configuration for homepage slideshow you can open config-theme.js in src/assets/js and there also available some component options that you can change.

//----------- 1. Slideshow -----------
theme_slideshow: function() {
    const path = location.pathname;

    new CarouselConfig({
        element: '#slideshow',              // carousel element id
        fadeTransition: false,              // default is slide, use 'true' if want use fade effect
        interval: 6000,                     // interval between change slide
        control: {
            type: 'button',                 // the options is: 'button', 'indicator' and 'both'
            onHover: true                   // control appears when hover in careousel element
        },
        height: {                           // height for every devices
            desktop: '723px',
            tablet: '493px',
            phone: '512px'
        }
    }).init();

    if(path.includes('homepage2') || path.includes('homepage4')) {
        new CarouselConfig({
            element: '#slideshow',          // carousel element id
            fadeTransition: false,          // default is slide, use 'true' if want use fade effect
            interval: 6000,                 // interval between change slide
            control: {
                type: 'button',             // the options is: 'button', 'indicator' and 'both'
                onHover: true               // control appears when hover in careousel element
            },
            height: {                       // height for every devices
                desktop: '604px',
                tablet: '463px',
                phone: '476px'
            }
        }).init();
    }
},
//----------- 2. Testimoni carousel -----------
theme_testimoni: function() {
    new CarouselConfig({
        element: '#testimoni',              // carousel element id
        fadeTransition: false,              // default is slide, use 'true' if want use fade effect
        interval: 9000,                     // interval between change slide
        control: {
            type: 'indicator',              // the options is: 'button', 'indicator' and 'both'
            onHover: false                  // control appears when hover in careousel element
        },
        height: {                           // height for every devices
            desktop: '238px',
            tablet: '260px',
            phone: '320px'
        }
    }).init();
},
//---------- 3. Mobile nav button -----------
theme_mobilenav: function() {
    new MobileNavbar({
        addonButtons: true,                 // options to use addon buttons, set it "false" if you won't use addon buttons
        buttons: [
            {
                name: 'Login',              // button name
                url: '',                    // button url
                type: 'primary',            // button type (default, primary, secondary, danger, text)
                icon: 'sign-in-alt'         // button icon, you can use all icons from here : https://fontawesome.com/icons?d=gallery&s=solid&m=free
            },
        ]
    }).init();
},
//---------- 4. Market widget -----------
theme_marketwidget: function() {
    new MarketWidget({
        variants: 'ticker-tape',            // market widget variant (market-list, jumbo-chart, mini-chart, ticker-tape, ticker)
        theme: 'light',                     // widget theme (dark, light)
        data: 'data/ticker-tape.json',      // url data source
        logo: false                         // set false if want hide symbol logo
    }).init()
    
    new MarketWidget({
        variants: 'mini-chart',             // market widget variant (market-list, jumbo-chart, mini-chart, ticker-tape, ticker)
        height: 100,                        // widget height
        theme: 'light',                     // widget theme (dark, light)
        colors: ['#22AB94', '#F7525F'],     // chart color in array, first index is up condition and the last index is down condition
        data: 'data/mini-chart.json'        // url data source
    }).init()

    new MarketWidget({
        variants: 'market-list',            // market widget variant (market-list, jumbo-chart, mini-chart, ticker-tape, ticker)
        theme: 'light',                     // widget theme (dark, light)
        data: 'data/market-list.json'       // url data source
    }).init()
},

Sources & credits

Fonts

• DM Sans - https://fonts.google.com/specimen/DM+Sans

CSS framework & Icons

• Bootstrap 5 - https://getbootstrap.com/docs/5.1/getting-started/introduction/
• Font Awesome - https://fontawesome.com/icons

Image assets

• Diverse people working in the office - https://www.freepik.com/free-photo/...
• Handsome businessman in suit and glasses - https://www.freepik.com/free-photo/...
• Earth or another planet edge - https://www.freepik.com/free-photo/...
• Top view of businessman showing management strategy - https://www.freepik.com/free-photo/...
• Business people shaking hands together - https://www.freepik.com/free-photo/...
• College girls studying together - https://www.freepik.com/free-photo/...

Icon assets

• 3D color icons - https://www.flaticon.com/...

Mockup assets

• Macbook air M2 Mockup - https://www.anthonyboyd.graphics/mockups/m2-macbook-air-mockup-2/