BLACK FRIDAY
From Nov 21
To Dec 1
XXDAYS : XXHRS : XXMIN : XXSEC
SAVE UP TO$3K
Also valid for the
existing customers!
logo
Project
Version

Adding New Metronic Theme

Metronic theme currently has 12 different themes and AspNet Zero includes them all. However, you might want to add a new theme option designed by your team to those options. This document explains step by step to add a new theme option to AspNet Zero. Just note that, the added theme must be a Metronic theme or at least it must be compatible with Metronic.

Rest of the document will use ThemeX as the new theme name.

.Net Part
  • Go to *Application.Shared project, open AppConsts.cs and add new field named ThemeX.

  • Go to *.Web.Core project.

    • Create new UICustomizer named ThemeXUiCustomizer.cs . Copy ThemeDefaultUiCustomizer.cs into ThemeXUiCustomizer.cs and change necessary settings. (It has setting methods, If your new ThemeX also have that settings keep them otherwise delete them)

    • Open UiThemeCustomizerFactory.cs and add ThemeX code parts in GetUiCustomizerInternal function.

      ...
      if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase))
      {
            return _serviceProvider.GetService<ThemeXUiCustomizer>();
      }
      ...
      
  • Go to *.Core project. Open AppSettingProvider.cs

    • Add a method named GetThemeXSettings which returns ThemeX settings.

    • Call it in GetSettingDefinitions function

      ... 
      return GetHostSettings().Union(GetTenantSettings()).Union(GetSharedSettings())
                      // theme settings
                      .Union(GetDefaultThemeSettings())
                      .Union(GetTheme2Settings())
                      .Union(GetTheme3Settings())
                      .Union(GetTheme4Settings())
                      .Union(GetTheme5Settings())
                      .Union(GetTheme6Settings())
                      .Union(GetTheme7Settings())
                      .Union(GetTheme8Settings())
                      .Union(GetTheme9Settings())
                      .Union(GetTheme10Settings())
                      .Union(GetTheme11Settings())
                      .Union(GetTheme12Settings())
                      .Union(GetThemeXSettings());//add ThemeXSettings
      ...
      
Angular Part
  • Go to src-> app -> shared -> layout folder
    • Go to themes folder.
      • Create a folder named themeX and go to themeX folder.
        • Create components named themeX-brand and themeX-layout
        • Copy their body from default theme components (from default-brand and default-layout) and change needed changes.
        • Create ThemeXThemeAssetContributor and copy its content from DefaultThemeAssetContributor .This class returns additional assets so make needed changes for your new themeX.
    • Go to theme-selection folder. Open theme-selection-panel.component.html and add themeX to list.
  • Go to src -> shared -> helpers and open ThemeAssetContributorFactory.ts. Add ThemeXThemeAssetContributor to getCurrent function
...
if (theme === 'themeX') {
	return new ThemeXThemeAssetContributor().getAssetUrls();
}
...
  • Go to src -> app -> admin folder

    • Go to ui-customization folder.

      • Create themex-theme-ui-settings component. Copy its content from default-theme-ui-settings component. This is where you select UI settings, If your new ThemeX also have that settings keep them otherwise delete them and add what is needed.

      • Open ui-customization.component.html and add your component.

        <tab *ngFor="let themeSetting of themeSettings" [active]="themeSetting.theme == currentThemeName">
        <!--...-->
            <themex-theme-ui-settings *ngIf="themeSetting.theme == 'themeX'" [settings]="themeSetting"></themex-theme-ui-settings>
        </tab>
        
    • Open ui-customization.module.ts and add ThemeXThemeUiSettingsComponentto declarations.

  • Go to src -> app . Open app.module.ts and add ThemeXLayoutComponent and ThemeXBrandComponent to declarations.

  • Go to src -> app. Open app.component.html and add ThemeX code part.

    <div [ngClass]="{'subscription-bar-visible': subscriptionStatusBarVisible()}">
        <!--...-->
        <themex-layout *ngIf="theme=='themeX'"></themex-layout>
    </div>
    
  • If your theme uses dynamic bundles, open the bundle.js and add your bundles.

    ASP.NET Zero has custom CSS file for datepicker in Angular version (bs-datepicker.css). If the default design is not compatible with your theme, you can change the related CSS file.

In this document