Customization

Settings

Use the AccountConfiguration class to customize the behavior of MvcAccount. See the Installation Instructions for more info.

CSS

You can use the following CSS for responsive horizontal form layout:

.MvcAccount form > div { display: table-row; }
.MvcAccount form > div > div { display: table-cell; padding: 0 10px 15px 10px; }
.MvcAccount form > div > div:first-child { text-align: right; }
.MvcAccount form label[for]:after { content: ":"; }
.MvcAccount form .form-control { display: inline-block; width: auto; }
.MvcAccount form .btn-primary { margin-right: 5px; }

@media (max-width: 767px) {
   .MvcAccount form .form-group { margin-bottom: 15px; }
   .MvcAccount form > div { display: block; }
   .MvcAccount form > div > div { display: block; padding: 0; }
   .MvcAccount form > div > div:first-child { text-align: left; }
   .MvcAccount form > div.buttons > div:first-child { display: none; }
}

You can customize a specific view using a CSS class named like the view model, but hyphen-separated:

.MvcAccount-Authentication-SignInViewModel h1 { }

Views

MvcAccount includes all Razor views embedded as assembly resources. Embedded views can be individually overridden by files views in your project.

To extract all views use the Extract-Views command, using the same value of baseRoute (used at registration) for the -ViewsDirectory parameter.

Resources

You can override individual resources, like error messages, display names, text in HTML elements like <h1> and <title>, for any particular culture, by using global resource files. Here's how it works:

1. Create a resource file in ~/App_GlobalResources.
2. Set AccountConfiguration.ResourceClassKey to the name of the resource file, minus the culture and extension.

For a list of resource names see this.