# Customization

Adding new navigation link in the menu, add route for that navigation, deciding layout for the new page and managing styles or customizaing the whole template are explained in great detail below.

To add a new Navigation Link, Follow this documentation

# How to add a New Route

To add a new Route, Follow this documentation

# Manage page / template layout

To manage / update layout, Follow this documentation

You can also update the layout according to your requirement as explained in the above documentation.

# Manage page / template style

# Template Styles

Here you will find where you can find template styles and how you can modify/override it. Also you will learn where to add your own styles.

# Core styles

resources/scss folder contains template's core styles. In this folder you will:

base directory: Holds Template's base style independent of any framework (In this case - VueJS). e.g. Bootstrap components' styles, template layout styles, etc.
vue: This folder contains styles for Vue version specific styles which isn't part of base styles. e.g. Some vue extension styles, bootstrap-vue extends, Vue specific page styles, etc.
core.scss: This fille will get included in main.js file. This files imports all other styles of templates. So you can say that it is entry point of template styles.

# Writing your styles

You can write your styles in resources/assets/scss/style.scss file. You can add your own structure in resources/assets/scss/ folder. resources/assets/scss/ Folder is completely yours to tweak it except you shall not remove or rename resources/assets/scss/variables folder provided by us.

Let's understand what each file has to do with style in resources/assets/scss/ folder:

style.scss: This files is your entry point of styles. Write your styles in this file or import other files. This file is imported in main.js
variables/_variables.scss: You can override bootstrap variables using this file.
variables/_variables-components.scss: Use this file to override component variables.

# Using @resources for your styles

There might be case that you want to use style from our @resources folder.

e.g. You want to create your own FAQ page with some extra components and want to extend our current page. In this case you can create a new SCSS file which imports our faq page style and write your own styles beneath it, just like a normal SCSS import. Lastly just import your newly created file in your SFC(Vue file).

Let's understand what each folder contains:

base: Base styles
vue/apps: This contains apps' styles. You can import it in your SFC and create your own app with our styles.
vue/bootstrap-vue: This is bootstrap-vue extends and overrides of template. You don't have to import them in your SFC.
vue/libs: This contains third party packages' styles. You have to import respective file while using third party package. e.g. If you are using vue-select in your page then you need to import vue-select.scss file in your page.
vue/pages: This contains styles for template pages. If you want style of specific package import it from this folder.
_animation.scss: CSS Animations (Isn't used till now - Might get removed in future updates)
_base-extended.scss: Extra styles of component or part of layout which isn't covered in base folder
_dark-layout.scss: Extended dark-layout styles from base dark-layout
_index.scss: all vue specific styles are imported in this file. And this file is imported in core.scss file.
_misc.scss: misc styles
_rtl.scss: RTL specific styles. Styles which isn't covered by postcss-rtl or RTL override styles.
_transitions.scss: Vue Transition Styles. Used in router transition mainly.

TIP

All SCSS files starting with _[underscore] (SCSS partials) are already imported in template styles so there's no need to import it. Other SCSS Files are meant to get imported only if they are required.

# Customization

# How to add a New Navigation Link