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.
-
Go to
*Application.Shared
project. OpenAppConsts.cs
and add a new field named ThemeX. -
Go to
*.Web.Core
project.-
Create new UICustomizer named
ThemeXUiCustomizer.cs
. CopyThemeDefaultUiCustomizer.cs
intoThemeXUiCustomizer.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 inGetUiCustomizerInternal
method.... if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase)) { return _serviceProvider.GetService<ThemeXUiCustomizer>(); } ...
-
-
Go to
*.Core
project. OpenAppSettingProvider.cs
-
Add a function 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 ...
-
-
Go to
*.Web.Mvc
project-
Go to Areas -> App -> Views folder.
- Create new view named
_ThemeXSettings.cshtml
. Copy_DefaultSettings.chtml
content into_ThemeXSettings.cshtml
. (Make same changes which you did inThemeXUiCustomizer
) - Open
Index.cshtml
and add your new theme.
<!--Add tab--> <ul class="nav nav-pills" role="tablist"> ... <!----Add These Part----> <li class="nav-item"> <a href="#themeX" class="nav-link @(Model.Theme == AppConsts.ThemeX ? "active" : "")" data-toggle="tab" role="tab"> <img src="@(ApplicationPath)Common/Images/metronic-themes/themeX.png" width="150" /><!--Your theme image path--> <span class="theme-name">@L("Theme_" + AppConsts.ThemeX.ToPascalCase())</span> </a> </li> <!--------> <ul> <div class="tab-content"> ... <!----Add These Part----> <div id="themeX" class="tab-pane theme-selection @(Model.Theme == AppConsts.ThemeX ? "active show" : "")"> @await Html.PartialAsync("_ThemeXSettings", Model.GetThemeSettings(AppConsts.ThemeX)) </div> <!--------> </div>
- Create new view named
-
Go to **Shared -> Components **folder.
Copy AppAreaNameDefaultBrandViewComponent and **AppAreaNameDefaultFooterViewComponent ** folders. These folders has 2 component Change their name and necessary parts.
-
Go to wwwroot -> metronic -> themes and create folder named themeX. Copy default folder content here and change what you need (change css, js as you wish).
-
Open
bundle.json
and add new bundles that you add wwwroot -> metronic -> themes -> themeX
-