Customize the default theme #11014

10 Answer(s)

• 

  0

  ismcagdas created 2 years ago

  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

  Save Cancel
• 

  0

  Loizos created 2 years ago

  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??

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  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.

  Save Cancel
• 

  0

  Loizos created 2 years ago

  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

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  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

  Save Cancel
• 

  0

  Loizos created 2 years ago

  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.

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  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.

  Save Cancel
• 

  0

  Loizos created 2 years ago

  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]

  Save Cancel
• 

  0

  ismcagdas created 2 years ago

  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>
  

  Save Cancel
• 

  0

  Loizos created 2 years ago

  Thank you @ismcagdas! All done, issue closed.

  Save Cancel