We've changed the HTML + Laravel template in the new update

It's a total re-write, restructured, updated UI, updated libraries and there is no way you can upgrade from last version, You will have to move your files to the newer version if you would like.

The easiest way to update would be to move files from your existing app/project to the updated version's starter-kit.

If you want to use default pagination with bootstrap tables in place of using datatables, By default laravel use tailwind views for pagination but As our template is Bootstrap admin template, we need to call the paginator's useBootstrap method within our AppServiceProvider:

<?php
namespace  App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class  AppServiceProvider  extends  ServiceProvider{

  /**
  * Register any application services.
  * @return  void
  */

  public  function  register(){
    //
  }

  /**
  * Bootstrap any application services.
  * @return  void
  */

  public  function  boot(){
    Paginator::useBootstrap();
  }
}

Vuexy admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.

To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.

Let's say, if you want to create your own custom theme named as raspberry, follow steps below.

1. First of all, create custom theme scss files, like theme-raspberry.scss and theme-raspberry-dark.scss inside assets/vendor/scss/ folder.
2. Now, add your newly created theme name in the Helpers.php file. You can find it here: app -> Helpers -> Helpers.php
Copy

// All options available in the template
$allOptions = [
  ...
  'myTheme' => ['theme-default', 'theme-bordered', 'theme-semi-dark', 'theme-raspberry'],
 ...
];

3. Also, you have to add your new theme name in scriptsIncludes.blade.php and template-customizer.js to add theme option in Template Customizer.

You can find scriptsIncludes.blade.php file in resources/views/layouts/sections folder.

Copy

<script>
window.templateCustomizer = new TemplateCustomizer({
...
  // Themes
  @foreach (['default', 'bordered', 'semi-dark','raspberry'] as $name)
    'theme-❴❴ $name ❵❵.css': '❴❴ mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css") ❵❵',
    'theme-❴❴ $name ❵❵-dark.css':
    '❴❴ mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css") ❵❵',
  @endforeach
...
});
</script>

You can find template-customizer.js file in resources/assets/vendor/js folder.

Copy

// Themes
TemplateCustomizer.THEMES = [
  {
    name: 'theme-default',
    title: 'Default'
  },
  {
    name: 'theme-semi-dark',
    title: 'Semi Dark'
  },
  {
    name: 'theme-bordered',
    title: 'Bordered'
  },
  {
    name: 'theme-raspberry',
    title: 'Raspberry'
  }
];

4. Now, you can set your newly created theme from both custom.php and Template Customizer.
Copy

'myTheme' => 'theme-raspberry',

Now, How to add variables, styles & mixins to theme scss file.

• To use declared variables & mixins, Theme requires to include library, pages, variable files.
• Theme requires primary color variable to update color as require. So need to add $primary-color variable with basic includes like below
Copy

// Component variables include
@import './_components/include';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';

$primary-color: #e30b5c;

// To update color to custom theme's primary color
@include template-common-theme($primary-color);
@include template-libs-theme($primary-color);
@include template-pages-theme($primary-color);

• After applying primary color for each library, components & pages, To update navbar, You can add custom style after including mixin as below :
Copy

@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• To update menu, You can add custom style after including mixin as below :
Copy

@include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);

• To update footer, You can add custom style after including mixin as below :
Copy

@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• You can also add style that should work for custom theme only.
• That's All!!

It's only recommended to use template without customizer, if you wish to configure themes, layouts and other customizations by changing custom options from custom.php file.

We have provided template with customizer, So user can check all the layout options and it's classes and can get idea about all the possibilities.

But before deployment, you might not required this customizer. Then you can check below options :

Option 1: If you want to remove customizer and also not required LocalStorage, then you can use hasCustomizer option in custom.php file

If you set this option to false, it will remove customizer, template customizer js and initialization script as well.

return [
  'custom' => [
    ...
    'hasCustomizer' => false,
    ...
  ],
];

Option 2: If you want to hide customizer and you need LocalStorage to store data like menuCollapse, light/dark layout, etc.., then you can use displayCustomizer option from custom.php file

If you set this option to false, it will hide customizer and won't remove/hide template customizer js.

return [
  'custom' => [
    ...
    'displayCustomizer' => false,
    ...
  ],
];