search

Laravel-Backpack / CRUD

Build custom admin panels. Fast!
https://backpackforlaravel.com
MIT License
3.19k stars 898 forks source link

[My Experience] i was able to change the current AdminLTE theme, how it looks like now & how i achieved that #903

Closed iMokhles closed 7 years ago

iMokhles commented 7 years ago

Here's my current theme

Login Page

Dashboard

DataTable, Actions etc

How i changed current AdminLTE theme by another admin panel theme to works well with every feature

How i setup Dashboard and Navigation Menu

  1. got another admin panel theme which has HTML version
  2. created new layout file and added all @yields as in the original layout file
  3. created new separated header.blade file ( which contains title and authenticated user info in my case it has ( user image with dropdown menu with other options ) put there new code and changed the title values to get the title values frombase.php config file
  4. my new theme has horizontal navigation menu class so i created new separated menu.blade file and put there the basic code from my new theme
  5. created new separated breadcrumb file called it breadcrumb.blade and put there my theme custom breadcrumb code [ this wasn't need as i did exactly the same as base package i reduplicate the same breadcrumb code in each header section header yeild
  6. created new separated dashboard.blade to extends the new layout

after that i was able to get an empty dashboard page and menu waiting my custom setup

Note:

you can replace original layout.blade styles links and scripts links ( so all you have to do editing current files and changing classes so you will get the same result.

How i setup Crud list ( hadn't time to finish edit and preview but it won't take a lot of time after finishing the list [dataTable] )

  1. replaced datatable css and js files with thee custom datatable css/js files from my new admin panel theme then put/replaced necessary class names ( i guess that's all ) i hadn't done a lot of stuff here
  2. list actions buttons inside buttons folder i have replaced create/delete/update/preview <a> tag classes ( and that's all )

that's what i have done and the result as you see above, it took almost 2H to achieve what i have done, hope we can see easier way to done changing themes..

lloy0076 commented 7 years ago

@OwenMelbz - IMHO this isn't a question but it's useful information to know.

@tabacitu - something like this could fit into a 'snippets' or maybe 'tutorial' section on the web-site itself (with the caveat that unless it's posted by an official team member and marked as such, it's not guaranteed to work etc etc). I thought there was such a place but I can't find it at the moment.

tabacitu commented 7 years ago

@iMokhles this is great, thank you for sharing it with everyone. I'm 100% sure someone will want to do this and your steps will help them.

I see you have a nice website and a well-crafted personal brand, what do you think about creating a medium profile or other type of blog, where you can post stuff? You could polish these steps a little bit and create your first article, and I'd be happy to include a link to it in the Backpack blog. I think it's a win-win:

What say you? giphy

iMokhles commented 7 years ago

Haha thanks I tried my best as my English isn't my first language. here's my medium post https://medium.com/p/how-to-change-laravel-backpack-admin-panel-theme-c52a6b28d66b

tabacitu commented 6 years ago

Awesome! Thank you @iMokhles - I'll promote this in this month's newsletter.

Cheers!