How to change the LeptonX login page layout? #3771

0

berkansasmaz created 2 years ago

Support Team .NET Developer

Hi,

The account layout is defined in the Themes/LeptonX/Layouts/Account folder and you can override it by creating the file (Default.cshtml) with the same name and under the same folder. There is a partial view, its name is Footer.cshtml. You can override it by following the same way.

You can learn here how to change the account layout of the login page.

You can refer to this question to change the logo.

0

jeffbuot created 2 years ago

Hi,

Would you mind if I ask you to share the code of the Default.cshtml?

0

berkansasmaz created 2 years ago

Support Team .NET Developer

You can find the code you want below ✌️

Themes/LeptonX/Layouts/Account/Default.cshtml

@using Microsoft.Extensions.Localization
@using Microsoft.Extensions.Options
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX
@using Volo.Abp.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Components.LayoutHook
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theming
@using Volo.Abp.AspNetCore.Mvc.UI.Widgets.Components.WidgetScripts
@using Volo.Abp.AspNetCore.Mvc.UI.Widgets.Components.WidgetStyles
@using Volo.Abp.Ui.Branding
@using Volo.Abp.AspNetCore.Mvc.AntiForgery
@using Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy.Localization
@using Volo.Abp.AspNetCore.MultiTenancy
@using Volo.Abp.MultiTenancy
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Themes.LeptonX.Components.Common.PageAlerts
@inject IAbpAntiForgeryManager AbpAntiForgeryManager
@inject IBrandingProvider BrandingProvider
@inject LeptonXStyleProvider LeptonXStyleProvider
@inject IStringLocalizer<AbpUiMultiTenancyResource> MultiTenancyStringLocalizer
@inject ITenantResolveResultAccessor TenantResolveResultAccessor
@inject IOptions<AbpMultiTenancyOptions> MultiTenancyOptions
@inject ICurrentTenant CurrentTenant

@{
	AbpAntiForgeryManager.SetCookie();
	var langDir = CultureHelper.IsRtl ? "rtl" : string.Empty;
	var title = ViewBag.Title == null ? BrandingProvider.AppName : ViewBag.Title;

	var logoUrl = BrandingProvider.LogoUrl == null ? null : "--lpx-logo: url(" + BrandingProvider.LogoUrl + ");";
	var logoReverseUrl = BrandingProvider.LogoReverseUrl == null ? null : "--lpx-logo: url(" +
	BrandingProvider.LogoReverseUrl + ");";
	var selectedStyle = await LeptonXStyleProvider.GetSelectedStyleAsync();

    var selectedStyleFileName = CultureHelper.IsRtl ? selectedStyle + ".rtl" : selectedStyle;
}
<!DOCTYPE html>
<html lang="@CultureInfo.CurrentCulture.Name" dir="@langDir">

<head>

	@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Account)

	<title>@title</title>

	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<meta charset="UTF-8" />
	<meta name="description" content="@ViewBag.MetaDescription">

	<link rel="icon" href="~/images/favicon/logo-favicon_1.svg" type="image/svg+xml">
	<link rel="manifest" href="~/images/favicon/site.webmanifest">

	<abp-style-bundle name="@LeptonXThemeBundles.Styles.Global" />

	<link href="/Themes/LeptonX/Global/side-menu/css/bootstrap-@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-bootstrap-@selectedStyle" />
	<link href="/Themes/LeptonX/Global/side-menu/css/@(selectedStyleFileName).css" type="text/css" rel="stylesheet" id="lpx-theme-color-@selectedStyle" />

	@await Component.InvokeAsync(typeof(WidgetStylesViewComponent))
	@await RenderSectionAsync("styles", false)
	@await Component.InvokeLayoutHookAsync(LayoutHooks.Head.Last, StandardLayouts.Account)

	@*TODO Removed from this layout to prevent unvisible logos*@
	@if (logoReverseUrl != null)
		{
		<style>
			:root .lpx-theme-dark {
			@logoUrl
			}
			:root .lpx-theme-dim {
			@logoUrl
			}
		</style>
	}

	@if (logoReverseUrl != null)
		{
		<style>
			:root .lpx-theme-light {
			@logoReverseUrl
			}
		</style>
	}
</head>

<body>

	@await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Account)

	<div class="container-fluid overflow-hidden">
		<div class="row">
			<div class="col-lg-6 px-0 d-none d-lg-block overflow-hidden lpx-login-image-area">
				<img src="/Themes/LeptonX/Global/assets/img/login-bg.jpg" alt="login image" class="login-img">
				<div class="lpx-brand-logo lpx-login-big-logo"></div>
			</div>
			<div class="col-lg-6 position-relative">
				<div class="row align-items-center min-vh-100 py-5 pb-0">
					<div class="col-11 mx-auto lpx-login-form-max-width">
						<div class="lpx-brand-logo mb-4 mx-auto lpx-login-sm-logo"></div>
						<div class="card">
							<div class="card-body p-4 p-lg-5 pb-0 pb-lg-0">

								@await Component.InvokeAsync(typeof(PageAlertsViewComponent))
								
								@if (MultiTenancyOptions.Value.IsEnabled &&
										(TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(CookieTenantResolveContributor.ContributorName)
										== true ||
										TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(QueryStringTenantResolveContributor.ContributorName)
										== true))
								{
									<div class="row">
										<div class="col">
											<span style="font-size: .8em;"
											class="text-uppercase text-muted">@MultiTenancyStringLocalizer["Tenant"]</span><br />
											<h6 class="m-0 d-inline-block">
												@if (CurrentTenant.Id == null)
												{
													<span>
														@MultiTenancyStringLocalizer["NotSelected"]
													</span>
												}
												else
												{
													<strong>@(CurrentTenant.Name ??
												CurrentTenant.Id.Value.ToString())</strong>
												}
											</h6>
										</div>
										<div class="col-auto">
											<a id="AbpTenantSwitchLink" href="javascript:;"
											class="btn btn-sm btn-outline-primary">@MultiTenancyStringLocalizer["Switch"]</a>
										</div>
									</div>
								}
								<hr />
								<div class="login-wrapper">
									<div class="auth-form">
										@RenderBody()
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<footer>
					@await Html.PartialAsync("~/Themes/LeptonX/Layouts/Account/_Footer.cshtml")
				</footer>
			</div>
		</div>
	</div>

	
	<abp-script-bundle name="@LeptonXThemeBundles.Scripts.Global" />
    <script type="text/javascript" src="~/Abp/ApplicationConfigurationScript"></script>
    <script type="text/javascript" src="~/Abp/ServiceProxyScript"></script>

	@await Component.InvokeAsync(typeof(WidgetScriptsViewComponent))
	@await RenderSectionAsync("scripts", false)

	@await Component.InvokeLayoutHookAsync(LayoutHooks.Body.Last, StandardLayouts.Account)
</body>

</html>

0

jeffbuot created 2 years ago

Hi,

Thanks 😊

4 Answer(s)