Qash - Crypto Exchange Dashboard UI Kit

Qash documentation version 2.0

Introduction

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is 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. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: VS Code, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

Trading View #back to top

In the apexChart-init.js file,

var options = {
    chart: {
        height: 100,
        type: 'line',
        zoom: {
            enabled: false
        },

        toolbar: {
            show: false,
        }
    },
    series: [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69, 91, 80, 10, 41, 35, 51, 49, 62, 69, 91, 80]
    }],
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        width: 2,
        colors: ["#F7931A"],
    },
    grid: {
        show: false,
    },
    tooltip: {
        enabled: false,
        x: {
            format: "dd MMM yyyy"
        },
    },
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        axisBorder: {
            show: false
        },

        labels: {
            show: false
        }
    },
}

Date Picker #back to top

In the jquery-ui-init.js file,

(function ($) {
    'use strict'
    $("#datepicker").datepicker({
        dateFormat: "dd-mm-yy",
        duration: "fast"
    });
})(jQuery);

Toastr #back to top

In the toastr-init.js file,

(function ($) {
    "use strict"

    toastr.success("Complete your payment to make it easier to exchange", "Complete your payment!", {
        // timeOut: 500000,
        closeButton: !0,
        debug: !1,
        newestOnTop: !0,
        progressBar: !0,
        positionClass: "toast-top-right demo_rtl_class",
        preventDuplicates: !0,
        onclick: null,
        showDuration: "300",
        hideDuration: "1000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut",
        tapToDismiss: !1,
        closeHtml: '
  Suggest'
    });

})(jQuery);

Circle Progress #back to top

In the circle-progress-init.js file,

$('.toast-success').circleProgress({
        value: 0.8,
        size: 80,
        thickness: 10,
        fill: {
            gradient: ["#FE9431"]
        }
    }).on('circle-animation-progress', function (event, progress) {
        $(this).find('.progress_count').html(Math.round(80 * progress) + '%');
    });

Perfect Scroll #back to top

In the scripts.js file,

const ml = new PerfectScrollbar('.market-limit');
const mn = new PerfectScrollbar('.market-nested');
const ln = new PerfectScrollbar('.limit-nested');
const sln = new PerfectScrollbar('.stop-limit-nested');
const pp = new PerfectScrollbar('.price-pair');
const ts = new PerfectScrollbar('.trade-history');
const ob = new PerfectScrollbar('.order-book');
const yp = new PerfectScrollbar('.your-position');
const bw = new PerfectScrollbar('.balance-widget');
const mkn = new PerfectScrollbar('.market-news');
const opt = new PerfectScrollbar('.open-position-table');

Global Scripts #back to top

In the scripts.js file,



//  Preloader
jQuery(window).on("load", function () {
    $('#preloader').fadeOut(500);
    $('#main-wrapper').addClass('show');
});


(function ($) {


    //  Header fixed
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.header').addClass("animated slideInDown fixed"), 3000;
        } else {
            $('.header').removeClass("animated slideInDown fixed"), 3000;
        }
    });

    $('select').niceSelect();

    $(function () {
        for (var nk = window.location,
            o = $(".menu a").filter(function () {
                return this.href == nk;
            })
                .addClass("active")
                .parent()
                .addClass("active"); ;) {
            // console.log(o)
            if (!o.is("li")) break;
            o = o.parent()
                .addClass("show")
                .parent()
                .addClass("active");
        }

    });

    $(function () {
        // var win_w = window.outerWidth;
        var win_h = window.outerHeight;
        var win_h = window.outerHeight;
        if (win_h > 0 ? win_h : screen.height) {
            $(".content-body").css("min-height", (win_h + 60) + "px");
        };
    });


})(jQuery);

AM Chart #back to top

In the owlcarousel-init.js file,

    $('.testimonial1').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        dots: false,
        navText: ["", ""],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    });

Copyright and license #back to top

Code released under the ThemeForest License.

Development credit: Qash Inc