Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 9 - Customizing theme


Hi,

I would like to add additional font sizes, font weights and colors to theme.
How exactly can i do that?

I was trying adding new definitions to tailwind.config.js and building css, but new values are not picked up, or at least they are not added to the compiled styles.css in dist folder.

Thank you


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


Ah yes, i also understand the safelist now happy
I am actually trying to integrate all this with Rails, and i was hoping, for starters, to just compile the css and use it "as is" in Rails pipeline, and changes were not reflecting. As you said, i was compiling in metronic folder, doing changes to HTML in Rails, so that's why i didn't get any results at all.

I took time now and integrated it with Rails tailwind and so far so good, together with all the plugins and everything.

Looks promising happy Thanks



Hi happy,

Glad to hear that you have resolved it,

We are working on Rails integration and we will provide an effective way to use Metronic 9 Tailwind with Rails pipeline. The guide should be out in a few weeks so then you can revise your own integration.

Our Laravel users are quite impressed with the guide we provided for them.

Also, I would recommend you try the Metronic Composer tool for your Metronic 9-based projects. With a one-time payment, you'll gain full access to our internal tool which saves time on Metronic HTML code browsing and extracting.

Regards.



Hey. I am looking forward for an official guide for Rails integration. Happy to see it still relevant happy

I actually bought the composer, but i am not getting it fully to be honest. Need more time to figure it out. Maybe more real world examples in the docs would help me (us?) out.

Thanks for the support!



Hi happy,

Thank you for the purchase!

Noted, we will improve the Composer docs and add more use-case examples. Could you please provide us with which parts were unclear to you?

Have you managed to install and get it working in your localhost?
If you face any issues please let us know.

Regards.



Hi,

After the compilation have you used those new classes in your HTML?
Tailwind compiler only compiles actual used classes in the HTML into the styles.css.

Can you also try to use npm run build command as well?

If you did the above as required but still does not work please provide us with your tailwind.config.js code customizations and we will try to check your changes in our environment here.

Regards


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