Get Started

Introduction to Xato

The Xato Admin template is a responsive web application built with Boostrap. It includes highly customizable UI kit, Components, Widgets, Modules, Charts and Applications for you to design interfaces and powerful web applications.

Browser Compatibility

Page Structure

Using Blank template

You can start your project by using starter_kit_blank_page.html or starter_kit_breadcrumbs.html under starter kit menu item. it comes with default navigation and sidebar links to begin with.

• starter_kit_blank_page.html
• starter_kit_breadcrumbs.html

Includes

In head tag you need to include

              
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
                <title>Xato Blank Page | Xato - Multipurpose Bootstrap Admin Dashboard Template </title>
                <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
                <link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
                <script src="assets/js/loader.js"></script>
                <!-- Common Styles Starts -->
                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
                <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
                <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
                <link href="assets/css/structure.css" rel="stylesheet" type="text/css" />
                <link href="plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css" />
                <link href="plugins/highlight/styles/monokai-sublime.css" rel="stylesheet" type="text/css" />
                <!-- Common Styles Ends -->
                <!-- Common Icon Starts -->
                <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
                <!-- Common Icon Ends -->
              
            

Common style starts after <!-- Common Styles Starts -->

Common icon starts after <!-- Common Styles Starts -->

Page level style/plugin style starts after <!-- Page Level Plugin/Style Starts -->

before </body> tag you need to include

              
                <!-- Main Container Ends -->
                <!-- Common Script Starts -->
                <script src="assets/js/libs/jquery-3.1.1.min.js"></script>
                <script src="bootstrap/js/popper.min.js"></script>
                <script src="bootstrap/js/bootstrap.min.js"></script>
                <script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
                <script src="assets/js/app.js"></script>
                <script>
                  $(document).ready(function() {
                      App.init();
                  });
                </script>
                <script src="assets/js/custom.js"></script>
                <!-- Common Script Ends -->
              
            

Common script starts after <!-- Common Script Starts -->

Page level script starts after <!-- Page Level Plugin/Script Starts -->

There is no <!-- Page Level Plugin/Style Starts --> & <!-- Page Level Plugin/Script Starts --> in starter_kit_blank_page.html or starter_kit_breadcrumbs.html

Other Includes

Loader starts after <!-- Loader Starts -->

Navbar starts after <!-- Navbar Starts -->

Main Body starts after <!-- Main Container Starts -->

Side Menu starts after <!-- Sidebar Starts -->

Main content starts after <!-- Content Area Starts -->

Breadcrumb starts after <!-- Navbar Starts / Breadcrumb Area -->

Main page content starts after <!-- Main Body Starts -->

Footer/Copyright Section starts after <!-- Copyright Footer Starts -->

Scroll to top buttons section starts after <!-- Arrow Starts -->

Rightbar Area starts after <!-- Rightbar Area Starts -->

Darkmode

Each admin panel comes with dark mode. Do the following to implement it

First of all include global.css under assets/css/darkmode folder in dark(template)

              
                <!-- Dark Mode Style Starts -->
                <link href="assets/css/darkmode/global.css" rel="stylesheet" type="text/css" />
                <!-- Dark Mode Style Ends -->
              
            

before </head> tag. Then add class darkmode to the body like this

              
                <body class="darkmode">
              
            

Additional : There is a page specific dark css as well. You need to include that if you do the work on that specific page. Suppose you are working in helpdesk page then you need to include pages.css along with the global.css as we mentioned above. Like below

              
                <!-- Dark Mode Style Starts -->
                <link href="assets/css/darkmode/global.css" rel="stylesheet" type="text/css" />
                <link href="assets/css/darkmode/pages.css" rel="stylesheet" type="text/css" />
                <!-- Dark Mode Style Ends -->
              
            

RTL

Each admin panel comes with RTL mode. Do the following to implement it

First of all include global.css under assets/css/rtl folder in rtl(template)

              
                <!-- RTL Style Starts -->
                <link href="assets/css/rtl/global.css" rel="stylesheet" type="text/css" />
                <!-- RTL Style Ends -->
              
            

Then copy bootstrap folder under rtl template. Bootstrap of RTL is different than the Bootstrap of LTR and Dark.

When you will work with RTL you need to make isRtl = false; in the js files where we have used perfect scrollbar. Like Below

              
                const ps = new PerfectScrollbar('.menu-categories', {
                  wheelSpeed:.5,
                  swipeEasing:!0,
                  minScrollbarLength:40,
                  maxScrollbarLength:300,
                  suppressScrollX : true
              });
              ps.isRtl = false;   <-- This Line
              
            

Simple search with PerfectScrollbar( and add the isRtl = false;

Style(CSS)

Neccessary CSS File

• bootstrap.min.css

We mainly have 2 CSS files

• main.css (This file consists all the UI styling)
• structure.css (This file consists all the structural styling)

Except these two css files. You can include below file for your preference

• perfect-scrollbar.css (Scrollbar Styling)

There are custom styling files too. You can add them for loader, chart, picker, tootip etc. Like below

• loader.css (For initial loader)
• apexcharts.css (For Charts)
• dashboard_1.css (For index pages)
• flatpicker.css (For Datepicker)
• tooltip.css (For Tooltip)
• and so on ...

You will find custom styling under <!-- Page Level Plugin/Style Starts -->

Javascript

Neccessary JS File

• <script src="assets/js/libs/jquery-3.1.1.min.js"></script>
• <script src="bootstrap/js/popper.min.js"></script>
• <script src="bootstrap/js/bootstrap.min.js"></script>

We mainly have 2 JS files

• <script> $(document).ready(function() { App.init(); }); </script>
• <script src="assets/js/custom.js"></script>

There are custom JS files too. You can add them for loader, chart, picker, tootip etc. Like below

• <script src="assets/js/loader.js"></script> (For Loader)
• <script src="plugins/apex/apexcharts.min.js"></script> (For Chart)
• <script src="plugins/flatpickr/flatpickr.js"></script> (For Picker)
• and so on ...

You will find custom styling under <!-- Page Level Plugin/Script Starts -->

Credits

Images

Plugin

Support

For support and queries. Please Contact Us

Common Issues

css, image and js path. Make sure to use correct path in your project.

Make sure to change index.html located in root or main folder as your preference

If you find any strange issue while using XatoAdmin then please contact us. We are always here to help you out.

Thank You 💕