Fina HTML Documentation v2.0.0

Financial HTML template that suite for forex & stock broker also invesment company.

  • 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

    Chrome
    Latest
    Firefox
    Latest
    Edge
    Latest
    Safari
    Latest
    Opera
    Latest

    Changelog

    v2.0.0
    Integrates Blockit Builder for easy editing
    Update UIkit to ver 3.16.17
    Improves utilities.js to inline with new update
    Refactors sass structure files following changes to UIkit
    v1.0.1
    Update UIkit framework to latest version 3.0.0 beta 40
    Remove swiper slider, change with UIkit slideshow component
    Remove jquery stock ticker (due the yahoo finance api discontinue), change with static content
    Add white background to UIkit accordion content (.uk-accordion-content)
    v1.0.0
    Initial files for ver 1.0.0
  • Getting started

    Please follow below steps to install and setup all prerequisites

    This step aims for users who want to speed up development process and is optional. You can still use plain HTML/CSS/JS to customize. Files you need are located in dist folder

    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

    Download node.js

    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

    Pages

    Add an HTML page dynamically and easily. just named, drag and drop every sections do you like.

    Navigation

    Create your website navigation, choose the name you like and then direct the link to the page.

    Posts

    Starting to become a blog writer is as easy as typing whatever you like, let us create the code for you.

    Components

    Set and customize the components used to match and complement the needs of the site you want.

    Settings

    Find more settings here, you can personalize the website according to your wishes easily & quickly.

    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.

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

  • SCSS customization

    To make changes to this step, it is recommended that you have sufficient knowledge of SCSS or CSS

    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: 480,
            maxHeight: 700
        });
    },
    //---------- 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: 'signin.html',         // 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();
    },
  • Sources & credits

    Fonts

    CSS framework & Icons

    Image assets

    Mockup assets