New in v6: How to change layout for panel & auth views

Welcome to the world of custom themes for your Backpack v6 project! With the Tabler theme, you can easily change the layout for panel a...

Karan Datwani
Karan Datwani
Share:

Welcome to the world of custom themes for your Backpack v6 project! With the Tabler theme, you can easily change the layout for panel and auth views to suit your preferences.

Installation: Before we begin, let's make sure you have the Tabler theme installed:

Step 1: Install via Composer Use Composer to install the Tabler theme:

composer require backpack/theme-tabler

Step 2: Update Your View Namespace Next, head over to config/backpack/ui.php and update the view namespace:

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

Step 3: Publish the Theme Config File As we want to further customize the theme, let's publish the theme config file:

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

Now that you have the theme installed and configured, let's explore how to set up different layouts.

Changing Panel Layout:

In the published config file (config/backpack/theme-tabler.php), you'll find the layout option. This allows you to pick a layout for your panel views. You have several options to choose from:

  • horizontal
  • horizontal_dark
  • horizontal_overlap
  • vertical
  • vertical_dark
  • vertical_transparent (legacy theme)
  • right_vertical
  • right_vertical_dark
  • right_vertical_transparent

For example, to set a horizontal layout, update the layout option:

'layout' => 'horizontal',

Refresh your browser and enjoy the new layout:

Changing Auth Views Layout:

For the authentication views, you can choose from the following options:

  • default
  • illustration
  • cover

To set a specific layout for auth views, update the auth_layout option:

'auth_layout' => 'default',

With these customization options of theme Tabler, you have the flexibility to create the perfect layout for your Backpack v6 theme. Enjoy building your unique interface and enhancing your user experience! 🎨🚀

Want to receive more articles like this?

Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.

Reactions & Comments

What do you think about this?

Latest Articles

Wondering what our community has been up to?