Styles Customization

Apex admin manages all theme scss files in src/sass/ folder and users scss files inside assets/scss/ folder. Both src/sass/ 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/sass/ folder 
apex-html-template/
└── src/
    ├── sass/
    |   ├── bootstrap/
    |   ├── bootstrap-extended/
    |   ├── components/
    |   ├── core/
    |   |   ├── colors/
    |   |   |   ├── _palette.scss
    |   |   |   └── palette-variables.scss
    |   |   └── variables/
    |   |       ├── _variables.scss
    |   |       └── app-variables.scss
    |   ├── pages/
    |   ├── plugins/
    |   └── themes/
    |       └── layout-dark.scss
    ├── bootstrap.scss
    ├── bootstrap-extended.scss
    ├── colors.scss
    ├── components.scss
    └── custom-rtl.scss
Folder/Files Details
bootstrap bootstrap/ folder contains Bootstrap core scss files, that can be updated with future bootstrap updates.
bootstrap-extended bootstrap-extended/ folder contains customized bootstrap scss files for Apex admin.
components components/ folder contains Apex admin all custom components scss files.
core core/ folder contain colors, layouts, menu, mixins and variables folder.
pages pages/ folder contains all page specific scss files.
plugins plugins/ folder contains all vendors scss files.
themes themes/ folder contains template layouts specific 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 bootstrap file which includes all the core bootstrap files from bootstrap/ folder. It extends the default bootstrap variable by using file sass/core/variables/_variables.scss
colors.scss colors.scss file includes all colors palette related files from sass/core/colors/ folder.
components.scss components.scss file includes all theme components files from sass/components/ folder.
custom-rtl.scss custom-rtl.scss file contains custom rtl layout related scss only.

To customize the theme default color and styling, you can change following files sass/core/variables/_variables.scss, sass/core/variables/_components-variables.scss & sass/core/colors/palette-variables.scss as per your preferred colors & styling.

Heads Up!

It is recommend not to change any scss files inside src/sass/ folder apart from following sass/core/variables/_variables.scss, sass/core/variables/_components-variables.scss & sass/core/colors/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.

  • _variables.scss: file contains 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.
  • _components-variables.scss: file contains theme components variables, You can customize it based on your preferences.
  • palette-variables.scss: file contain all colors variables, You can customize it based on your preferences.
Tip

Always take back-up of following files sass/core/variables/_variables.scss, sass/core/variables/_components-variables.scss & sass/core/colors/palette-variables.scss scss files 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 override theme default css.

CSS/SCSS files structure for assets/ folder. 
apex-admin-template/
└── assets/
    ├── css/
    |   └── style.css
    ├── js/
    |   └── scripts.js
    └── scss/
        └── style.scss

If you are familiar with SCSS, use assets/scss/style.scss file to write your custom scss. Gulp command sass-compile will compile these files and generate css files under assets/css/ folder.

If you are not familiar with SCSS, use assets/css/style.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.