Style Customization

SCSS/CSS Files Usage & Customization

Modern admin manages all theme scss files in src/scss/ folder and users scss files inside assets/scss/ folder. Both src/scss/ and assets/ folders can be found in root of the downloaded package.

Gulp command for scss compile will generate all css files in app-assets/css.

SCSS files structure of src/scss/ folder


                
                    modern_admin/
                    ├── src/
                    |   ├── scss/
                    |   |   ├── bootstrap/
                    |   |   ├── bootstrap-extended/
                    |   |   ├── components/
                    |   |   ├── core/
                    |   |   |   ├── colors/
                    |   |   |   |   ├── palette-variables.scss
                    |   |   |   |   ├── material-palette-variables.scss
                    |   |   |   ├── variables/
                    |   |   |   |   ├── _bootstrap-variables.scss
                    |   |   |   |   ├── _components-variables.scss
                    |   |   |   |   ├── _material-variables.scss
                    |   |   |   |   ├── _variables.scss
                    |   |   ├── material/
                    |   |   ├── material-extended/
                    |   |   ├── pages/
                    |   |   ├── plugins/
                    |   ├── bootstrap-extended.scss
                    |   ├── bootstrap.scss
                    |   ├── colors.scss
                    |   ├── components.scss
                    |   ├── custom-rtl.scss
                    |   ├── material-colors.scss
                    |   ├── material-extended.scss
                    |   ├── material.scss
                
            

Following is the details of what all scss folders.

Folder/Files Details
bootstrap bootstrap/ folder contain Bootstrap 4.3.1 core scss files, that can be updated with future bootstrap updates.
bootstrap-extended bootstrap-extended/ folder contain customized bootstrap scss files for modern admin.
components components/ folder contain modern admin all custom components and pages scss files.
core core/ folder contain colors, layouts, menu, mixins and variables folder.
material material/ folder contain Material 4.3 core scss files, that can be updated with future material updates. For more information
material-extended material-extended/ folder extends material scss files for modern admin.
pages pages/ folder contains all pages specific scss files.
plugins plugins/ folder contains all vendors scss files.
bootstrap-extended.scss bootstrap-extended.scss file is for those bootstrap components which are customized for this theme. It include all files from bootstrap-extended/ folder.
bootstrap.scss bootstrap.scss file is extended bootstrap file which includes all the core bootstrap files from bootstrap/ folder. It extends the default bootstrap variable by using file scss/core/variables/_variables.scss
colors.scss colors.scss file includes defalut theme colors palette related files from scss/core/colors/ folder.
components.scss components.scss file includes all theme components files from scss/components/ folder.
custom-rtl.scss custom-rtl.scss file contain custom rtl layout related scss only.
material-colors.scss material-colors.scss file includes material theme colors palette related files from scss/core/colors/ folder.
material-extended.scss material-extended.scss file is for those material components which are customized for this theme. It include all files from material-extended/ folder.
material.scss material.scss file is material file which includes all the core material files from material/ folder. It extends the default material variable by using file scss/core/variables/_variables.scss

Heads Up!

It is not recommend to change any scss files inside src/scss/ folder apart from following scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss scss files to avoid future update conflicts. If you still modify any other files, it may requires to merge it manually with future updates.

To customize the theme default color and styling You can change following files scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss scss files as per your preferred colors & styling.

  • _bootstrap-variables.scss: file contain bootstrap variables which overrides default bootstrap variables, You can use any bootstrap variable to customize it. By using this file you can change bootstrap primary, secondary, success, danger etc... colors & lot more.
  • _material-variables.scss: file contain material bootstrap variables which overrides default material bootstrap variables, You can use any material bootstrap variable to customize it. By using this file you can change material bootstrap primary, secondary, success, danger etc... colors & lot more.
  • _components-variables.scss: file contain theme components variables, You can customize it based on your preferences.
  • palette-variables.scss: file contain default theme's all colors variables, You can customize it based on your preferences.
  • material-palette-variables: file contain material theme's all colors variables, You can customize it based on your preferences.
Tip

Always take back-up of following files scss/core/variables/_bootstrap-variables.scss, scss/core/variables/_components-variables.scss, scss/core/variables/_material-variables.scss, scss/core/colors/palette-variables.scss & scss/core/colors/material-palette-variables.scss if you are changing them as some times it require manual merge when we release new updates.

Info

If you are not familiar with SCSS, you can write your own css in assets/css/style.css file, it will overrides theme default css.

CSS files structure for assets/ folder.


                
                    modern_admin/
                    ├── assets/
                    |   ├── css/
                    |   |   ├── style-rtl.css
                    |   |   ├── style.css
                    |   ├── js/
                    |   |   ├── scripts.js
                
            

If you are familiar with SCSS, Use assets/scss folder's style.scss / style-rtl.scss file to write your custom scss. Modern admin sass-compile command will compile this files and generate css files under assets/css/ folder.

If you are not familiar with SCSS, Use assets/css folder's style.css/style-rtl.css file to write your custom css.

You can add your new files or folder in assets/ folder to avoid any future conflicts or merge.