How to change Laravel-Backpack Admin Panel Theme

Creating CRUD for your laravel project from scratch is a bit harder and take a lot of time to make something good and well designed too, that’s what i had to do each time i create laravel project doing everything from scratch.

BUT after searching a lot on github i found Laravel-Backpack packages which made my life easier than before, i was able to setup CRUD for my laravel projects in less than 1H and it uses the most popular admin panel theme AdminLTE which is beautiful but i had purchse before another admin panel theme from ThemeForest called Adminox, so i wanted to replace the current AdminLTE theme with my Adminox theme i reversed well inside Laravel-Backpack Base and CRUD Packages to understand how Creators of those awesome packages setup everything and after a while i understood that their code is clean enough to replace the current theme with my theme.

SO let’s start the explaination of how i have done changes inside the core Base Package first to get the following look

AFTER

figure 1.0

BEFORE

figure 1.1

How i replaced theme layout inside Base Package

I. i have placed all styles and js files from the new admin panel files to public folder inside my larval project, also i have placed the plugins inside the same public folder ( as it required by the new admin style ) in your case it could be different

II. opened resources/views/vendor/backpack/base/layout.blade.php file and commented out all styles links inside it as you can see in figure 2.0

figure 2.0 : all links i commented in the layout.blade.php

III. after that i placed there my new admin panel theme styles and left all @ yeilds as it is without changes as you can see in figure 2.1

figure 2.1 : my new admin panel styles link files

IV. as my new admin panel has new header tag i had to place it above body tag and under head tag as the html example downloaded with the purchased panel

figure 2.3 :new header tag with new top_bar and navigation_bar (menu)

V. as you saw above in the image i had included two new files (you can just place the code inside the layout file direct i prefere to organise my files by folder) used for the topbar_main as you saw in the first images above figure 1.0 is the bar which contains BACKPACK text and logged-in admin image i have setup it as you can see in figure 2.4

figure 2.4 : top bar with project name and authentication options and UI

VI. for navbar_main as you saw in the first images above figure 1.0 is the bar which contains navigation menu i have setup it as you can see in figure 2.5

figure 2.5 : nav bar with navigation menu

VII. for body tag i have commented the classes as you can see in figure 2.6

figure 2.6 : comment body classes

VIII. commented recovering sidebar state script as you can see in figure 2.7

figure 2.7

IX. replaced everything between <!- Site wrapper -> and <!- ./wrapper -> and put the same @ yeilds header and content as you can see in figure 2.8

figure 2.8 : new Site wrapper

X. commented out all scripts as you can see in figure 2.9

figure 2.9 : commented scripts

XI. then i placed there my new admin panel scripts as you can see in figure 3.0

figure 3.0

XII. i replaced everything between <!- page script -> and <!- JavaScripts -> with what you can see in figure 3.1

figure 3.1

XIII. now i opened resources/views/vendor/backpack/base/inc/alerts.blade.php and replaced everything inside it with my new toast alert as you can see in figure 3.2 (before) and figure 3.3 (after)

Before

figure 3.2

After

figure 3.3

XIV. now i opened resources/views/vendor/backpack/base/dashboard.blade.php and replaced it with my new admin panel breadcrumb as you can see in figure 3.4 (before) and figure 3.5 (after)

Before

figure 3.4

After

figure 3.5

XV. as you saw i replaced the logged_in text with widgets file and you can see the different in figure 1.0 and figure 1.1 here’s the content of the widgets file as you can see in figure 3.6

figure 3.6

XVI. after that i have setup everything i was able to change every authentication pages easily

XVII. for CRUD resources/views/vendor/backpack/crud~ list/preview/edit/create/show/details_row/form_content/reorder/revisions all you need to do is to include styles and scripts inside those yieds before_styles - after_styles / before_scripts - after_scripts and change necessary classes for tags

XVIII. for CRUD buttons fileds etc is the same as the past step you have to change classes

After all i hope this can help others to get how to change styles for this awesome packages Laravel-Backpack