This topic contains 5 replies, has 2 voices, and was last updated by Sean Sean 1 year, 6 months ago.

progress-bar-success


  • Jay
    Participant

    Posts: 15
    Member Reply #7168

    Compared to the original bootstrap, Metronic seems to change the colour of “progress-bar-success”.

    Using the above in Metronic, we seem to get an almost turquoise coloured bar.

    How do we change to get the original green, which looks more appropriate when trying to indicate 100% (Green).

    Thanks

    • This topic was modified 1 year, 7 months ago by Sean Sean.
    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #7174

    Hi :),

    Yes, Metronic customizes Bootstrap’s default state colors in SASS level.  You can easily modify the customized bootstrap state colors by compiling  Metronic’s related SASS files. For this you will need to change the colors under “scss/global/_bootstrap-override.scss”:

    $brand-success:         lighten(#32c5d2, 1%);

    For more info on compiling SASS file please refer to the theme’s documentation under “_documentation/index.html”

    If you need any further clarifications please let us know.

    Thanks.


    Jay
    Participant

    Posts: 15
    Member Reply #7355

    I don’t seem to have this file in the theme that has been imported.

    We have simply used the \metronic_v4.5.6\theme\admin_1 template and imported the css/scripts specified.

    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #7360

    Hi,

    You should refer to the documentation and try to run the “gulp sass” task within the theme’s original unpacked folder to recompile the theme css files and import it back to your web directory.

    If you need any further help please let us know.

    Thanks.


    Jay
    Participant

    Posts: 15
    Member Reply #7365

    Hi Sean,

    I will look in to this next week.

    I assume this will just minify the css files, so I was hoping just to over-ride the css.

    Jason

    Sean
    Sean
    Keymaster

    Posts: 4226
    Support Staff Reply #7385

    Hi,

    This is generate css files first then you will need to run “gulp minify” to generate minified css and js files to override existing css files if you have done any changes in css and js files.

    If you need any further clarifications please let us know.

    Thanks.

You must be logged in to reply to this topic.