search

Laravel-Backpack / theme-tabler

UI for Backpack v6 that uses Tabler and Bootstrap v5.
MIT License
21 stars 12 forks source link

[Documentation Request] Please document how to customize tabler theme using vite #124

Open realtebo opened 11 months ago

realtebo commented 11 months ago

Feature Request

What I am trying to achieve

We need to do small adjustment to tabler theme

How I see it implemented

Actually all is working, and it's using vite

What I've already tried to fix it

We don't know how to introduce some small css customizations and or a few new js into backpack 6 + tabler + vite

Would I be able to work on this myself and submit a PR

No...

karandatwani92 commented 11 months ago

Hey @realtebo To add CSS & JS,Go to config/backpack/ui.php & modify:

// CSS files that are loaded in all pages, using Laravel's @vite() helper
    // Please note that support for Vite was added in Laravel 9.19. Earlier versions are not able to use this feature.
    'vite_styles' => [ // resource file_path
        // 'resources/css/app.css' => '',
    ],

// JS files that are loaded in all pages, using Laravel's @vite() helper
    'vite_scripts' => [ // resource file_path
        // 'resources/js/app.js',
    ],

Or if you want to add CSS to tabler theme only. Steps:

  1. Publish theme config php artisan vendor:publish --tag="theme-tabler-config"
  2. Modify styles in config/backpack/theme-tabler.php to include css 
    'styles' => [
    base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
    base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
],