How do i get the demo2 UI design to Blazor
Hi!
Can you advise on how replace the UI elements in the default Blazor demo to get the demo2 UI design ?
change the blazor UI to this : https://preview.keenthemes.com/metronic8/demo2/dashboards/logistics.html (no sidebar on left and only top menu bar with header background image)
Replies (8)
Hi Aby,
Firstly you need to update Starterkit/_keenthemes/src folder with demo2 src files and rebuild assets to get demo2 styles.
Since layout of demo2 is different from demo1 you will need to update the layout structure, layout components, and layout initialization code, you can make this by referring to demo2 in our HTML version.
By default, in Metronic demo1, we are providing a few layout options, alternatively, you can consider using a Dark or Light header layout. Check all available demo1 layout options in our html version's Layout builder.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
Tried following the instructions, but the theme layout is broken after the steps are completed. Is there any possibility you could share a starter kit based on demo2?
Hi Aby,
I would suggest you verify that you have the same layout structure as in our HTML version. If a layout is structured the same way then, you need to make sure that you are using the correct bundled styles, to verify this you can bundle demo2 styles in our HTML version and then manually copy dist/assets folder and paste it into Starterkit/wwwroot.
And lastly, make sure that you have all required body tag classes class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled".
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks Lauris, I got it working most of the part. However the sticky header no longer sticks to the top, can you advise please?
Hi Aby,
Did you initialize KTSticky component?
KTSticky.init();Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris.
I have added :
await JS.InvokeVoidAsync("KTSticky.init");
but the header is still not sticking to the top.
Hi Aby,
Make sure that you have sticky header initialization attributes on your header element.
Your header element should have the following attributes
class="header align-items-stretch"
data-kt-sticky="true"
data-kt-sticky-name="header"
data-kt-sticky-offset="{default: "200px", lg: "300px"}"
data-kt-sticky-enabled="true"Also, you will need to add header-fixed class on your body element.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi, congratulations for the great work.
Do you have any plans to put other layouts, like 2 and 30, in blazor?
thanks...
