Open Closed

Customize the default theme #11014


0
Loizos created
  • What is your product version? 11.0.0
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .NET 6

Hi support,

We would like to use the default theme as our base theme but with three main changes: 1. to enable the menu on the header panel (it's enabled by default in metronic), 2. to disable the aside (left) menu, and 3. to have the main content fluid width - not fixed. The result of this when you use the Layout builder in Metronic site is:

[https://prnt.sc/1_faAoxg_iWW]

Please advise on how to apply the same configuration in our asp.net zero angular solution. I know that you support "Adding New Metronic Theme", but still if I add a new theme based on the default one, what are the changes we need to perform in order to make it feel like the one above?

Thank you in advance!

Loizos


10 Answer(s)
  • 0
    ismcagdas created
    Support Team

    Q1: to enable the menu on the header panel (it's enabled by default in metronic) A1: If oyu follow the steps in answer below (A2), this will be done as well.

    Q2: to disable the aside (left) menu A2: There is already a setting for rendering top or left menu. By default, it is set to "left" for default theme. You can add a setting to Default theme settings and update this setting. https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Core/UiCustomization/Metronic/ThemeDefaultUiCustomizer.cs#L53. Then, you also need to use this theme setting in Defualt theme's _Layout.cshtml and render either left menu or top menu depending on the value of settings.BaseSettings.Menu.Position. You can also set this to "top-left" and render both menus in that case.

    Q3: to have the main content fluid width - not fixed. A3: This is already working like this. So, if you hide the left menu, it will be fluid layout, see https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Core/UiCustomization/Metronic/ThemeDefaultUiCustomizer.cs#L52

  • 0
    Loizos created

    A2: You can add a setting to Default theme settings and update this setting So all I have to do is to change this value?: settings.BaseSettings.Menu.Position = "top"; These settings also need to be changed or not?: settings.IsLeftMenuUsed = true; settings.IsTopMenuUsed = false;

    Then, you also need to use this theme setting in Defualt theme's Layout.cshtml.... I am Angular so I don't have Layout.cshtml. But do I have to do any changes on the Angular part? Isn't it enough just to change the above value of the setting and the front end will be just using it??

  • 0
    ismcagdas created
    Support Team

    Hi,

    We were using these settings (settings.BaseSettings.Menu.Position, settings.IsTopMenuUsed and LayoutType) but we have stop using them because Metronic also changed its structure.

    So, at the moment, these settings are defined in the server side code, but not used in default theme to render Left or Top menu.

    So, yes, you need to modify your Angular side default theme's layout file. You need to check value of settings.BaseSettings.Menu.Position and render either left or top menu accordingly.

  • 0
    Loizos created

    Hi,

    Is there an example on how to use this or similar setting to render the Angular part? Because to make it work for the Top menu it's a bit big change, the whole layout has to be changed.

    Thanks, Loizos

  • 0
    ismcagdas created
    Support Team

    Hi,

    Basically it should be something like this;

    <div>
    // some html content
    <top-bar-menu *ngIf="currentTheme.IsTopMenuUsed "></top-bar-menu>
    // some other htm content
    <side-bar-menu *ngIf="currentTheme.isLeftMenuUsed"></side-bar-menu>
    </div>
    

    currentTheme.IsTopMenuUsed and currentTheme.isLeftMenuUsed are already available, so you just need to place <<top-bar-menu> component to the right place in the default-layout.component.html

  • 0
    Loizos created

    Hi,

    I think it's not only about where to place the top or side bar menu, because I see that it's also the mobile toggle bar's position that need to be changed, the logo's position and the way it's loaded (current default-brand does not support this change), and also the navbar panel's position including the tob-bar-menu's look and feel that might need some changes (this requires to add another top bar menu component).

    Please correct me on the above in case I see it the wrong/difficult way to do it.

    Having in mind all above changes, I tried to add a new Metronic theme in order to place all changes in the new one and not breaking the default one. However I am getting this runtime error: "Multiple components match node with tagname default-brand". I crosschecked everything and I didn't find any double used selectors in my code etc. Please advise.

  • 0
    ismcagdas created
    Support Team

    Hi @Loizos

    Adding a new theme is a good idea.

    this requires to add another top bar menu component

    Yes, this is correct.

    I crosschecked everything and I didn't find any double used selectors in my code etc. Please advise.

    Can we have access to your project to check this ? If Angular is complaining about this, probably there is a duplicate somewhere in the app.

  • 0
    Loizos created

    Hi @ismcagdas

    The new added theme works fine and also the modifications to the new look and feel are done so we are happy with this, thanks again for your valuable support!

    Only thing just before close this issue is the new top menu I've added; I am trying to find a way to remove the icons from the root menu (sub menus are ok as it is with icons ) and also to highlight the selected menu item from the root item to the sub item. As it is now, i.e. the Administration root menu is not highlighted when Users are selected.

    For example I want something like that: [https://prnt.sc/er0lac96OXtK] [https://prnt.sc/p6ocK-OQZ5SF]

  • 0
    ismcagdas created
    Support Team

    Hi @Loizos

    Did you use the existing top-bar-menu component or created your own top menu ? If you used existing top menu, then you can change;

    <i *ngIf="item.icon" class="menu-icon" [ngClass]="item.icon"></i>
    

    to

    <i *ngIf="item.icon && parentItem" class="menu-icon" [ngClass]="item.icon"></i>
    
  • 0
    Loizos created

    Thank you @ismcagdas! All done, issue closed.