backpack/theme-tabler

UI for Backpack v6 that uses Tabler and Bootstrap v5.

1.2.16 2024-12-20 16:53 UTC

Requires

• backpack/crud: ^6.2.1

Requires (Dev)

• orchestra/testbench: ~5|~6
• phpunit/phpunit: ~9.0

MIT

• Mauro Martinez
• Cristian Tabacitu
• Antonio Almeida

• laravel
• backpack
• Backpack for Laravel
• Backpack Addon
• ThemeTabler

README

This package provides a theme for the Backpack for Laravel administration panel, that uses Tabler and implicitly Bootstrap v5. All esthetic customizations on top of Tabler are done in separate CSS files, which can be easily edited if you don't like them.

The file structure inside this package has changed a bit from Backpack v3-v5. We've split split it into smaller, more granual views. So that if you need to customize something by publishing a view, your change is small. If you want the old file structure, you can use the CoreUI v4 or CoreUI v2 themes.

Screenshots

Installing

Automatic installation

Because this a 1st party theme, you can quickly install it using

php artisan backpack:require:theme-tabler

Alternatively, follow the manual installation process below.

Manual installation

Step 1. Install via Composer

composer require backpack/theme-tabler

Step 2. Go to config/backpack/ui.php and change your view namespace:

-    'view_namespace' => 'backpack::',
+    'view_namespace' => 'backpack.theme-tabler::',

Step 3. (Optional) Publish the theme config file:

php artisan vendor:publish --tag="theme-tabler-config"

Config

Note: Any value set here will override the ones defined in config/backpack/ui.php when this theme is in use.

Change layout: Simply pick a layout

/**
 * Possible values: horizontal, horizontal_dark, horizontal_overlap, vertical,
 * vertical_dark, vertical_transparent (legacy theme), right_vertical, right_vertical_dark, right_vertical_transparent
 */
'layout' => 'horizontal_overlap',

Change auth layout: Pick a login page layout

'auth_layout' => 'default', //Possible values: default, illustration, cover

Add CSS: Here you can easily load your own extra CSS styles.

'styles' => [
  base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
  base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
 // add your css here
],

Add JS: Here you can easily include your own JS files.

'scripts' => [],

More configs: Get more out of theme-tabler.

• Take more control on Dark Mode
• Make Container fluid to utilize the space
• Choose how Header, Sidebar should be

'options' => [
   /**
    * The available color modes.
    */
    'colorModes' => [
        'system' => 'la-desktop',
        'light' => 'la-sun',
        'dark' => 'la-moon',
    ],

    /**
     * The color mode used by default.
     */
    'defaultColorMode' => 'system', // system, light, dark

    /**
     * When true, a switch is displayed to let admins choose their favorite theme mode.
     * When false, the theme will only use the "defaultColorMode" set above.
     * In case "defaultColorMode" is null, system is the default.
     */
    'showColorModeSwitcher' => true,

    /**
     * Fix the top-header component (present in "vertical_transparent") and the menu when the layout type is set as "horizontal".
     * This value is skipped when the layout type is horizontal-overlap, using false as default.
     */
    'useStickyHeader' => false,

    /**
     * When true, the content area will take the whole screen width.
     */
    'useFluidContainers' => false,

    /**
     * When true, the sidebar content for vertical layouts will not scroll with the rest of the content.
     */
    'sidebarFixed' => false,

    /**
     * When true, horizontal layouts will display the classic top bar on top to free some space when multiple nav items are used.
     */
    'doubleTopBarInHorizontalLayouts' => false,

    /**
      * When true, the password input will have a toggle button to show/hide the password.
      */
    'showPasswordVisibilityToggler' => true,
],

Uninstalling

To uninstall this Backpack theme:

1. Remove the composer package. Eg. composer remove backpack/theme-tabler
2. Delete the config file. Eg. rm -rf config/backpack/theme-tabler.php
3. Install a new theme (eg. php artisan backpack:require:theme-coreuiv4) or change the view_namespace in config/backpack/ui.php to the theme you want to be active.

Overriding

If you need to change a blade file in any way, you can easily copy-paste the file to your app, and modify that file any way you want. If you do that to the correct directory, your file will be used instead of the one in the package. But please keep in mind that you will NOT be getting any updates for that file.

The more files you copy-paste and customize, the more difficult it will be to upgrade to newer versions. So please avoid doing this too much.

# create the custom directory if it's not already there
mkdir -p resources/views/vendor/backpack/theme-tabler

# copy the blade file inside the folder we created above
cp -i vendor/backpack/crud/src/resources/views/ui/dashboard.blade.php resources/views/vendor/backpack/theme-tabler/dashboard.blade.php

Change log

Changes are documented here on Github. Please see the Releases tab.

Contributing

Please see contributing.md for a todolist and howtos.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

• Cristian Tabacitu
• All Contributors

License

This project was released under MIT, so you can install it on top of any Backpack & Laravel project. Please see the license file for more information.