Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Cart 119,801 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

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

12205 comments found.

Hi,

Icons are not showing in Windows Phone 8 For example: class=’icon-home’

I will check with IPAD & iphone soon.

It is a Lumia 920 phone. The testing is runing on server(not localhost) and have no problem with desktop browsers.

I am not sure where to check.

Images are showing OK.

Thanks in advance, Mehmet

Hi,

You can enable the toggle mode by click for the Notification/Message dropdowns. All you need is to remove following attributes from the toggle link:

data-hover="dropdown" 
data-close-others="true" 
And just use
data-toggle="dropdown" 

Please let me know if you need any further assistance on this.

Thanks.

Hi,

1. Thanks for the dropdown hint. It is working now.

2. About the font issue. No matter if it is bootstrap font or font-awesome no matter what version is; I ended up it is a problem with IIS 7+ Server and MIME type definitions of fonts. For now it is resolved by using external link to css. For internal use; MIME type needs to be defined in IIS I thnik. Just giving this information if someone else have similiar problem. I am using latest font-awesome(version 4); just need to change class definitions when I use these icons and no problem at all for me.

3. If I am not wrong you have a forum. If this is the case; I would kindly suggest you to encourage customers to use your forum for technical issues. By this way; you spent much more less time; and customers can troubleshoot by themselves.

I see that you have been very helpful for your all customers and for me as well. I appreciate your work, support and your great theme.

Thanks, Mehmet

Hi :),

You are most welcome and thanks for the update. We will take a look at fontawesome 4 and probable we will upgrade it in the next update.

Yeah, we should encourage our customers to use our support center – http://keenthemes.ticksy.com/.

Thanks.

Hi

How set page-boxed style default? I’m change to

<body class=”page-boxed page-header-fixed”>

but not effect. Thanks

Hi :),

To learn how to use the boxed layout please refer layout_boxed_page.html template page. So for the boxed layout you will need to use following page structure:
<body class="page-header-fixed page-boxed">
   <!-- BEGIN HEADER -->   
   <div class="header navbar navbar-inverse navbar-fixed-top">
      <!-- BEGIN TOP NAVIGATION BAR -->
      <div class="header-inner container">
      <!-- HEADER CONTENT..... -->
      </div>
      <!-- END TOP NAVIGATION BAR -->
   </div>
   <!-- END HEADER -->
   <div class="clearfix"></div>
   <div class="container">
      <!-- BEGIN CONTAINER -->  
      <div class="page-container">
      <!-- PAGE CONTENT..... -->        
      </div>
      <!-- END CONTAINER -->
   </div>   
   <!-- BEGIN FOOTER -->
   <div class="footer">
      <div class="container">
         <div class="footer-inner">
            2013 © Metronic by keenthemes.
         </div>
         <div class="footer-tools">
            <span class="go-top">
            <i class="icon-angle-up"></i>
            </span>
         </div>
      </div>
   </div>
</body>

Please let me know if you need any further assistance.

Thanks.

OK, i got it! i miss .container class. Thanks for your help.

P.S. Thanks for your design, your theme save my life!

You are most welcome :) Glad to hear that our theme is being helpful for you. Good luck with your project!

Hi im really interested in purchasing this admin but want to make sure that it will work as a extension to my theme I already have correct?

Hi :),

Using Metronic with another theme is a specific task and it depends you on technical requirements. However you can use Metronic with other themes with required customization and integration.

Please let me know if you need any further clarification.

Thanks.

Hi, i’m trying to put ajax form post for example for password forget. I’m not sure the right way to do it.

I’ve read the instruction at: http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

but it’s not working. I’ve inserted the code inside assets/scripts/login.js

please can you help me with a code to put inside the file?

sorry for my bad english, i’m italian :)

Hi :),

Please go to assets/scripts/login.js and replace the login.js code with following code:

var Login = function () {

    var handleLogin = function() {

        // ajax login function to be called right after the form validation success
        var ajaxLogin = function(form) {
            form = $(form);
            $.ajax({
                type: "POST",
                url: "index.html",
                data: form.serialize(),
                dataType: "json",
                beforeSend:function(){
                    $('.alert-error,.alert-success').hide();
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                    $('.alert-error').show();
                    $('.alert-error span').html(errorThrown);
                },
                success: function(data){
                    alert('Success!!!');
                    $('.alert-success').show();
                    $('.alert-success span').html(data);
                }
            });
        }

        $('.login-form').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    remember: {
                        required: false
                    }
                },

                messages: {
                    username: {
                        required: "Username is required1." 
                    },
                    password: {
                        required: "Password is required2." 
                    }
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   
                    $('.alert-error', $('.login-form')).show();
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    error.insertAfter(element.closest('.input-icon'));
                },

                submitHandler: function (form) {
                    ajaxLogin(form); // form validation success, call ajax form submit
                }
            });

            $('.login-form input').keypress(function (e) {
                if (e.which == 13) {
                    if ($('.login-form').validate().form()) {
                        ajaxLogin($('.login-form')); //form validation success, call ajax form submit
                    }
                    return false;
                }
            });
    }

    var handleForgetPassword = function () {
        $('.forget-form').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                },

                messages: {
                    email: {
                        required: "Email is required." 
                    }
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   

                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    error.insertAfter(element.closest('.input-icon'));
                },

                submitHandler: function (form) {
                    form.submit();
                }
            });

            $('.forget-form input').keypress(function (e) {
                if (e.which == 13) {
                    if ($('.forget-form').validate().form()) {
                        $('.forget-form').submit();
                    }
                    return false;
                }
            });

            jQuery('#forget-password').click(function () {
                jQuery('.login-form').hide();
                jQuery('.forget-form').show();
            });

            jQuery('#back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.forget-form').hide();
            });

    }

    var handleRegister = function () {

        function format(state) {
            if (!state.id) return state.text; // optgroup
            return "<img class="flag" src="assets/img/flags/" + state.id.toLowerCase() + ".png" />  " + state.text;
        }

        $("#select2_sample4").select2({
              placeholder: '<i class="icon-map-marker" /> Select a Country',
            allowClear: true,
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {
                return m;
            }
        });

            $('#select2_sample4').change(function () {
                $('.register-form').validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
            });

         $('.register-form').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {

                    fullname: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    address: {
                        required: true
                    },
                    city: {
                        required: true
                    },
                    country: {
                        required: true
                    },

                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    rpassword: {
                        equalTo: "#register_password" 
                    },

                    tnc: {
                        required: true
                    }
                },

                messages: { // custom messages for radio buttons and checkboxes
                    tnc: {
                        required: "Please accept TNC first." 
                    }
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   

                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    if (element.attr("name") == "tnc") { // insert checkbox errors after the container                  
                        error.insertAfter($('#register_tnc_error'));
                    } else if (element.closest('.input-icon').size() === 1) {
                        error.insertAfter(element.closest('.input-icon'));
                    } else {
                        error.insertAfter(element);
                    }
                },

                submitHandler: function (form) {
                    form.submit();
                }
            });

            $('.register-form input').keypress(function (e) {
                if (e.which == 13) {
                    if ($('.register-form').validate().form()) {
                        $('.register-form').submit();
                    }
                    return false;
                }
            });

            jQuery('#register-btn').click(function () {
                jQuery('.login-form').hide();
                jQuery('.register-form').show();
            });

            jQuery('#register-back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.register-form').hide();
            });
    }

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

            handleLogin();
            handleForgetPassword();
            handleRegister();        

        }

    };

}();

I have integrate the code from http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/. I put some comments on the modified code.

Also in login.html please change the “hide” class to “display-hide” class for the alert element.

If you need any further assistance, please email our support at support@keenthemes.com. Please provide a link to your page so we will be able to check your code and advise you further.

Thanks.

Hello, I really like that you integrated x-editable into this theme, and I use it a lot. However, please note that x-editable is now officially supporting Bootstrap3 in version 1.5. Could you upgrade to this version? It would be very useful, because bootstrap3 (therefore x-editable) finally supports dynamic positioning of pop-ups, so that it’s clever enough not to go over the edge of a window.

I tried it myself, but the style gets all wrong.

Thanks!

Hi :),

Actually we were waiting for the full release. In the current release the inline mode does not support all available widgets. Please see: http://vitalets.github.io/x-editable/demo-bs3.html?c=inline

So we are planning to update the plugin once it fully supports Bootstrap 3.0.

Thanks.

Thanks for your answer. Ok it makes sense.

Since I’m using only pop-overs, perhaps you can help me? Since I’m not a CSS specialist, I’m not sure how to do this properly: In v.1.5, a text input in a pop-up gets a new class: “form-control”, which is defined in bootstrap.css with : height: 34px; padding: 6px 12px; And that makes it too big. What I did is add my own class (with x-editable parameter “inputclass”) and force these styles to: height: 24px; padding: 1px;

Is this the correct way to do it?

Hi :),

Yes, creating your own input class and passing it through inputclass parameter is correct way.

Please let me know if you need any further clarification.

Thanks.

Hi,

Thanks for the theme. It seems like the frontend theme and the pricing tables page still use Bootstrap 2 (I haven’t checked all the pages, but those are the two that I want to use with Bootstrap 3 that are not Bootstrap 3). Is that correct?

Can we expect a version of those pages that use Bootstrap 3 sometime soon?

Thanks!

Hi :),

Thanks for the comment. Please note, since 1.5 version we all the frontend pages use Bootstrap 3.0. You can check it here http://keenthemes.com/preview/metronic_frontend/page_prices.html. You can browse the page source and check the bootstrap version in bootstrap.min.css.

Please let me know if you need any further clarification.

Thanks.

Hi,

Thanks for the quick reply. I should have mentioned in my original comment: I was talking about the admin theme. Pricing page is under “Extra”, and Promo page is under “Layouts”.

Thanks again!

Hi :),

Could you please double check the both pages from our demo site:

http://keenthemes.com/preview/metronic_admin/extra_pricing_table.html http://keenthemes.com/preview/metronic_admin/layout_promo.html

The above pages use Bootstrap 3.0 as you can see it from the source(bootstrap.min.css).

May i know, what version are you referring ? If you are not using the latest version then please login to your ThemeForest account and go to the “Downloads” tab to get the latest version of the Metronic theme.

Please let me know if you need any further assistance.

Thanks.

Hi Guys,

I currently change my Application to use the new 1.52 Version.

I habe noticed that the new Error-Pages are not scrollable.

How can I do it scrollable again?

Hi :),

Quick fix: please go to assets/css/error.css and change from “overflow:hidden” to “overflow-x: hidden for .page-404-full-page and .page-500-full-page classes. We will include this fix in the next update very soon.

Thanks.

Hello – Great theme – I am working on porting my NOC interface that the company uses over to it.

Question – is there stylesheets already made that given the main ‘Content Area’ a ‘Dark’ theme? I’ve got some guys that would like to see one since it is easier on the eyes which I can understand.

Please let me know before I reinvent the wheel by working on my own CSS to retrofit a dark style for the content area.

Thanks!

Hi akkadius :),

Thank for the comment.

At the moment the content are comes with default theme color and there is not dark theme available for the content area. So i would suggest you to proceed with our own css code.

Please let me know if you need any further assistance.

Thanks.

Hi :),

Just in case if you haven’t seen it yet, we are delighted to inform you that Metronic finally has its complete dark mode version. You can check the dark mode preview here https://preview.keenthemes.com/metronic8/demo1/dark/index.html

Regards, Sean

Hi Guys,

I am upgrading from 1.3 to 1.5.2 and I can’t make a portlet with data table inside to look like yours. Following managed tables example, first table (sample_1). In my case, the div with add new button, inside clearfix, has no margin at the bottom, and touches pagination dropdown. The dropdown itself, looks nothing like bootstrap, just a usual dropdown. And the pagination navigation at the bottom doesn’t stay on the same level as the description of ‘Showing 1 to x of y entries’. Possible cause, is that in my case dataTable adds to both those divs class=span6 instead of col-x of bootstrap 3.

Any suggestions are most welcome!

Ok, i solved those issues. Bottom ‘Showing 1 of …’ and pagination navigation, show now on the same level. In your table-manages.js, you say that: “sDom”: ”<’row-fluid’<’span6’l><’span6’f>r>t<’row-fluid’<’span6’i><’span6’p>>”,

Changing it to this:

“sDom”: ”<’row’<’col-xs-6’l><’col-xs-6’f>r>t<’row’<’col-xs-6’i><’col-xs-6’p>>”,

solved this issue.

And putting the ‘Add New’ button inside a div with class=table-toolbar, solved the second issue.

oops, pardon. totally my issue. i was looking at old version file. Sorry, guys. :)

Hi :),

Never mind, it can happen to best of us :). Please let me know if you need any further assistance.

Thanks.

Hi keenthemes,

in Version 1.52 on the Login-page I can’t no longer use:

<a href="#" id="back-btn" class="btn"> <i class="m-icon-swapleft" /> Back </a>

it must be a Button, because otherwise no style is applied.

In Version 1.4 i don’t have any problems.

Hi :),

Please double check the login page from the latest versions(1.5 or newer). Since 1.5 you will need to use below code:

<a href="#" id="back-btn" class="btn default"> <i class="m-icon-swapleft" /> Back </a>

Please let me know if you need any further assistance.

Thanks.

If Metronic is ADMIN + FRONTEND, does that mean that you can BUILD A WEBSITE with an admin and frontend like you have with Wordpress – adding pages, pictures, portfolio’s, etc?

At the risk of sounding dummy … Please explain what you can do with an admin + front-end template and the difference with wordpress

I have bought Simpla Admin template many moons back in time – for the simple and only reason that I wanted to know what an admin template is – but I never discovered what you can do with it! And I am not really a novice. See what I have build, completely coded myself – no dreamweaver http://www.venkatesaya.com/home/index.home.php But an admin template is still greek to me.

Hi :),

Wordpress is an open source blog/website CMS that provides all the features you need to publish and manage your website. Wordpress themes can be installed into the wordpress CMS and provide a different desing to your website that powered by wordpress.

Admin & Frontend themes are just a HTML templates(contains of reusable page templates and UI components) and they need a custom development(PHP, Python, Perl, .NET, etc) in order to use them. So Metronic is an Admin template that can be used to develop from scratch a custom web applications such as custom reporting systems, eCommerce backends, custom CRM and other type of web applications.

Please let me know if you need any further clarification.

Thanks.

Hi keenthemes, i really like this template and gonna purchase it really soon. However, i would like to give a suggestion to add zoom in + zoom out function for the image cropping feature. I’m looking forward to that!

Hi :),

Thanks for the comment and interest in our theme. We will consider your suggestion in a future release. Stay tuned and follow us on http://twitter.com/keenthemes

Thanks.

Hi keenthemes again, I cant edit your theme on dreamweaver CS5. The designed view is scattered(showed in txt). Could you please make your documentation more detailed? Installation and editing seems to be a nightmare for this theme. You claimed the theme is easy to customize but that dosent seems to be the case with comments on here..Please, I will appreciate a refund.

Hi jackport,

To edit this theme i would suggest you editing it manually and do not use any visual editors since visual editors can break the theme by adding extra HTML tags. Currently we are working on enhancing the documentation and in the future we will put more detailed info to improve it.

Please note, Metronic is HTML5 theme and it does not provide the installation tools like wordpress or other CMS themes do. Metronic provides template pages and UI components for you to develop a custom web application from scratch using server side languages such as PHP, .NET, Ruby, Python, etc.

Please let me know if you need any further clarification.

Thanks.

Hi,

Forgive my ignorance.. How can I install this?

Or do you offer any installation support?

Thanks

Hi,

Metronic does not come with instillation tools like wordpress or other CMS themes since Metronic is a HTML5 template that can be used to develop a custom web applications(admin panel, ecommerce backend, custom CMS, CRM, etc) from scratch using server side languages such as PHP, Python, Ruby, .NET and others.

Please let me know if you need any further assistance.

Thanks

Hi keenthemes, I purchased your theme and I seems to be having alot of problem with it. First of all, Could you please explain template_content and template_content_rtl? what is the difference? because I have these two folders in both front end and admin.

Hi jackport,

Please note, the theme comes in 2 versions. Default version(template_content) and RTL version(template_content_rtl). The RTL version of the theme used to support Arabic, Hebrew and Other Right-to-left languages. So in your case you can use template_content folder and template_content_rtl you can just ignore.

Please let me know if you need any further clarification.

Thanks.

Hello,

I am having troubles with fullscreen mode. It does not remain consistent when going to another page.

Please help!

Hi useradmn,

Thanks for your feedback. Please note, if you do fullscreen programmatically it will not be persistent. This is a browser’s javascript API limitation.

Please let me know if you need any further assistance.

Thanks.

So which browser is it compatible with?

Hi,

This feature is supported on Webkit browsers(Chrome, Safari) and Firefox.

Please let me know if you need further clarification.

Thanks.

Hi man, very great work. Nice to hear that you are working on fixing issues and adding new features. However, I’ve already started to use the template in my Codeigniter application. Please do tell me what files I should replace in order to patch my application. I think it is good to know what files you have edited on each release :) because otherwise we will look in details on the codes of many foles till we’ve got the line that has been changed

Thank you in advance

Hi rnandesh :),

Thanks for the comment.

Please check out the theme documentation under admin/documentation/index.html and go to the changelog section to find detailed info for each release changes.

Please let me know if you need any further assistance.

Thanks.

Hi, do you have an example to put forms in modal windows? Checkboxes do not seem to be clickable in modal. Regards Andrea

Hi cwhisperer :),

Thanks for the feedback. Please note the checkboxes and radio buttons should work fine on modals. I assume you are using the latest version(1.5 or newer) so please try to use below sample for checkboxes and radio buttons on modal:

<a href="#modal-form" data-toggle="modal" class="btn default">Modal Samples</a>
<div class="modal fade" id="modal-form"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Form Controls in Modal</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label  class="">Checkboxes</label>
                        <div class="checkbox-list">
                            <label>
                            <input type="checkbox"> Checkbox 1
                            </label>
                            <label>
                            <input type="checkbox"> Checkbox 2
                            </label>
                            <label>
                            <input type="checkbox" disabled> Disabled
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="">Inline Checkboxes</label>
                        <div class="checkbox-list">
                            <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1
                            </label>
                            <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2
                            </label>
                            <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled
                            </label>  
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="">Radio</label>
                        <div class="radio-list">
                            <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
                            Option 1
                            </label>
                            <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" > Option 2
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="">Inline Radio</label>
                        <div class="radio-list">
                            <label class="radio-inline">
                            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked> Option 1
                            </label>
                            <label class="radio-inline">
                            <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2" > Option 2
                            </label>
                            <label class="radio-inline">
                            <input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled> Disabled
                            </label>  
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn blue">Save changes</button>
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

The styled checkboxes and radio buttons are customized using jquery uniform plugin so please make sure that you don’t have any JS error on your page which can break the checkbox and radio buttons functionality.

Please let me know if you need any further assistance.

Thanks.

Thank you for the reply: I did it exactly this way, but it didn’t solve the problem. The solution is that you have to call the uniform() method on the checkbox field once the modal window loaded with the ajax call, like this: var $modal = $('#ajax-modal'); $('.ajax').on('click', function(){ event.preventDefault(); // link is not executed var url = $(this).attr('href'); // url to load setTimeout(function(){ $modal.load(url, '', function(){ $modal.modal(); $('input[type=checkbox]').uniform(); }); }, 200); });

Hi :),

That’s correct. Glad you managed to resolve it. Good luck with project :).

Thanks.

Hi keenthemes :)

Thanks for the great update!

Do you think you could consider in future, a form validation with tooltip-based validation style?

Thanks!

Hi sherlock85 :),

Yes, in the next version(1.5.3) we will add some samples for a form validation with tooltips-based validation style. Stay tuned and follow us on http://twitter.com/keenthemes

Thanks.

Hi,

When extracting zip file it gives me the following message:

Cannot create metronic_1.5.2\frontend\template_content_rtl\assets\plugins\revolution_slider\rs-plugin\css\settings (In Konflikt stehende Kopie von Flash Horvath 2013-02-13).css

Everything else unpacks well.. will this cause something to not work? And if so, how can i fix this?

Kind regards, Arjan

Hi webscore,

We have double checked this purchase zip file and it unpacks fine without any error. Could you please re-download and retry to unpack the package. Please try to use WinRAR or 7ZIP to unpack the zip file.

Please let me know if you need any further assistance.

Thanks.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey