Style Customization

SCSS/CSS Files Usage & Customization

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

CSS files structure of `src/css/` folder

                
                app-assets/
				|   ├── css/
				|   |   ├── core/
				|   |   ├── pages/
				|   |   ├── plugins/
				|   |   ├── themes/
				|   ├── bootstrap-extended.css
				|   ├── bootstrap.css
				|   ├── colors.css
				|   ├── components.css

Folder/Files	Details
core	`core/` folder contain colors, layouts, menu, mixins and variables folder.
pages	`pages/` folder contains all pages specific css files.
plugins	`plugins/` folder contains all vendors css files.
themes	`themes/` folder contains template layouts specific scss files.
bootstrap-extended.css	`bootstrap-extended.css` file is for those bootstrap components which are customized for this theme.
bootstrap.css	`bootstrap.css` file is bootstrap
colors.css	`colors.css` file includes all colors palette.
components.css	`components.scss` file includes all theme components files

Info

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

CSS files structure for `assets/` folder.

                
                    TPro-html-bootstrap-admin-template/
                    ├── assets/
                    |   ├── css/
                    |   |   ├── style.css
                    |   ├── js/
                    |   |   ├── scripts.js

If you are not familiar with CSS, Use assets/css folder's 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.

TPro