Base solution for your next web application
Open Closed

Issues-when-adding-a-new-Metronic-Theme #12197


User avatar
0
MatthieuPauze created

Hi, I am trying to add a new Metronic theme so it can be completely customizable. I followed all the steps mentioned in the docs regarding adding a new theme. First, I downloaded the Metronic 8.x source code from the https://aspnetzero.com/download page. I copied all the "default theme" settings to create a new theme in the application, in the back-end and the front-end as specified in the docs. I can now select the new theme in ui-customization, but it seems there is an issue with the /dist assets generated from the metronic theme and the layout that I copied from default-theme-ui-settings.component.html. So far the issue seems to be mostly due to the sidebar that is missing, something with the drawer classes that hides it from the page:

For example, the sidebar generated has the classes drawer and drawer-start, I cannot figure out where they are coming from; the default theme included in the aspnetzero boilerplate does not add these classes to the sidebar; these classes hide the sidebar by default.

<div id="kt_app_sidebar" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle" class="app-sidebar flex-column ng-tns-c1185013412-3 drawer drawer-start" style="width: 225px !important;"> And the /dist assets files generated are very different from the ones that were included in the boilerplate project. Are there settings I am missing? I just want to duplicate the default theme and apply my own custom fonts and colors and general style. But it looks like the assets generated by aspnetzero have a different configuration, different settings, I would like to know how I can match them.

Thank you


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @MatthieuPauze

    Most of the time, this happens because of a JS error or missing class on body element. But, it is hard to determine this problem without seeing the source code. Is it possible for us to access your source code ? If so, you can send an mail to [email protected] and we can take a look at your project.

  • User Avatar
    0
    MatthieuPauze created

    Unfortunately I am not able to share the source code; however, in the end, I decided to replace the sidebar drawer by a custom component; the rest of the Metronic components seem to be working fine for now.

    Thank you

  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi

    We are glad that you solved your problem, good work.