The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Metronic Theme master layout css change to custom css.


We needed to make CSS changes to our Metronic theme, so we modified the assets/style.css file. However, we encountered errors and noticed that other components were also affected. Could you please outline the correct process for changing the CSS and typography in the master CSS file to reflect the whole theme?


G
Guest 2 years ago
Metronic React HTML
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

T
Tun Tin 1 year ago
Deleted comment
T
Tun Tin 1 year ago

What keeps me hooked with Drift Boss isn’t just the gameplay, but the feeling that every mistake is part of the learning process. It feels fair, and that's why I keep retrying.


 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Lauris Stepanovs Author 2 years ago

Hi,

Sorry for the late reply.

The recommended way to customize Metronic default styles is through SCSS variables.

If you are using Metronic v8.x Demo1 or Demo 22 demos you can customize default styles in src/sass/layout/_variables.custom.scss.

If you are using other demos please use src/sass/layout/_variables.scss

For more info about using Metronic please check the Theme Documentation
and Video Tutorials

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation