Customization

Style Customization
CSS Folder Structure

If you do not want to use SASS then you can use ( Agastya_v*/dist ) folder. We have added all the themes folder ( default, saas, creative etc) in the dist folder. You can directly change the custom.min.css file. We suggest you not make any changes in the app, bootstrap or other CSS files.

  • css
    • pluigns
      • bootstrap.min.css
      • bootstrap-datepicker.min.css
      • bootstrap-datetimepicker.min.css
      • bootstrap-slider.min.css
      • bootstrap-switch-button.min.css
      • flag-icons.min.css
      • jquery.dataTables.min.css
      • jsgrid.min.css
      • jsgrid-theme.min.css
      • main.css
      • quill.bubble.css
      • quill.core.css
      • quill.snow.css
      • simplebar.css
      • simplebar.min.css
      • tablesaw.css
      • tiny-slider.css
Folder Name Description
apexcharts.css All text labels – tooltips, axis labels, titles, etc. – now support rich text formatting options, like changing colors, font weight, or applying just about any styling option from the CSS arsenal.
bootstrap-datepicker.css bootstrap-datepicker.css gives legacy support for twitter bootstrap v2, bootstrap-datepicker.css is used for twitter bootstrap v3 support and bootstrap-datepicker.standalone.css can be used to include the datepicker without depending on the twitter bootstrap library.
bootstrap-datetimepicker.min.css In datepicker you can easily select the date, month and year instead of typing manually. You can choose different date formats according to your need. To use the datepicker we have to add the bootstrap-datepicker.min.css in our code.
bootstrap.min.css bootstrap.min.css file is bootstrap file which includes all the core bootstrap files from bootstrap/ folder. It extends the default bootstrap variable by using file assets/css/bootstrap.min.css
font-awesome.min.css The font-awesome.min.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfonts folder contains all of the typeface files that the above CSS references and depends on.
perfect-scrollbar.css Custom scrollbars on the web can make a site or design stand out. They can help in portraying key design aspects of a site, whether that be a specific color or a particular style.
select2.min.css Select2 will do its best to resolve the percent width specified via a css class, but it is not always possible. The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.
How To Customize Style?

Before we customize the template style, first we need to understand the src/assets/scss folder structure. This folder is for customer customization purposes. You can create a new folder and files in this folder.

Use gulp scss-compile or gulp monitor to compile these scss files and generate css files under dist/assets/css folder.

  • src
    • assets
      • scss
        • components
          • all components scss files will be in this folder.
        • config
          • default
            • _theme-dark.scss
            • _theme-light.scss
        • fonts
          • fonts.scss
        • pages
          • all pages scss files will be in this folder.
        • plugins
          • all plugins scss files will be in this folder.
          • icons
            • all icons scss files will be in this folder.
        • settings
          • variable.scss
        • themes
          • layouts
            • _footer.scss
            • _page-loader.scss
            • _pc-header.scss
            • _pc-left-sidebar.scss
            • _pc-right-sidebar.scss
        • icon.scss
        • main.scss
Folder Name Description
components All components related scss files are created in this folder.
config Dark and light pages related to scss are written in this folder and page wise scss created i.e. _theme-dark.scss _theme-dark.scss.
fonts All fonts are imported in this scss file.
pages All the pages related to scss are written in this folder and page wise scss created i.e. _error.scss, _gallery.scss, _login.scss etc
plugins All the plugins ( Apex chart and etc ) are created in the plugins folder.
icons.scss All icons scss are imported in this file.
JavaScript

Agastya admin manages all theme js files in assets/js/. common script, charts scripts and setup of the theme js files inside assets/js/main folder. and used plugins are in assets/js/plugins. and assets/ folders can be found in root of the downloaded package.

Javascript Usage
  • src
    • assets
      • js
        • main
        • pluigns
Folder Name Description
main To set topbar,sidebar and layout settings and basic setup of the theme.
pluigns To setup all toast-list, data-choices and data-provider add the script based on it.
Sections
Header

General HTML structure is the same throughout the template. Here is the Header structure. 

                        
                                                
<header class="header w-100 position-fixed top-0">
    <nav class="navbar navbar-static-top navbar_block animation">
        <div class="navbar_header_inner">
            ....
        </div>
        <div class="navbar-right">
            <ul class="nav navbar-nav d-flex align-items-center">
                ....
            </ul>
        </div>
    </nav>
</header>
Contant

Generate Frest content area using following structure.

                        
                                                
<div id="scroll_contant" class="right-side animation d-block ps ps--active-y">
    <div class="row m-0">
        <div class="admin_page_block d-flex justify-content-between align-items-center">
            ....
        </div>
    </div>
    <section class="content content-breadcrumb">
        ....
    </section>
</div>
Buttons

Use our custom button styles for actions in forms, dialogs, and more with support for sizes, states, and more.

You will find all the styles in

                        
                                            
app/assets/css/v2/theme.css
Colors
                        
                                                
<button color="primary">Primary</button>
<button color="brand">Brand</button>
<button color="indigo">Indigo</button>
<button color="rose">Rose</button>
<button color="purple">Purple</button>
<button color="amber">Amber</button>
<button color="success">Success</button>
<button color="danger">Danger</button>
Styles
                        
                                                
<button color="primary" Normal>simple-1</button>
<button color="primary" small-radius>simple-2</button>
<button color="primary" round>simple-3</button>
<button color="primary" normal and shadow>Primary</button>
<button color="primary" small-radius and shadow>Fancy Radius</button>
<button color="primary" round and shadow>Fancy Rounded</button>
Previous
Change Theme Color
Next
Third Party Plugins