Laravel 10 and Laravel 11 feature distinct directory structures, with several core files either removed or updated. Thus, we advise migrating your existing project to the latest version of Sneat Laravel 11 as a new project once we release the template with Laravel 11.
You can refer to the Upgrading to Laravel 11 from Laravel 10 guide for assistance: Link
To familiarize yourself with the updated Laravel 11 Directory Structure, please visit: Link
To update or replace the brand name in your application, modify the config/variables.php file:
'templateName' => 'Your_Brand_Name',
To change the logo, update the resources/views/_partials/macros.blade.php file. Depending on the format of your logo, you can use either an <img>
tag or an <svg>
tag.
Using an Image Logo (PNG, JPG)
<img src="IMAGE_PATH/IMAGE.PNG" alt="logo">
Using an SVG Logo
<svg>
<!-- Your SVG content here -->
</svg>
You can also add or remove utility classes for logo/branding based on your requirements, such as changing text color, font size, margin, padding, etc.
To update the branding for the vertical layout, modify the resources/views/layouts/verticalMenu.blade.php file:
<a href="{{ url('/') }}" class="app-brand-link">
<span class="app-brand-logo demo">
@include('_partials.macros', ["height" => 20])
</span>
<span class="app-brand-text demo menu-text fw-bold">{{ config('variables.templateName') }}</span>
</a>
To update the branding for the horizontal layout, modify the resources/views/layouts/navbar.blade.php file:
@if (isset($navbarFull))
<div class="navbar-brand app-brand demo d-none d-xl-flex py-0 me-4">
<a href="{{ url('/') }}" class="app-brand-link gap-2">
<span class="app-brand-logo demo">
@include('_partials.macros', ["height" => 20])
</span>
<span class="app-brand-text demo menu-text fw-bold">{{ config('variables.templateName') }}</span>
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-xl-none">
<i class="bx bx-x bx-sm align-middle"></i>
</a>
</div>
@endif
The Sneat admin template allows users to include custom fonts. To use Google Fonts, please follow the steps below:
Adding Open Sans Google Fonts:
https://fonts.google.com/specimen/Open+Sans
To update the custom font, modify the resources/views/layouts/sections/styles.blade.php file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
If you are familiar with SCSS (Recommended method):
/resources/assets/vendor/scss/_custom-variables/_bootstrap-extended.scss
file and add the following font-family variables:// Prefix for :root CSS variables
$variable-prefix: bs- !default;
// * Typography
// *******************************************************************************
// scss-docs-start font-variables
$font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !default;
$font-family-monospace: monospace !default; // You can update this font as well
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
If you are not familiar with SCSS (Not recommended method):
--bs-font-sans-serif
CSS variable value, edit the /resources/css/app.css
file. For example, to use the Open Sans font, add the following::root {
--bs-font-sans-serif: 'Open Sans' !important;
}
To include the app.css
file in your project, modify the /resources/views/layouts/sections/styles.blade.php
file and add the following line:
@vite(['resources/css/app.css'])
assets/
folder to avoid future update conflicts. If you still modify the file, it may require manual merging with future updates.
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.
When working with Laravel and utilizing the Yarn package manager for your project's frontend dependencies, you may encounter certain warnings during the installation process. These warnings are typically associated with third-party packages and are generally safe to ignore. However, it's essential to be aware of these warnings and understand their relevance to your project. This documentation will guide you through the common Yarn warnings you might encounter and help you decide whether to keep or remove specific packages based on your project's requirements.
Yarn warnings can arise during the installation of packages for various reasons, such as deprecated packages, unused dependencies, or potential conflicts. These warnings often serve as notifications rather than errors and can be safely disregarded in most cases.
If you encounter Yarn warnings during the installation process, it's a good practice to investigate their origins and relevance to your project.
Take note of the specific warning messages that Yarn provides during the installation. Understanding the warning message is the first step in determining its significance.
Consult the information below to understand the purpose of the packages associated with the warnings:
Vite
. (Required)Vite
. (Required)After reviewing the warnings and understanding the purpose of the associated packages, make a decision based on your project's requirements:
Yarn warnings are a common occurrence during package installation in Laravel projects. By following this documentation, you can better understand the warnings, evaluate the relevance of associated packages, and make informed decisions about whether to keep or remove them. This approach will help you streamline your project's frontend dependencies and maintain a more efficient and manageable codebase.
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': '❴❴ Vite::asset("resources/assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.scss") ❵❵',
'theme-❴❴ $name ❵❵-dark.scss':
'❴❴Vite::asset("resources/assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css") ❵❵',
@endforeach
...
});
</script>
<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,
...
],
];
We've provided the template with LTR (English) and RTL (Arabic) language support. However, users may want to update or remove this feature.
However, before deploying, you might not need this language support for LTR and RTL. In that case, you can refer to the steps below to remove these integrations :
languageDropdown
code from main.js
let languageDropdown = document.getElementsByClassName('dropdown-language');
if (languageDropdown.length) {
let dropdownItems = languageDropdown[0].querySelectorAll('.dropdown-item');
const dropdownActiveItem = languageDropdown[0].querySelector('.dropdown-item.active');
directionChange(dropdownActiveItem.dataset.textDirection);
for (let i = 0; i < dropdownItems.length; i++) {
dropdownItems[i].addEventListener('click', function () {
let textDirection = this.getAttribute('data-text-direction');
window.templateCustomizer.setLang(this.getAttribute('data-language'));
directionChange(textDirection);
});
}
function directionChange(textDirection) {
if (textDirection === 'rtl') {
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') !== 'true')
window.templateCustomizer.setRtl(true);
} else {
if (localStorage.getItem('templateCustomizer-' + templateName + '--Rtl') === 'true')
window.templateCustomizer.setRtl(false);
}
}
}
main.js
setTimeout(function () {
let templateCustomizerResetBtn = document.querySelector('.template-customizer-reset-btn');
if (templateCustomizerResetBtn) {
templateCustomizerResetBtn.onclick = function () {
window.location.href = baseUrl + 'lang/en';
};
}
}, 1500);
template-customizer.js
// For demo purpose, we will use EN as LTR and AR as RTL Language
this._getSetting('Lang') === 'ar' ? this._setSetting('Lang', 'en') : this._setSetting('Lang', 'ar');
And
if (e.target.value === 'rtl') {
window.location.href = baseUrl + 'lang/ar';
} else {
window.location.href = baseUrl + 'lang/en';
}
web.php
use App/Http/Controllers/language/LanguageController;
...
...
// locale
Route::get('lang/{locale}', [LanguageController::class, 'swap']);
app/Http/Controllers/language
. You can remove whole folder if not using it.app/Http/Middleware/LocaleMiddleWare.php
file.Kernel.php
file.lang\
folder.