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)

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(