Equity HTML Documentation v1.1.6

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 Builder 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 Builder, 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 Builder

• 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 UIkit 3 as a front-end framework, so you can implement everything in the UIkit 3 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    ~   contains blockit sections style components

• mixins    ~   contains custom UIkit 3 mixins for this theme

• theme    ~   various style includes color,default variables and custom style used in this theme

• utilities    ~   contains utilities style used in this theme

• variables    ~   contains custom UIkit 3 variable for this theme

• vendors    ~   vendor style like fontawesome

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

• uikit.scss    ~   UIkit 3 library entry point that used in this theme

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";

// UIkit
@import "uikit.scss";

// 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() {
    UIkit.slideshow('.in-slideshow', {
        autoplay: true,
        autoplayInterval: 8000,
        pauseOnHover: false,
        animation: 'slide',
        minHeight: 440,
        maxHeight: 580
    });
},
//---------- 2. 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: 'Log in',             // custom button name
                url: '',                    // custom 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();
},
//---------- 3. Tradingview widget -----------
theme_tradingview: function() {
    const path = location.pathname;

    if(path.includes('index') || path === '/') {
        new TradingviewWidget({
            element: "#tradingview-widget",
            height: 361,
            type: "market-overview",
            theme: "light",
            symbol: [                       // array of instruments symbol based on Tradingview
                {s: "FX:EURUSD"},
                {s: "FX:GBPUSD"},
                {s: "FX:USDJPY"},
                {s: "FX:USDCHF"},
                {s: "FX:AUDUSD"},
                {s: "FX:USDCAD"}
            ]
        }).init()
    }
    if(path.includes('homepage2')) {
        new TradingviewWidget({
            element: "#tradingview-widget",
            height: 375,
            type: "symbol-overview",
            theme: "dark",
            symbol : "GOOGL"                // symbol based on Tradingview
        }).init()
    }
},
//---------- 4. Step hover animations -----------
theme_stephover: function() {
    if(document.querySelector('.in-equity-12') !== null) {
        const stepsEl = document.querySelectorAll('.in-steps')

        stepsEl[0].classList.add('active-step')
        stepsEl.forEach(el => {
            el.addEventListener('mouseover', () => {
                stepsEl[0].classList.remove('active-step')
                el.classList.add('active-step')
            })
            el.addEventListener('mouseout', () => {
                el.classList.remove('active-step')
                stepsEl[0].classList.add('active-step')
            })
        })
    }
},

Sources & credits

Fonts

• Archivo - https://fonts.google.com/specimen/Archivo

CSS framework & Icons

• UIkit 3 - https://getuikit.com
• Font Awesome - https://fontawesome.com/icons
• Pixel perfect Rounded Shapes - https://www.flaticon.com/authors/pixel-perfect/rounded-shapes

Image assets

• Forex trade graph chart - https://www.freepik.com/free-photo/...
• Stock broker trading online - https://www.freepik.com/free-photo/...
• Graphic concept with coins - https://www.freepik.com/free-photo/...
• Office businessmen - https://pixabay.com/photos/...
• Federal administrative - https://pixabay.com/photos/...
• Abstract fantasy landscape - https://www.freepik.com/free-photo/...
• Businessman suit classy - https://pixabay.com/photos/...
• 3d earth graphic - https://www.freepik.com/free-vector/...
• Cyber security concept - https://www.freepik.com/free-vector/...
• Office business colleagues meeting - https://pixabay.com/photos/...

Mockup assets

• Multi Device Scene Creator Mockup - https://unblast.com/free-multi-device-scene-creator-mockup-psd/