How to integrate Metronic theme as admin dashboard in Laravel?

Metronic is most selling admin theme from all available admin themes. You can divide Metronic theme as below to make this work in parts.

Step 1 : Make layout folder under “/resources/views/” which will hold all layout for site

Step 2 : Create admin folder inside layout folder to not mess admin layout with your other layouts.

Now, you will have /resources/views/admin/

Step 3 : Create master.blade.php in it.

<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.6
Version: 4.5.6
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
     @include('layouts.admin.includes.meta')

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
     
        @include('layouts.admin.includes.header')
        
        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"> </div>
        <!-- END HEADER & CONTENT DIVIDER -->
        <!-- BEGIN CONTAINER -->
        @include('layouts.admin.includes.content')
        <!-- END CONTAINER -->
        <!-- BEGIN FOOTER -->
        @include('layouts.admin.includes.footer')
        <!-- END FOOTER -->
        <!--[if lt IE 9]>
<script src="../tf/assets/global/plugins/respond.min.js"></script>
<script src="../tf/assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
        <!-- BEGIN CORE PLUGINS -->
        <script src="../tf/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <script src="../tf/assets/global/plugins/moment.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/horizontal-timeline/horozontal-timeline.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
        <script src="../tf/assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
        <!-- END PAGE LEVEL PLUGINS -->
        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="../tf/assets/global/scripts/app.min.js" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->
        <!-- BEGIN PAGE LEVEL SCRIPTS -->
        <script src="../tf/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>
        <!-- END PAGE LEVEL SCRIPTS -->
        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="../tf/assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
        <script src="../tf/assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
        <script src="../tf/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->
    </body>

</html>

Step 4 : Create include folder under admin folder to keep all admin related sub layout in it.

Step 5 : Create content.blade.php, footer.blade.php, header.blade.php, meta.blade.php, sidebar.blade.php with their part details.

 

Chetan Patel

Chetan Patel is blogger, writes on Tech News, current trends, Gadgets Reviews, Website owner guide and Tips. You can connect him at Google+ & Facebook.