Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

KTTheme Service, How and Where to Use?


You have a great Theme API page documented here:

https://preview.keenthemes.com/blazor/metronic/docs/theme-api

BUT, where would I inject and call this service? I'm looking to implement the sticky header, so according to the API page, I should use:

KTTheme.AddHtmlClass("body", "header-fixed");

Where do I put that?


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 (2)


I was exploring the KTTheme Service to implement a sticky header on my client's plumbers in chula vista ca project, and I came across the API documentation. The guide mentions using KTTheme.AddHtmlClass("body", "header-fixed") for this purpose. However, I was stuck on where to inject and call this service. After digging a bit, I found it works best if you inject this in your page’s initialization script, right after the page is loaded or the DOM is ready. It ensures the sticky header is applied seamlessly.



Hi Keith,

Thank you for reaching out to us.

You can use this theme API function to add classes or attributes in the global scope, for a local scope layout initialization you can use our class Starterkit/Shared/Layout/_Helpers/KTThemeHelpers.cs.

You can check this helper class usage examples in files Starterkit/Shared/Layout/DefaultDarkHeader.razor.

_helper.addBodyClass("header-fixed"");


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  :(