How do I change the login page layout?

[lfernandes]

Is there an option in aspnet maker 2021 to replace the login page layout? What is the best way to internalize this customization within the maker project?

[MichaelG]

You can use CSS to style the page or JavaScript codes in client scripts to move the form elements around.

If you need a completely different layout, you will need to modify the generated view in "Views/home/login.cshtml".

[lfernandes]

How can I do to completely change the layout of the login page for all projects that are generated by ASPNET MAKER?

[MichaelG]

You will need to change the template file. Please read "Customizing Template" in the help file.

[w.saeed]

I have an easy and simple way to change login page layout .
" you will use visual studio 2019 to do the changes "

1- from Asp.net maker generator go to login.shtml and check to generator page without header.

2- now login page will showed with login form without Adminlite Header without (side bar & Niv Bar ).

3- go to folder of website that asp.net generate project files into.
4- open the project file " xxxx.sln" by visual studio 2019
5- explore project files and go to "View/shared/layout.cshtml" this the main layout file
make copy and name of it to " layout2 " for example.
6-open the new layout file "layout2.schtml" and go to

<!-- ./wrapper -->
} else { // SkipHeaderFooter

   @RenderBody()
}

7- before " @renderBoday() you can put what you like "customer page" layout .

below an example that I used in one project .

} else
{ // SkipHeaderFooter

<link href="~/CUS_bootstrap/bootstrap11.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="~/CUS_bootstrap/Project1.jpg" id="icon" alt="User Icon" />
</div>
@RenderBody()
</div>
</div>

}

8- the last thing go to "View/login.cshtml" file and change the value Layout = "_Layout"; to "layout2"

9- enjoy :)