This topic contains 5 replies, has 4 voices, and was last updated by Jai Jai 1 year, 3 months ago.

Best way to customize Metronic 5 themes


  • ludo-cit
    Participant

    Posts: 4
    Member Reply #12927

    Hello,

    I’m a Metronic v5.0.5 theme user, and I would like to override the theme (eg: Demo 3) with my custom styles.
    But I would like to do it without (if possible) interfering with native SCSS sources in order to facilitate the upgrade to further Metronic versions.

    What is the preferred method for customizing a Metronic theme ?
    – adding our own SCSS file ? Some basic styles (e.g. button color, button corner radius) are not overridable in Metronic SCSS files
    – editing Metronic SCSS files ? This could make subsequent Metronic upgrades troublesome
    – overriding styles-bundle.css with our own CSS file ?

    Many thanks in advance.

    Ludovic

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #12953

    Hi,

    Yes, in your case the best way is to include your own scss file and call it from the demo’s style.scss. Thus you can override the entire theme or framework components as well. We recommend you using sass to manage the styles. If you need any further help please let us know.

    Thanks.


    burakkilic
    Participant

    Posts: 17
    Member Reply #13167

    Could you please explain it with an example?

    Let’s say I want to override Pricing Table 2. Should I edit _pricing-table-2.scss or I write some code to style.scss ?

    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #13203

    Hi 🙂

    To override style, you don’t need to modify the core _pricing-table-2.scss.

    Easier for you later to update to the latest version by replacing the core files.

    You can create a new scss file.

    Thanks


    burakkilic
    Participant

    Posts: 17
    Member Reply #13245

    Excuse me but I don’t understand exactly. Could you please add a better example to the documentation?

    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #13282

    Hi 🙂

    Let’s say I want to override Pricing Table 2. Should I edit _pricing-table-2.scss or I write some code to style.scss ?

    Yes, you can write your code in style.scss.

    In your new file, add pricing table class name, and your CSS property accordingly.

    .m-pricing-table-2 {
       .m-pricing-table-2__head {
          .m-pricing-table-2__title {
          }
       }
    }

    Let say the file name is pricing-table-2-custom.scss

    And include it into in file:

    /theme/default/src/sass/demo/[demo]/style.scss

    Thanks

You must be logged in to reply to this topic.