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,698 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

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

12202 comments found.

Hi, is this pakage with fully functionally Login Script in PHP with standard MySQL DataBase?

Or only frontend HTML Files?

Thanks a lot for answer, Marco

Hi,

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). Usually, any web applications/systems contain of 2 layers:

1) Design and Frontend UI (HTML, CSS, javascript)

2) The actual system is implemented using a server-side language such as PHP or Java, and database engines such as MySQL or Oracle.

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

Also, we have a fully functional PHP Laravel of Metronic that comes with full database integration and ready for use pages and modules:

https://preview.keenthemes.com/metronic8/laravel/login https://preview.keenthemes.com/metronic8/laravel/login?demo=demo2

Regards, PixelDots

Hello Keenthemes,

Metronic 8 has issue with breadcumbs. Desktop and mobile breadcrumbs are visible at the same time. (On clear Metronic 8 Vue)

https://i.postimg.cc/yYfpJBRk/Screenshot-2021-07-23-at-20-46-35.png

Hi,

1) Theme version in preview should be the same as the version in the zip, but if you have an outdated version then can you please send your Github username we will grant you access to the repo with the latest Metronic version.

2) Please verify that you have in demo1/src/assets/sass/layout/_main.scss this class:

.container .page-title[data-kt-swapper='true'] {
    display: none !important;
}

Regards,
Lauris

Thanks for reply! :)

I found the issue and it’s appear on Metronic 8 preview webiste and Metronic from github too.

So, on layout builder page, inside “Content” tab, change width from “fixed” to “fluid”. Once saved, go to another page (For example profile overview). Now you can see breadcrumbs twice.

Hi,

Thank you for your feedback.

We already reproduced this bug and fixed it in today’s Metronic release. You can download the latest version from our Github repo.

Regards,
Lauris

Hi keenthemes;

How to use badges with buttons like that : https://ibb.co/SdFC75N

I made that button work because it is in the top end, so I put absolute position for the top end, and it feels very hacky … :(

I also want it to put it for symbol , like in the top of an symbol tag

But unfortunatly :( I did not find a way to put it for any button in any position on the page.

Like relative to the button whatever the position is.

Do you have a snippet for that or code ? thank you.

Hi :),

Please refer to this bootstrap way:

<button class="btn btn-primary position-relative me-5">
    Button <span class="position-absolute top-0 start-0 translate-middle  badge badge-circle badge-danger">5</span>
</button>

<button class="btn btn-success position-relative me-5">
    Button <span class="position-absolute top-100 start-0 translate-middle  badge badge-circle badge-warning">5</span>
</button>

<button class="btn btn-danger position-relative me-5">
    Button <span class="position-absolute top-0 start-100 translate-middle  badge badge-circle badge-primary">5</span>
</button>

<button class="btn btn-warning position-relative">
    Button <span class="position-absolute top-100 start-100 translate-middle  badge badge-circle badge-success">5</span>
</button>

All the best!

Regards, Sean

Thank you sean, that really helped us.

thank you

Always glad to you help you out. All the best with your projects :)

Why can’t we round our buttons in demo 5 HTML? none of the bootstrap classes are working and https://preview.keenthemes.com/metronic8/demo5/documentation/base/buttons.html doesn’t show any information

Hi :),

Thanks for your interest in Metronic.

Demo 5 uses square corner style for all components by resetting border radius to 0.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

this template can use at codeigniter, this template get file extension .html and css ?

Hi :),

Thanks for your interest in Metronic.

Yes, absolutely. You can use Metronic with any server-side language and framework. Please check https://www.youtube.com/watch?v=ptgwzvvAHy4&ab_channel=KeenThemes to see how Metronic can be utilized in server-side. Please note that this video is made for Metronic 7 but the steps and instructions can be applied for Metronic 8 as well.

Also, we have a fully functional Laravel version and you may refer to it to build your Codeigniter implementation: https://keenthemes.com/metronic

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hello! I can see there is a filterMenuPermissions function on M8.0.19 under App\Adapters\Menu.php, how to use the permission in the menu ? I cannot find any docs regarding this or how to set permissions to the menu items, can you please clarify? thank you

Metronic 8 Laravel (8.0.19)

Nevermind, found out how to use it, thank you, anyways you guys should include it in the docs, great job!

Hi,

Glad it worked. Feel free to let us know if you need more help.

Thanks

I see that there are more features in metronic 7 than metronic 8 (more form input groups , maps , tree view, cropping etc. ) why is that? and are this features also coming to metronic 8 soon? for now one should use metronic 7 or 8 ?

Hi :),

Metronic v8 with Bootstrap 5 is a new version and we are providing more features in weekly updates: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/changelog.html

In the next update we will add cropper, tree view, jkanban, etc

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Does the demo for this come with all files as per the demo shown here. I have installed bot v7 and V8 but all most pages come a 404 not found error and it seems like all the files are not in there.

Hi :),

Thanks for your interest in Metronic.

Yes, in your download package you will get full source code with all templates from https://keenthemes.com/metronic

May I now the exact versions of v7 and v8 and could you please contact our support via support@keenthemes.com and provide further details ?

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

I just downloaded v8 and using the Laravel one but I dont have the full demo files.

Hi :),

Please note that Laravel version is fully working application that uses Metronic theme. By default does not include the HTML versions examples and demos. According to your requirements you can use any features from the HTML version by coping the HTML/JS code into the Laravel version.

if you need any further clarifications please let us know.

Regards, Sean

Hello. I have updated from version 7.1x to the current version in angular demo and I see that the permissions module is no longer there. Is there a new way to set and configure permissions for pages and screens?

Stam88 Author Team

Hi pbourlot1,

We removed it from v7.1x, but you can email support@keenthemes.com, and support will give you access to our GitHub, where you are able to check the earlier versions with the permissions module.

Regards, Keenthemes support

Hi. Could you please tell me when exactly the angular version will be released ? I have been waiting for angular for so long now and was expecting at least initial release this month. It would be a great help if you could tell me when the initial angular release will be. Thank you.

Stam88 Author Team

Hi Nagender1717,

Please note that releasing production-ready Angular solutions will depend on a number of important 3rd-party plugins reediness. This upcoming release has major changes due to Bootstrap5, 3d party libraries updates took more than we expected since we had to wait for certain 3rd-party plugins compatibility with the new version of Angular and Bootstrap 5. Also when only give an estimated release date and sometimes the actual release date can be dragged by the circumstances that are out of our full control. Nevertheless, we always do our utmost best to release the updates as earlier as possible but for us, the product stability and integrity with all used 3rd-party libraries is a priority.

We are now very close to the Angular release and after some deep testing and verifications, we will go live. The current ETA now is middle of August.

Regards, Keenthemes support

Hi, Is there a command or other way to compile only the used css and js files for a metronic theme deployed with only a few pages?

Hi,

We do not have this command. Currently, it will build all. Are you using gulp build? You can remove unused assets from tools/gulp.config.js file. Then the build process will exclude it from the built assets.

Thanks

Dear Support

I hope this finds you well , menu open in the Wrong direction when I use right to left , it suppose to float to left Not to right , is there solution !!!

<html lang=”ar” direction=”rtl” dir=”rtl” style=”direction: rtl”> <!-begin::Head-> <head> <script src=”/CoreTemplate/Content/angular/angular.min.js”></script> <base href=””> <meta charset=”utf-8” /> <title>PAGE_TITLE PAGE_TITLE</title> <meta name=”description” content=”” /> <meta name=”keywords” content=”” /> <link rel=”canonical” href=”Https://preview.keenthemes.com/metronic8” /> <meta name=”viewport” content=”width=device-width, initial-scale=1” />

<!-begin::Fav Icon ->
<link rel="apple-touch-icon" sizes="57x57" href="/CoreTemplate/Content/fav_icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/CoreTemplate/Content/fav_icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/CoreTemplate/Content/fav_icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/CoreTemplate/Content/fav_icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/CoreTemplate/Content/fav_icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/CoreTemplate/Content/fav_icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/CoreTemplate/Content/fav_icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/CoreTemplate/Content/fav_icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/CoreTemplate/Content/fav_icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/CoreTemplate/Content/fav_icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/CoreTemplate/Content/fav_icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/CoreTemplate/Content/fav_icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/CoreTemplate/Content/fav_icon/favicon-16x16.png">
<link rel="manifest" href="/CoreTemplate/Content/fav_icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="~/Content/fav_icon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-end::Fav Icon ->
<!-begin::Global Stylesheets Bundle(used by all pages)->
<link href="/CoreTemplate/Content/assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
<link href="/CoreTemplate/Content/assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
<!-end::Global Stylesheets Bundle->

Hi :),

Thanks for your interest in Metronic.

To fully adapt Metronic for RTL you will need to perform a little change for the menu opening directions just by flipping the direction

data-kt-menu-placement="left-start" 

to

data-kt-menu-placement="right-start" 

And wise versa. If you need any further clarifications please contact our support via support@keenthemes.com

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hello! where I can find information on all the functions that I must restart for the template to work 100%, in previous comments you indicated that I must start for example KTApp.init (); KTPasswordMeter.createInstances (‘[data-kt-password-meter = “true”]’) among other. Where can I find all the ones I need to start?

Hi :),

You can check the in-house plugin’s documentation here https://preview.keenthemes.com/metronic8/demo1/documentation/general/drawer.html https://preview.keenthemes.com/metronic8/demo1/documentation/general/scroll.html https://preview.keenthemes.com/metronic8/demo1/documentation/general/sticky.html

You can check it further according to use the usage of the global components. There are also plenty of other 3rd-party plugins that you might need to reinit.

Regards, Sean

Will all of the features/apps of the Metronic v8 HTML version be included with the Laravel version?

Hi :),

Thanks for your interest in Metronic.

Since the Laravel version comes as a fully functional application selected features will be integrated as complete modules or pages. This requires more time and afford as it involves full server side coding with database access.

If you need any further clarifications please do let us know.

Regards, Sean

Yes, please clarify…are you saying that the modules/pages/apps wont be included because it involves more time and effort?

The HTML version is huge and replication for every version(Laravel, Vue, React, Angular), requires a tremendous amount of time and effort. However, we include the features according to user requests and demands. As you see our Laravel versions is getting more complete with each update and we will add more features that can be useful for most of the users.

Hi keenthemes,

Failed to compile demo6 here the output :

E:\Metronic8\metronic-8.0.18\tools>npm run build --demo6 > metronic@8.0.18 build > webpack [webpack-cli] Failed to load 'E:\Metronic8\metronic-8.0.18\tools\webpack.config.js' config [webpack-cli] ReferenceError: require is not defined at file:///E:/Metronic8/metronic-8.0.18/tools/webpack.config.js:1:17 at ModuleJob.run (internal/modules/esm/module_job.js:152:23) at async Loader.import (internal/modules/esm/loader.js:177:24) at async WebpackCLI.tryRequireThenImport (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:57:26) at async loadConfig (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:1536:27) at async WebpackCLI.resolveConfig (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:1639:38) at async WebpackCLI.createCompiler (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:2045:22) at async WebpackCLI.buildCommand (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:2173:20) at async Command.<anonymous> (E:\Metronic8\metronic-8.0.18\tools\node_modules\webpack-cli\lib\webpack-cli.js:850:25) at async Promise.all (index 1) E:\Metronic8\metronic-8.0.18\tools>

any thoughts guys !!?

thank you.

Hi :),

Can you please fully refer to webpack documentation page: https://preview.keenthemes.com/metronic8/demo6/documentation/getting-started/build/webpack.html and it should work as expected.

Regards, Sean

Indeed I followed the webpack Doc, but after “nom build …” the os said that didn’t found webpack, and I installed like this :

npm install -g webpack

and after that installing webpack the error came.

any thoughts ?

Hi,

In the doc step number 7, you have to modify tools/package.json and remove “type”: “module” for webpack build to work. The default settings are for gulp.

Thanks

Hi, I send request for github repository access yesterday. But didn’t find any repository yet. username: Evincible-Solutions

Hi :),

Thanks for your interest in Metronic.

We could not locate any username by “Evincible-Solutions” in Github. Could you please provide a valid github username and we will grant you access.

Regards, Sean

Hi, as to the question of hendrikwyi regarding webpack minification, I have had similar issue and resolved by modifying function getParameters() in webpack.config.js: function getParameters() { var possibleArgs = [ 'js', 'css', 'scss', 'alldemos', 'rtl', 'prod', 'production', 'localhost', 'dark_skin', ]; for (var i = 0; i <= 13; i++) { possibleArgs.push('demo' + i); } var args = []; possibleArgs.forEach(function (key) { if (process.env['npm_config_' + key]) { args.push(key); } }); if ('production' === process.env['NODE_ENV']) { args.push('production'); } return args; }

the three lines before ‘return args;’ were added. disclaimer: i am not part of author team, nor a webpack expert , so use at own risk :grin:

Thanks for sharing this and I hope it will be helpful for @hendrikwjy

it’s inlucde all demo and all language, all ver 7 8. tks!

Hi :),

Yes, in your purchased package you will get all demos, versions including v7 and v8

If you need any further clarifications please let us know.

Regards, Sean

Hello! Will you guys have for the next update on Metronic8 Laravel version permissions for the menu ? like in the config/demo1/menu.php (‘can’ => ‘users.create’) so if the user doesn’t have that permission the item is hidden? and was wondering how can I replace font awesome free version with my font aswesome pro version ? thank you

Hi :),

Thanks you for feedback on this. We will check it further and consider this in a future update. Can you check the webpack mix config and see how current free version is bundled and you just need to replace the necessary files in webpack mix and recompile it.

Regards, Sean

Thank you!

Dear Sir,

I am trying to integrate your Theme with my application and I am facing the following issues
I am using metronic 7 theme

1. issue #1 : every time I access jquary selector such as $(‘.content’) a call to the following file is fired webpack:///./src/js/base/renderer.js . 1.1 what is this file? 1.2 why it is used? 1.3 how to disable it? 1.4 why webpack is included in my production code?

2. every time I debug an error in my code, I reach line 105824 of assets/plugins/global/plugins.bundle.js. it is catching the error 2.1 what is this library? 2.2 how to disable it?

Thank you in advance

Hi,

plugins.bundle.js is a bundle of 3rd party plugins. Could you please send the screenshot of the issue?

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