Hi, I have created an ABP commercial solution with Angular as the front end and separate AuthServer. Currently, I am working on redesigning the entire login screen of the AuthServer. While I’ve successfully modified certain elements within the login page, such as those inside the yellow rectangle, I want to make more extensive changes across the entire page. Specifically, I want to customize:
- The background
- How the brand name is displayed
- The language selection component
- The tenant component
In short, I want to replace the entire AuthServer login page with my own custom HTML and CSS. I have a lot of changes to implement in terms of both HTML content and styles across the whole page. I’ve followed your tutorials, but they only explain how to modify the login.cshtml file or the login-related elements. I want to go beyond that and modify everything on the page, not just the login components. Tutorials I have followed: https://abp.io/community/articles/how-to-customize-the-login-page-of-an-abp-blazor-application-by4o9yms https://support.abp.io/QA/Questions/3771/How-to-change-the-LeptonX-login-page-layout https://support.abp.io/QA/Questions/3653/LeptonX-Theme-and-Login-Form
All these tutorials only show how to replace the login.cshtml file, but I want to change the entire page, not just the yellow box related elements.
2 Answer(s)
-
0
Hi,
To achieve this, you can override the account layout and login pages.
Get the source code
You can use the ABP Suite to download the
leptonxandaccount prosource code.Override page
Copy pages to your project (Authserver) using the same folder path.
Here is the document how to override page: https://abp.io/docs/latest/framework/ui/mvc-razor-pages/customization-user-interface
-
0
Thank you.
