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

keenthemes supports this item

Supported

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

12221 comments found.

Hello, could you tell me which are the files to modify to change the styles of the kt_header element. I would like to change the background color, the icons, the text, etc.

Hi,

You should use Metronic with gulp or wepback in order to customize the theme.

Most of the header styles are customized in “theme\default\demo1\src\assets\sass\global\layout\header\_config.scss” Actual header styles are defined in “_header.scss”, “_topbar.scss”.

You can check our video tutorials to learn the best practices of using Metronic in real world projects:

1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM

Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Metronic versions.

If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

Is there a hmtl bootstrap 4 version of this template included?

Hi :),

Yes, sure. Metronic include HTML, Angular, Vue, React versions are all versions can be used separately.

You can see the default HTML version of Metronic demo1 https://keenthemes.com/metronic/preview/demo1/index.html Other demos you can see using Metronic’s preview: https://keenthemes.com/metronic/

Regards, Sean

Hi. Can we remove Jquery package with Metronic VueJs project?

Hi,

Sure, we will remove it. At the moment, it is required for bootstrap js. We will find an alternative.

Thanks

Hi,

I am using Angular version (as far as I understand from other comments React version has the same case as well). LayoutConfig is stored in localStorage and the changes to layoutConfig is not reflected until localStorage is removed (or modified) manually.

Removing browser localStorage is OK for a developer but for an end user?

So I think changes should be reflected without removing localStorage.

What do you think?

Regards

Hi ali1024, Please read comment about localStorage again. If you changed props in LayoutConfig.js file you should remove localStorage. We didn’t write that end-user should remove localStorage (user doesn’t have access to sourceCode, including LayouConfig).

Regards, Keenthemes support

Hi,

Thanks for the prompt reply. I may not have expressed myself correctly. Let me explain in a more detailed scenario as follows..

I took a prod build and put it online. Users reached the site so they have layoutConfig in their localstorage now. After some time, I changed the values in LayoutConfig.ts and took another prod build and put it online again. Then existing users reached the site again and they don’t see changes, because the layoutConfig in their localStorage are not reloaded from the server.

So, what do you suggest here? Is it something we should cover with some extra coding maybe? If yes, it will be great to hear your guidance where and what to do.

Best

Hi ali1024,

It’s easy to achieve that, Just need rename localStorage keyName ‘layoutConfig’ for your each build. Convert this keyName as const or move into the envorinments, use new params in ‘src/app/core/_base/layout/services/layout-config.service.ts’ file in ‘(save/get)config’ methods.

Regards, Keenthemes support

Hi: Can I use typescript in React version? Is there any documentation for the React version, especially for the Material Design. Do you implement all component in Material Design (ex. stepper, tables,.....), or you have any improvement on Material Design ? Thanks.

Hi c3jack,

About typescript. Our React application is based on Create-React-Application. There is the official documentation of adding TypeScript into CRA projects.

We use Material-UI library (https://material-ui.com/) in our React application, all components (including stepper, tables and so on) from this library will work fine in our theme.

Regards, Keenthemes support

I noticed since 2 months ago, you’ve been saying angular 9 version will be coming in 2 months (one version in a few weeks, full version 2 months), and this hasn’t been revised to anytime soon. Neither version was released. Any idea when this will be ready to go? Thanks!

thanks, also i noticed a bug in firefox on the angular version of this theme. attached a pic: https://i.imgur.com/2o3rwqa.png

It’s for the datatable .

Woops here is the bug. datatable, angular, any of the demos: https://i.imgur.com/2o3rwqa.png

Hi vmigjamali, Both of your links are broken, we can’t check it. If there are any cases, write us by email (support@keenthemes.com) it will be very helpful.

Regards, Keenthemes support

Awesome, there’s a small note. In Vue demo modals have two close buttons, also page scrolls to top whenever a modal is shown on phone view

Hi :)

Thank you for your feedback. Could you please send the screenshot to support@keenthemes.com?

Thanks

Hi keenthemes,

Are you using the “pure javascript” version or the “jQuery” version of the Cropperjs in the latest metronic ???

Thank you

Hi,

We will use latest version from https://fengyuanchen.github.io/cropperjs/ Any issue with this version ? If you need other version you can install it by your own. We only integrate the latest available version since many users might not need other versions. Hope for your understanding.

Regards, Sean

I meant that there are 2 version : pure js and jquery of Cropperjs .

You empacked Metronic with the Pure js version, I was wondering if you’re gonna include a jQuery version in the next Metronic ?

thank you

Do you mean the same plugin is available in 2 versions ? In this can we will include pure JS version. But you can include any plugin you need by your own. We include plugins only if it will be useful for the majority.

Dear with the distributed version you have a problem with accordions gives the error:  plugins.bundle.js:13504 Uncaught TypeError: Cannot convert object to primitive value

I will appreciate your support

Hi,

Can you please provide us more details ? Which Metronic version you are using and which build tools you are using ? Gulp, webpack or classic package ?

Also please let us know how we can reproduce this error or provius your test link so we can check it online. Further details you can send to our support team at support@keenthemes.com

Regards, Sean

First, thank you team Metronic for the wonderful work building these themes. I was wondering if there is away to:
  • start a clean VUE JS without store specifically Login/Register store
  • to use other demo style/layout with VUE other than demo1
If so, please advice how. Thanks.

Hi,

You may remove it. Basically removing is much easier than implementing it. You can use the search function in your text editor and look for the related store codes.

At the moment, only demo1. We will add more demos near in the future updates soon.

Thanks

Hi ! I love your theme since the begining. New themes were announced to release weeks ago (on twitter btw) but no news since. Do you have a release date to communicate ? Thx

Hi :),

We are now preparing them for release. Expect it somewhere this week.

Regards, Sean

Niiiiiiiiiice !!!! thx ;)

Hi Keenthemes,

evey time I’m using Metronic typehead.js I have to check the layout if RTL I have to set dir=”RTL” or LTR using dir=”ltr”, I mean if and else in HTML

It would be much easier to implement dir=”x” depends on the layout inside the typehead.js automatically.

thank you.

For example : you made datepicker operate well on differents layout (RTL, LTR) by making this dynamic, like below.

... rtl: KTUtil.isRTL(), ...

wich conclude to this in html : dir=”rtl” or dir=”ltr” depends on the layouts.

but with typehead, there’s not such a thing : rtl: KTUtil.isRTL(),

wich make us do on every typehead a if and else to check the layout to put “dir” manually.

thank you

Hi,

Noted, we will check it further.

Regards, Sean

Thank you so much, it”s gonna relieve us from a lots of work.

Used it massively in autocomplete dropdowns, ;)

thank you.

I want to purchase it for Vue but I saw Demos are in Comming Soon Mode when will it be live

Hi,

Thanks for your interest in our theme – Metronic.

We will release those pending demos as soon as possible. At the moment we can not confirm any time since we have a lot of upcoming features planned but we do our best to release theme soon.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos

Regards, Sean

Hello, i think the css files are missing from the default html theme. kindly include in the download files.

Hi,

In order to launch the theme you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:

1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk

2. Your First Project: https://youtu.be/yu0O2Y2NXxc

3. Customization: https://youtu.be/7PG5Qbg0-gM

Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.

If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

The core style and script file sizes are way too much. Even after commenting unnecessary plugins and components, the script and style files are nearly 1.5MB in size ! Is there any way to reduce this or this is how it is ?

Hi,

If you use the builable version Metronic you can remove unused plugins from your build and reduce the size. You can check our video tutorials to learn the best practices of using Metronic in real world projects:

1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Metronic versions. If you need any further help please let us know. For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

Hi, could you please tell me if Demo 13 and Demo 14 will be released soon, and when ? Those would be perfect for parts of our project. Thanks for your response.

Hi,

We will releasing those pending demo soon. Hopefully during May. Currently we are repairing Metronic v7.0 update with a new codebase and design and we will resume the new demos releases.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos

Regards, Sean

Hi, In React mobile version, the menu does not work properly. 1- When the page changes, the menu does not close. 2- Mega menu does not open.

Hi :),

Thanks for your feedback. Good spot. We will release a quick bug fix for this issue by tomorrow. If you noticed any other such minor issues please let us know.

Regards, Sean

Hi, I am using Angular template, why i use Mat-table delay show if i’m request with http client ?

Hi alvin_vna,

Please provide us more details, can’t help you without clarification.

Just a friendly reminder. In order to request a theme support you will need to have an active support subscription. To check your subscriptuon status or renew it you can go to the Metronic page and refer to the support info below the theme price panel. https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

Regards, Keenthemes support

npm has found 12 vulnerabilities (1 low, 3 moderate, 5 high, 3 critical) in the last release version.

Are you using the updated/patched versions of the npm packages for the next release?

Hi,

Could you please try reinstalling with clean-install ? This warning can be due to your local cache.

Regards, Sean

this is a clean install. I just ran npm install . I dont think the framework will matter, but for what its worth I used your laravel integration procedure.

Hi,

You can fix this by upgrading the version of those plugins.

npm audit fix --force

morris.js and jqvmap does not have fix for those yet. You may remove these plugins if you plan to not using it.

Thanks

Hi there, trying to use datatables.net but I’m getting an error “Cannot set property ’$’ of undefined” on ‘datatables.bundle.js’ (tools/webpack/vendors/custom/datatables.js) with Laravel integration. No changes made in this file. Thanks!

Anything new, please?

Hi :),

Yes, it should be out by tomorrow.

Regards, Sean

Sounds great! :) 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