Ends in:
0 DAY
16 HRS
1 MIN
14 SEC
Ends in:
0 D
16 H
1 M
14 S
Open Closed

How to change the LeptonX login page layout? #3771


User avatar
0
jeffbuot created
  • ABP Framework version: v6.0.0-rc.4
  • UI type: Angular / MVC / Blazor

Hi,

How can I change the LeptonX login page layout and change those area with question mark (attachment)?


4 Answer(s)
  • User Avatar
    0
    berkansasmaz created
    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.

  • User Avatar
    0
    jeffbuot created

    Hi,

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

  • User Avatar
    0
    berkansasmaz created
    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>
    
  • User Avatar
    0
    jeffbuot created

    Hi,

    Thanks 😊

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19