Web Themes & Templates

Discussion on Metronic - Bootstrap 4/5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme

Discussion on Metronic - Bootstrap 4/5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme

4.88 (7,211 ratings) 4.88 stars
Cart 96,156 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

This author's response time can be up to 1 business day.

10783 comments found.

Hi, is there a way to get the older version of your template ?

Hi :),

The marketplace allows to distribute only the latest version of the theme. For any further assistance please email our support at support@keenthemes.com

Thanks.

Can you please let me know by when you would be supporting this for Meteor. I have already purchased this theme and finding it difficult to integrate it.

Hi :),

Thanks for getting back to us. Supporting Meteor is not yet decided since we are not familiar with this framework. But we will get back to it in the near feature.

Thanks.

Hi … I’m implementing the AngularJS version (Admin3). Now I want sliders (ION Slider). How do I implement the ION slider with the AngularJS version? Couldn’t find a demo.

Hi :),

Thanks for contacting our support.

To any jQuery plugin within AngularJS version you can refer to http://www.keenthemes.com/preview/metronic/theme/templates/admin/angularjs/#/form-tools demo where variouse plugins usage with AngularJS is demonstrated. Just refer to app.js main script to learn how each plugin is included and initialized in HTML code. If you need any further assistance please contact our support at http://keenthemes.com/forums/forum/support/metronic/

Thanks.

Ah thanx .. managed to get it working … tip for everybody who wants to use the ion range sliders ... update to the current version first …

Great! Happy to hear that your managed to solve it. Good luck with your project :)

Hi,

I’m using “admin 1” material theme. However, I didn’t like the styling of the Bootstrap alerts in (http://www.keenthemes.com/preview/metronic/theme/templates/admin_material_design/ui_alert_dialog_api.html), but liked the styling done in the HTML version (http://www.keenthemes.com/preview/metronic/theme/templates/admin/ui_alert_dialog_api.html)

My question is: Can I use “admin 1 material design” theme for everything and use the styling of the HTML theme version only for alerts?

Thanks.

Hi :),

Thanks for contacting our support. In your case you will need to override the alerts with the HTML version’s style in custom.css:

.alert {
   box-shadow: none !important;
   border-radius: 0 !important;
}
.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}
.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}
.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}
.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

If you need any further assistance please let us know.

Thanks.

Thank you for your “always” quick response!

This is how I thought I would do it, but I thought there could be another way of doing this (e.g. configuration).

Thanks again.

You are welcome :) Good luck with your project! :)

I am trying to submit a form with a simple script but its not doing anything?? is there something in the code disabling submit?

I cant paste all the code.

This is fixed . my mistake!

Great! :) Good luck with your project! :)

I have a WP site but I would like to make another one to use as a CRM with this template? How can I go about making one?

Hi :),

Thanks for your interest in Metronic.

Basically to utilize Metronic in your custom site or application you will need some experience in end to end web development since this theme is not for non-developer users. Metronic is basically an HTML theme(built with HTML, javascript and css) without actual functionality(the database integration and application business model). The actual implementation is responsibility of buyers. Basically any web applications/systems contain of 2 layers:

1) Design and Frontend UI(html, css, javascript)

2) Actual system implementation using a server side language such as PHP or Java, and database engine such as MySQL or Oracle.

So our Metronic theme, as an HTML theme helps you on the step #1. The step #2 will be responsibility of the buyers as every buyer has own requirements and system specification.

If you need any further clarifications please let us know. For more info you can check our FAQ here: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469/support

To stay updated on Metronic’s new releases please follow us on http://twitter.com/keenthemes ;)

Thanks.

I may be completely missing something but I have been over the documentation a few times. If I want to use admin4 does that mean that I need to rename that admin and use layout4? I did a search and it seems like the different admin files use files from different layouts.

The ultimate goal is to just upload exactly what I need to upload and leave the rest on my computer so that I don’t add anymore clutter than needed.

Thanks!

Let me follow up. If I change all of the references in admin4 to /layout4/ instead of /layout3/ or just /layout/ ?

Hi :),

Thanks for your feedback. If you use admin4 then you can keep layout4 folder name as it is. If you are not using other admin theme then you don’t have to deploy other admin theme assets(skip layout, layout2, layout3, layout5, layout6 and layout7). If you need any further assistance please let us know.

Thanks.

Hi,

Your post contains a link to a website thats not related to Mertronic. Can you provide us proper URL to the issue page ?

Thanks.

HI Am using the Admin HTML layout 4. How can I make the sidebar fixed??

Hi :),

Just apply “page-sidebar-closed” class to the body element and “page-sidebar-menu-closed” class to “page-sidebar-menu” DIV.

If you need any further assistance please let us know.

Thanks.

Hi, where can i get online store page like before? It’s only admin page. I really need online store page. TQ

Hi :),

Metronic used to include the frontend and email templates as a free bonus items which made Metronic a bundle theme. Envato has decided to move all bonus themes to appropriative categories and a free bonus theme will no longer be free for new users. Now Metronic is no longer a bundle theme and but it still will be a complete admin theme and will continue growing with new admin designs and components.

However we decided to release the frontend themes as freebies in our site: keenthemes.com

If you need the latest version of the frontend themes you can email our support at support@keenthemes.com and provide your license key and we will provide you v4.0 with latest frontend themes.

We hope for your understanding and support on this major change.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hello, the current version does not include Frontend eCommerce, Frontend Corporate, One Page Parallax, are You planning to add them? if so, when?

Hi :),

Metronic used to include the frontend and email templates as a free bonus items which made Metronic a bundle theme. Envato has decided to move all bonus themes to appropriative categories and a free bonus theme will no longer be free for new users. Now Metronic is no longer a bundle theme and but it still will be a complete admin theme and will continue growing with new admin designs and components.

However we decided to release the frontend themes as freebies in our website: keenthemes.com

If you need the latest version of the frontend themes you can email our support at support@keenthemes.com and provide your license key and we will provide you v4.0 with latest frontend themes.

We hope for your understanding and support on this major change.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Downloaded the latest version, when I try index.html within the AngualarJs folder, it doesnt work…

Hi, well I tried this but it still does not work.

Hi, well I tried this but it still does not work.

Hi,

Can you clarify your issue with more details ? What error are you getting in the console ? You can debug it in chrome by launching the chrome’s dev tool(CTRL+SHIFT+J) and open the console tab. If possible please provide us some screenshots. Any further details you can post as a support case in http://keenthemes.com/forums/forum/support/metronic/

Thanks.

We found that currently your admin theme 4 angularjs version is using 1.3.10 version. We try to replace it with 1.4.0 version. But we found that when we try to change view, it get double views problem. The new view is fade up while the old view is still visible and fade out 2 – 3 seconds later.

is there any fixed ? or have you noticed this behaviour before ?

Hi :),

Thanks for your feedback on this. We haven’t tested it with AngularJS v1.4.0. I suppose there are some changes in the latest AngularJS which will might require a full reintegrating. We will consider updating to v1.4.0 in the next update which we are planning to release very soon.

Thanks.

Hi,

Why the frontend templates were removed? I buy this template because them.

Thank you Paulo Henrique

Hi :),

Metronic used to include the frontend and email templates as a free bonus items which made Metronic a bundle theme. Envato has decided to move all bonus themes to appropriative categories and a free bonus theme will no longer be free for new users. Now Metronic is no longer a bundle theme and but it still will be a complete admin theme and will continue growing with new admin designs and components.

However we decided to release the frontend themes as freebies in our website: keenthemes.com

If you need the latest version of the frontend themes you can email our support at support@keenthemes.com and provide your license key and we will provide you v4.0 with latest frontend themes.

We hope for your understanding and support on this major change.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Thank you for your reply. I will get the freebies.

You we welcome :)

a quick question: what is the easiest way to re-organize the folders, for example I would like to move “assets” and “sass” to become sub folder of one admin template (let’s say under “admin3”).

Will it work by simply changing the <link href url on the html files? thanks

Hi :),

Yes, you just need to change the paths in the HTML level and also need to configure the paths in metronic.js and layout.js where applicable. Also you might need to change the URL of images in the content. If you need any further clarifications please let us know.

Thanks.

Hi,

Any ideas on when the next version will be out, I’m starting a new project soon and I’m wondering if it’s worth waiting for the next version. Or do you had a beta version of the new version?

Hi :),

Thanks for getting back to us. We are not working extremally on the next update and we will try to launch it within a month or plus. Normally we do distribute only stable releases through themeforest so you will be able to get it only when its officially released.

If you need any further clarifications please let us know.

Thanks.

I am using admin 7 material. How can I make a sticky footer that has a fixed height ? At the moment, if content is short, footer will expand to fill the rest of the page.

Hi :),

To have this working please replace layout.js of admin 7 theme with following code:

/**
Core script to handle the entire theme and core functions
**/
var Layout = function() {

    var layoutImgPath = 'admin/layout7/img/';

    var layoutCssPath = 'admin/layout7/css/';

    var resBreakpointMd = Metronic.getResponsiveBreakpoint('md'); //992px
    var resBreakpointSm = Metronic.getResponsiveBreakpoint('sm'); //768px

    // handle go to top button
    var handleGo2Top = function () {       
        var Go2TopOperation = function(){
            var CurrentWindowPosition = $(window).scrollTop();// current vertical position
            if (CurrentWindowPosition > 100) {
                $(".go2top").show();
            } else {
                $(".go2top").hide();
            }
        };

        Go2TopOperation();// call headerFix() when the page was loaded
        if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
            $(window).bind("touchend touchcancel touchleave", function(e){
                Go2TopOperation();
            });
        } else {
            $(window).scroll(function() {
                Go2TopOperation();
            });
        }

        $(".go2top").click(function(e) {
            e.preventDefault();
            $("html, body").animate({ scrollTop: 0 }, 600);
        });
    };

    var handleMenu = function () {    
        var overlay = $('.menu-bg-overlay');
        var close = $('.menu-close');
        var trigger = $('.menu-trigger');
        var modal = $('.menu-overlay');

        trigger.click(function() {
            var removeModal = function() {
                modal.removeClass('menu-overlay-show');
            }

            modal.addClass('menu-overlay-show');
            overlay.off('click', removeModal);
            overlay.on('click', removeModal);
        });

        close.click(function(e) {
            e.stopPropagation();
            modal.removeClass('menu-overlay-show');
        });
    };

    var handleContentHeight = function() {
        var height = Metronic.getViewPort().height - $('.page-footer').outerHeight(true);
        $('.page-container').css('min-height', height);
    }

    return {

        // Main init methods to initialize the layout
        // IMPORTANT!!!: Do not modify the core handlers call order.

        init: function () { 
            handleGo2Top(); // handle go to top
            handleMenu(); // handle menu
            handleContentHeight() // handle content height
        },

        getLayoutImgPath: function() {
            return Metronic.getAssetsPath() + layoutImgPath;
        },

        getLayoutCssPath: function() {
            return Metronic.getAssetsPath() + layoutCssPath;
        }
    };

}();

If you need any further clarifications please let us know.

Thanks.

Thanks, it works so far

Great! :) Good luck with your project!

Please give me a documentation or tutorials to work with Multiple File Upload with php . Thanks

Hi :),

You can refer to the plugin’s official documentation here: https://blueimp.github.io/jQuery-File-Upload/

Thanks.

did you post any of your code on bootsnipp.com?

http://bootsnipp.com/snippets/featured/user-profile-sidebar this is from this template and there is some more from a user by keenthemes.

it states: Powered by KeenThemes at the bottom linking to this theme. i am not sure if its actually you or not but i figured i would mentioned it tho.

Hi :),

Yes, those snippets are posted by us with a link to our premium theme Metronic. If you need any further clarifications please let us know.

Thanks.

oh ok thanks for letting me know i did wrote about it on the snippet cause i have busted someone actually coping a script from a premium theme but can’t pinpoint the theme on here. i know its a admin template tho.

p.s.: are we allowed to use it tho without any limits (the snippets posted)?

Hi :),

Sure, you can use it without any limit.

Thanks.

Hello, I bought this beautiful your template, but to date have failed to fully utilize its functions in particular I am referring to Ajax Datatable, Place my code below It does not work in the form of research, and column sorting can help me (I think this is true for help many others who have bought this beautiful template?) Thank you!! P.S. I tried to reconstruct this code from the comments published in ThemeForest

page datatable.html

<div class="row">
<div class="col-md-12">
<div class="note note-danger">
<p>
NOTE: The below datatable is not connected to a real database so the filter and sorting is just simulated for demo purposes only.
</p>
</div>
<!-- Begin: life time stats -->
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-shopping-cart" />Order Listing
</div>
<div class="actions">
<a href="javascript:;" class="btn default yellow-stripe">
<i class="fa fa-plus" />
<span class="hidden-480">
New Order </span>
</a>
<div class="btn-group">
<a class="btn default yellow-stripe" href="javascript:;" data-toggle="dropdown">
<i class="fa fa-share" />
<span class="hidden-480">
Tools </span>
<i class="fa fa-angle-down" />
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;">
Export to Excel </a>
</li>
<li>
<a href="javascript:;">
Export to CSV </a>
</li>
<li>
<a href="javascript:;">
Export to XML </a>
</li>
<li class="divider">
</li>
<li>
<a href="javascript:;">
Print Invoices </a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div class="table-container">
<div class="table-actions-wrapper">
<span>
</span>
<select class="table-group-action-input form-control input-inline input-small input-sm">
<option value="">Select...</option>
<option value="Cancel">Cancel</option>
<option value="Cancel">Hold</option>
<option value="Cancel">On Hold</option>
<option value="Close">Close</option>
</select>
<button class="btn btn-sm yellow table-group-action-submit"><i class="fa fa-check" /> Submit</button>
</div>
<table class="table table-striped table-bordered table-hover" id="datatable_ajax">
<thead>
<tr role="row" class="heading">
<th width="2%">
title a
</th>
<th width="5%">
Record # A
</th>
<th width="15%">
Date
</th>
<th width="15%">
Customer
</th>
<th width="10%">
Ship To
</th>
<th width="10%">
Price
</th>
<th width="10%">
Amount
</th>
<th width="10%">
Status
</th>
<th width="10%">
Actions
</th>
</tr>
<tr role="row" class="filter">
<td><input type="text" class="form-control form-filter input-sm" name="filter_input_1" id="filter_input_1">
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="filter_input_2" id="filter_input_2">
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="param1">
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="order_customer_name">
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="order_ship_to">
</td>
<td>
<div class="margin-bottom-5">
<input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From"/>
</div>
<input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To"/>
</td>
<td>
<div class="margin-bottom-5">
<input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From"/>
</div>
<input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To"/>
</td>
<td>
<select name="order_status" class="form-control form-filter input-sm">
<option value="">Select...</option>
<option value="pending">Pending</option>
<option value="closed">Closed</option>
<option value="hold">On Hold</option>
<option value="fraud">Fraud</option>
</select>
</td>
<td>
<div class="margin-bottom-5">
<button class="btn btn-sm yellow filter-submit margin-bottom" id="filter_submit_btn" name="filter_submit_btn"><i class="fa fa-search" /> Search</button>
</div>
<button class="btn btn-sm red filter-cancel"><i class="fa fa-times" /> Reset</button>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- End: life time stats -->
</div>
</div>

page script.js

var TableAjax = function () {

var initPickers = function () {
//init date pickers
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true
});
}

var handleRecords = function () {

var grid = new Datatable();

// var grid = new Datatable();

grid.init({
src: $("#datatable_ajax"),
onSuccess: function (grid) {
// execute some code after table records loaded
},
onError: function (grid) {
// execute some code on network or other general error  
},
dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"] // change per page values here
],
"pageLength": 20, // default record count per page
"ajax": {
"url": "demo/ajax_dt.php", // ajax source
},
"order": [
[1, "asc"]
] // set first column as a default sort by asc
}
});

$('#filter_submit_btn').click(function(){
grid.addAjaxParam("param1",  $('#filter_input_1').val());
grid.addAjaxParam("param2",  $('#filter_input_2').val());

grid.setAjaxParam("param3",  $('#filter_input_3').val());
grid.setAjaxParam("param3",  $('#filter_input_4').val()); // resets a new value
grid.getDataTable().fnDraw(); //reload the datatable;
});

}

return {

//main function to initiate the module
init: function () {

initPickers();
handleRecords();
}

};

}();

page script php datatable server side

<?php
/* 
* Paging
*/

$iTotalRecords = 178;
$iDisplayLength = intval($_REQUEST['length']);
$iDisplayLength = $iDisplayLength < 0 ? $iTotalRecords : $iDisplayLength; 
$iDisplayStart = intval($_REQUEST['start']);
$sEcho = intval($_REQUEST['draw']);

$records = array();
$records["data"] = array(); 

$end = $iDisplayStart + $iDisplayLength;
$end = $end > $iTotalRecords ? $iTotalRecords : $end;

$status_list = array(
array("success" => "Pending"),
array("info" => "Closed"),
array("danger" => "On Hold"),
array("warning" => "Fraud")
);

for($i = $iDisplayStart; $i < $end; $i++) {
$status = $status_list[rand(0, 2)];
$id = ($i + 1);
$records["data"][] = array(
$id+7,
$id,
'12/09/2013',
'Jhon Doe',
'Jhon Doe',
'450.60$',
rand(1, 10),
'<span class="label label-sm label-'.(key($status)).'">'.(current($status)).'</span>',
'<a href="javascript:;" class="btn btn-xs default"><i class="fa fa-search" /> View</a>',
);
}

if (isset($_REQUEST["customActionType"]) && $_REQUEST["customActionType"] == "group_action") {
$records["customActionStatus"] = "OK"; // pass custom message(useful for getting status of group actions)
$records["customActionMessage"] = "Group action successfully has been completed. Well done!"; // pass custom message(useful for getting status of group actions)
}

$records["draw"] = $sEcho;
$records["recordsTotal"] = $iTotalRecords;
$records["recordsFiltered"] = $iTotalRecords;

echo json_encode($records);
?>

Hi :),

Thanks for contacting our support.

Please note in the demo we used a dummy data to demonstrate how the actual datatable works with server side data. When you sort or search it just sends the parameters to the server side demo script and gets the same data. For actual product you will need to change the server side script according to your project requirements.

Thanks.

by
by
by
by
by
by