Login screen button style change #10699

1 Answer(s)

• 

  0

  maliming created 4 months ago

  Support Team Fullstack Developer

  Hi,

  The external login button on the Login/Register/ExternalLogins pages was restyled in 10.x. The new template uses a full-width, rounded-pill button with a bg-info bg-opacity-10 background and the AbpAccount::SignInWith localization key (which renders as "Sign in with {0}"). To bring back the old outlined button look from 9.x without overriding the entire Razor Page (so future ABP enhancements like passkey/email login keep flowing in), you can do it with a CSS rule + a localization override on AccountResource.

  1) CSS (add to wwwroot/global-styles.css in your AuthServer project, or any other CSS file that is loaded on the account pages):

  .account-module-form form[method="post"] button[name="provider"] {
      display: inline-block !important;
      width: auto !important;
      background-color: transparent !important;
      color: var(--bs-primary) !important;
      border: 1px solid var(--bs-primary) !important;
      border-radius: 0.375rem !important;
      padding: 0.25rem 0.5rem !important;
      font-size: 0.875rem !important;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
  }
  
  .account-module-form form[method="post"] button[name="provider"]:hover {
      background-color: var(--bs-primary) !important;
      color: #fff !important;
  }
  

  The CSS above uses var(--bs-primary), which matches the LeptonX accent color in 10.x. If you want a closer match to the exact color from your 9.x screenshot, replace var(--bs-primary) with a specific hex (e.g. #1f1f1f for the dark outline look) in both the color/border rules and the :hover background-color.

  2) Localization override for AbpAccount::SignInWith so the button reads "Microsoft Entra ID" instead of "Sign in with Microsoft Entra ID".

  Following the pattern from How to override localization strings of depending modules, do this in your <YourProject>.Domain.Shared project (so it applies to AuthServer, HttpApi.Host and any other host in one place):

  a) Add Localization/AccountOverride/en.json:

  {
    "culture": "en",
    "texts": {
      "SignInWith": "{0}"
    }
  }
  

  b) In <YourProject>.Domain.Shared.csproj, embed the new folder alongside your existing localization entry, and add a package reference for AccountResource (the resource lives in Volo.Abp.Account.Pro.Shared.Application.Contracts, which is not in the default Domain.Shared reference chain):

  <ItemGroup>
      <EmbeddedResource Include="Localization\<YourProject>\*.json" />
      <Content Remove="Localization\<YourProject>\*.json" />
      <EmbeddedResource Include="Localization\AccountOverride\*.json" />
      <Content Remove="Localization\AccountOverride\*.json" />
  </ItemGroup>
  
  <ItemGroup>
      <PackageReference Include="Volo.Abp.Account.Pro.Shared.Application.Contracts" />
  </ItemGroup>
  

  c) In <YourProject>DomainSharedModule.ConfigureServices, add AccountResource as another contributor target:

  using Volo.Abp.Account.Localization;
  
  Configure<AbpLocalizationOptions>(options =>
  {
      options.Resources
          .Add<<YourProject>Resource>("en")
          .AddBaseTypes(typeof(AbpValidationResource))
          .AddVirtualJson("/Localization/<YourProject>");
  
      options.Resources
          .Get<AccountResource>()
          .AddVirtualJson("/Localization/AccountOverride");
  
      options.DefaultResourceType = typeof(<YourProject>Resource);
  });
  

  For other cultures, add zh-Hans.json, tr.json, etc. under /Localization/AccountOverride with the same shape and the override will apply per culture.

  I tested this in a fresh 10.x Angular + Tiered solution and the button renders as an outline style with just the provider display name, without touching Login.cshtml/Register.cshtml/ExternalLogins.cshtml.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel