Wizard page looks like this:

@using PanikButton.Web.Wizard.Shared.Partials.General;
@layout Layout.AuthExtended
@inject IJSRuntime JS
@page "/signup"

<script suppress-error="BL9992" src="@KTTheme.getAssetPath("js/custom/utilities/modals/create-account.js")"></script>

<!--begin::Authentication - Multi-steps-->
<div class="d-flex flex-column flex-lg-row flex-column-fluid stepper stepper-pills stepper-column stepper-multistep" >
<!--Removed content for clarity (copied from html)-->
</div>
<!--end::Authentication - Multi-steps-->

@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Task.Delay(1000);
await JS.InvokeVoidAsync("KTCreateAccount.init");
}
}
}

Hi Ralph,

Sorry, yes I meant the KTCreateAccount component.

We are setting a background for the sidebar using inline CSS, you can fix sidebar image by using getAssetPath function.

style="background-image:url(@KTTheme.getAssetPath("/media/misc/auth-bg.png"))"

Hi Lauris,

Thank you for the reply. I think I was not clear enough. It's not the background but CSS styling of the left menu is wrong. Eveything else looks fine.
The letters of for in example "Account Info or Account Type" are gray and not white.
I also miss the "active/current" styling. So the current step number background is not green but blue.

I think this is a bug in version 8.1.6 because when I inspect in example the background color of the selected step on page:
https://preview.keenthemes.com/metronic8/demo1/authentication/extended/multi-steps-sign-up.html
I see that ".stepper.stepper-pills .stepper-item.current .stepper-icon" has "background-color: var(--kt-stepper-icon-bg-color-current);"
This comes from: style-bundle.css


In my Blazor project (haven't changed anything. only followed getting started) it also comes from style-bundle.css and the value is also "background-color: var(--kt-stepper-icon-bg-color-current);" (but is is blue).
var(--kt-stepper-icon-bg-color-current) references to var(--kt-primary); with as value "--kt-primary: #009ef7;"


In the online page it references to: var(--kt-success);

So not primary.

Hi Ralph,

Thank you for your feedback.

Yes, it seems like some of the styles used in our Blazor version are outdated, to fix this you can bundle Metronic styles using gulp script in our HTML version and then manually copy dist/assets folder and paste it to wwwroot in your Blazor application. We will review this issue and will include a fix in next releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I will check if you solution works.
Any idea when a new update for Blazor comes out?

Hi Ralph,

The issue is related to missing scss file imports in a file Starterkit/_keenthemes/src/sass/components/components.scss.

To fix this you can just add imports below to Starterkit/_keenthemes/src/sass/components/components.scss.

@import "stepper/multistep";
@import "landing";