Updating default front-end design of Identity Login Page in .NET core

Question

I am developing a .NET core application with Identity login which provides a Bootstrap form In the /Identity/Account/Login page.

I have imported Materialize CSS files in the wwwroot/lib folder and want to change the Login page's design with materialize css as well.

The problem is /Identity/Account/Login page doesn't exist in project structure. Then how should I approach to solve this problem?

Answer 1

One way would be to scaffold the login page, which would add it to your project structure. Then you would be able to make any changes you want. You would have to do the following (from the link I provided):

• From Solution Explorer, right-click on the project > Add > New Scaffolded Item.
• From the left pane of the Add Scaffold dialog, select Identity > ADD.
• In the ADD Identity dialog, select the options you want (in your case Login).
  • Select your existing layout page, or your layout file will be overwritten with incorrect markup. When an existing _Layout.cshtml file is selected, it is not overwritten.

For example ~/Pages/Shared/_Layout.cshtml for Razor Pages ~/Views/Shared/_Layout.cshtml for MVC projects

• To use your existing data context, select at least one file to override. You must select at least one file to add your data context.
  • Select your data context class.
  • Select ADD.
• To create a new user context and possibly create a custom user class for Identity:
  • Select the + button to create a new Data context class.
  • Select ADD.

Note: If you're creating a new user context, you don't have to select a file to override.

Another way would be to look at the Login page source code and see HTML elements' ids and classes. Then you could override the default CSS by writing your own CSS that would be more specific than the default one.