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();
}
}
Sneat 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.
theme-raspberry.scss
and theme-raspberry-dark.scss
inside assets/vendor/scss/ folder.Helpers.php
file. You can find it here: app -> Helpers -> Helpers.php
// All options available in the template
$allOptions = [
...
'myTheme' => ['theme-default', 'theme-bordered', 'theme-semi-dark', 'theme-raspberry'],
...
];
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.
<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.
// 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'
}
];
'myTheme' => 'theme-raspberry',
Now, How to add variables, styles & mixins to theme scss file.
$primary-color
variable with basic includes like below// 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);
@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
@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);
@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
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,
...
],
];