⚠ I forgot to include 2 lines in the tailwind config but it's been added to the code. How to build a Laravel Admin Panel. Built with Laravel 9, Filament, Spatie's Laravel-Permissions, Jetstream, Livewire, and Tailwind CSS. In this part, we use the Filament documentation to add custom color theme. Project name will be Coder's Filament Admin Panel. We will only be using the default authentication setup with Laravel, Jetstream, and Sanctum. =================================================== 📓 Video Chapters: 0:00 Laravel Filament Admin Panel: [9] Custom Themes =================================================== ✔ Click to subscribe: ruclips.net/channel/UCGRi3eupIN5rOP_tDLxLs2w =================================================== 🎦 Click to catch up on the playlist: ruclips.net/p/PLW-lITXBwAP-E0Lb627NzOgQx65Z_Wumv =================================================== ✔ GITHUB REPO: github.com/designatedcoder/coders_filament_admin_panel =================================================== 🔗 Documentation: Filament: filamentphp.com/ Spatie's Laravel-Permission: spatie.be/docs/laravel-permission/v5/introduction HeroIcons: heroicons.com/ =================================================== //FOLLOW ME: ○ Twitter: twitter.com/DezignatedCoder //TOOLS & SERVICES I USE: ○ Get $100 or more free credit for 60 days from DigitalOcean: m.do.co/c/793677d3bf86 DISCLAIMER: Links included in this description might be affiliate or referral links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week! #designatedcoder #codersfilamentadminpanel #filamentadminpanel
Its 2024 and this playlist was very informative. I had to read the documentation along with it because Filament v2 and v3 are not exactly the same but it was quite insightful. Thanks for the hard work.
Hey there @essentialfertilizer5210. Thanks for watching. Welcome to the channel! 😎 Thanks for that and I'm glad you were able to use it as intended. The docs are always important as they are the most current. Appreciate the comment.
Watched and implemented all nine videos without any trouble or confusion. each and every content were well thought and very well articulated!! I appreciate your efforts. Keep doing....
Hey there Solademi Timileyin. Thanks for watching. Welcome to the channel! 😎 I'm not really sure, but it may be that either something is not compiling or you're missing something. The link to the repo is in the description and as a pinned comment in this video so you can match it up with mine. Hope this helps and good luck to you.
Sadly is not working for me , i mean , in the docs says one thing , here another , didnt work as the docs said , works using the pushMeta but the colors didn't change. All this thing with vite is so confusing and in some point messed up a lot, also , i have to make a lot of changes if i wanna separate laravel core app and the public directory.
Hey there Sebastian Perez. Thanks for watching. Welcome to the channel! 😎 I'm not sure why it's not working for you. The link to the repo is in the pinned comments so maybe taking a look at the code will help. Double check and make sure you didn't miss a step as I first did. Push meta only helps with adding meta data to the pages so it shouldn't have any thing to do with the colors. Vite is not bad and I'll be using it more in the future since it seems to not run as hard on my laptop as Mix did. Either way it's a good opportunity to learn something new.
Hey there @marcoantonio7634. Thanks for watching. Welcome to the channel! 😎 Are you sure you followed all the steps? Have you tried restarting the server?
Hey there @relaxyourdays. Thanks for watching. Welcome to the channel! 😎 It's been about 2 years since I've used Filament and so not sure I'd be the best help with this. The new Filament docs have a color that doesn't agree with my eyesight and even though I've changed it, it's hard for me to read. If it's just the topbar you want to change I believe you can publish the Filament blade files and can find that component to change it to whatever you want. You will have to look either from the terminal or in the docs to find the command for that. With packages it's as easy as php artisan vendor:publish and you get a list of all available configs you can publish. Your mileage may vary and worse come to worse you can always reach out to the Filament team for a better solution. Hope this helps and good luck to you!
Hey there Paul Rijke. Thanks for watching. Welcome to the channel! 😎 I think you might be able to do something like what's in the tailiwind docs: module.exports = { theme: { colors: { primary: '#5c6ac4', secondary: '#ecc94b', // ... } } } I'm not really sure how to specify it for certain but maybe it'll work. Good luck to you.
Hey there, Umair Malik! you can follow the tailwind docs for that. You would do something like this: tailwindcss.com/docs/customizing-colors#adding-additional-colors
Hey there TatsProduction2k14. Thanks for watching. Welcome to the channel! 😎 I've got something coming up in the next couple of days that everyone can submit suggestions to. Keep an eye out for it.
This completely breaks the layout of my application. Not sure where I went wrong. I went over this and part 6 twice. EDIT: HMM, I don't have a postcss.config.js file anywhere. I manually added it and added the code to it below but still it's broken. module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
Hey there George Young. Thanks for watching. Welcome to the channel! 😎 That's strange. Can you clarify what the broken looks like? Is postcss installed? How did you create the project? I created mine with with the --jet flag since I have laravel installed globally on my system. Double check the package.json and composer.json of my repo to match it up. The link is in the description of this vid as well as the pinned comment.
@@DesignatedCoder The custom logo I changed out as well as all the icons are huge on the screen. It scrolls forever, but it does show the menu links to the various resources I created. It's kinda like when you break a WordPress theme and it only shows stuff from the database without any CSS applied. I created the project in Laravel 9.5.x locally on my Windows 11 machine. Come to think of it, I don't think I installed Jetstream. I'm really new to Laravel, so I don't know what Postcss is. I looked it up and installed it, however it didn't seem to install a postcss file in the root as expected.
Hmm, ok. If you use the composer create-project laravel/laravel [name of your project], then you won't have a bunch of what I have. I have installed laravel globally so that I can have all of the things I don't want to re-invent the wheel for such as authentication. Jetstream just scaffolds that out using fortify, sanctum, some pages, etc. Once you get more into Laravel you'll start to develop your own preferences. Did you install Livewire? I don't remember when laravel started using vite as the default compilation engine. Does your project have that or laravel mix? I'll try to help as best I can.
@@DesignatedCoder Thank you so much for your replies. Your setup sounds intriguing. I've been thinking about how I might do something similar, so I can install a bunch of packages to try out, but have a base to start with. This is my first Laravel project. Yes, my install is using Vite. I suspect that has something to do with it.
If you want to customize the footer you would have to activate it in the config file and create a component for it. Check out the docs: filamentphp.com/docs/2.x/admin/pages/getting-started#customization
Hello. Just watched the hole video serie. Simply amazing! 😆 Congrats for this content... 🎊🎊🎊 If you have plans to follow this sequence may you show us how to make the routine to restore the TRASHED USERS ? If you head to trashed users, and click it up, you will take a 404 page. Thks
Hey there Davis Ferreira de Lima. Thanks for watching. Welcome to the channel! 😎 Not really sure why it's going to a different page. We set up users to show trashed within the table. You can locate them them through that filtered dropdown, head to their edit page and restore or force delete them from there. Keep in mind I set it up so that only the admin and superadmin have that ability. Hope this helps and good luck to you,
Hey there, ahmed sunil! I've said multiple times that I won't be adding extra features to this series to make it accessible for everyone to use and not specific projects. I will do something in the future with many of the packages you guys have been asking to see but it'll be awhile before I get to that.
Hey there Miguel Urtado. Thanks for watching. Welcome to the channel! 😎 Have you tried doing something like this: primary: '#ff0099' You can experiment but I think you should keep the same naming conventions like primary, danger etc since Filament seems to recognize those and then use the hex for them. Hope this helps and good luck to you.
Hey there @pansurna7. Thanks for watching. Welcome to the channel! 😎 It's been nearly 4 months since I looked a Filament or even looked at this project. I did navigation at some point in this series but not sure where. Here's the docs showing how to group them in Filament 3. filamentphp.com/docs/3.x/panels/navigation#grouping-navigation-items Hope this helps and good luck to you!
Also create manually a file called 'postcss.config.js' under project directory and add this: module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
![Laravel Filament Admin Panel: [1] Project Setup](http://i.ytimg.com/vi/rK-nV-8_7vw/mqdefault.jpg)
![Laravel Filament Admin Panel: [1] Project Setup](/img/tr.png)
![Laravel Filament Admin Panel: [7] Authorization With Policies](http://i.ytimg.com/vi/fednhdvJlzU/mqdefault.jpg)
![Filament Admin: Simple TALL CRUD in Minutes [REVIEW]](http://i.ytimg.com/vi/JAHYfq07uiU/mqdefault.jpg)
⚠ I forgot to include 2 lines in the tailwind config but it's been added to the code.
How to build a Laravel Admin Panel. Built with Laravel 9, Filament, Spatie's Laravel-Permissions, Jetstream, Livewire, and Tailwind CSS.
In this part, we use the Filament documentation to add custom color theme.
Project name will be Coder's Filament Admin Panel.
We will only be using the default authentication setup with Laravel, Jetstream, and Sanctum.
===================================================
📓 Video Chapters:
0:00 Laravel Filament Admin Panel: [9] Custom Themes
===================================================
✔ Click to subscribe: ruclips.net/channel/UCGRi3eupIN5rOP_tDLxLs2w
===================================================
🎦 Click to catch up on the playlist: ruclips.net/p/PLW-lITXBwAP-E0Lb627NzOgQx65Z_Wumv
===================================================
✔ GITHUB REPO: github.com/designatedcoder/coders_filament_admin_panel
===================================================
🔗 Documentation:
Filament: filamentphp.com/
Spatie's Laravel-Permission: spatie.be/docs/laravel-permission/v5/introduction
HeroIcons: heroicons.com/
===================================================
//FOLLOW ME:
○ Twitter: twitter.com/DezignatedCoder
//TOOLS & SERVICES I USE:
○ Get $100 or more free credit for 60 days from DigitalOcean: m.do.co/c/793677d3bf86
DISCLAIMER: Links included in this description might be affiliate or referral links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
#designatedcoder #codersfilamentadminpanel #filamentadminpanel
Its 2024 and this playlist was very informative. I had to read the documentation along with it because Filament v2 and v3 are not exactly the same but it was quite insightful. Thanks for the hard work.
Hey there @essentialfertilizer5210. Thanks for watching. Welcome to the channel! 😎
Thanks for that and I'm glad you were able to use it as intended. The docs are always important as they are the most current. Appreciate the comment.
Very helpful playlist. Wishing success to channel.
This was an excellent series to watch. I'm absolutely hooked and I can't wait for filament v3
Hey there, @Tuto1902! Thanks
Yay! I reached the end of this playlist. Thank you very much. Hoping to see more content from you. 🥳
Hey there Marx Soguilon. Thanks for watching. Welcome to the channel! 😎 I'm working on it.
Watched and implemented all nine videos without any trouble or confusion. each and every content were well thought and very well articulated!! I appreciate your efforts. Keep doing....
Hey there Justin James. Thanks for watching. Welcome to the channel! 😎 Very kind of you to say and I'm glad you were able to follow along thoroughly.
This series is extremely extra, May God bless you. I really learned a lot
Hey there @tradewithtony. Thanks for watching. Welcome to the channel! 😎 Glad you've found some value in the series.
First Playlist that I implemented without any trouble and understood everything so well. You are the best ! thanks a lot.
Hey there @murobakuridze950. Thanks for watching. Welcome to the channel! 😎 Glad you were able to follow along!
thank you for the filament series, i have now completed building the admin panel for my quiz app.
Hey there Khairin Chan. Thanks for watching. Welcome to the channel! 😎 Glad it worked out for you!
Many thanks for another excellent tutorial.
Hey there raf almo. Thanks for watching. Welcome to the channel! 😎
Awesome series, well done \m/
Hey there Orchard. Thanks for watching. Welcome to the channel! 😎
Changing primary color or any other colors does not make any changes on my website... What could be wrong?
Hey there Solademi Timileyin. Thanks for watching. Welcome to the channel! 😎 I'm not really sure, but it may be that either something is not compiling or you're missing something. The link to the repo is in the description and as a pinned comment in this video so you can match it up with mine. Hope this helps and good luck to you.
謝謝！This video helps a lot.
Hey there Chi Lin Lin. Thanks for watching. Welcome to the channel! 😎 That's very generous of you and I'm glad you found value in it.
hi sir can you show me about 's3' because I'm config it is not working with filament
Thanks a lot! Aprendi mucho!
Sadly is not working for me , i mean , in the docs says one thing , here another , didnt work as the docs said , works using the pushMeta but the colors didn't change.
All this thing with vite is so confusing and in some point messed up a lot, also , i have to make a lot of changes if i wanna separate laravel core app and the public directory.
Hey there Sebastian Perez. Thanks for watching. Welcome to the channel! 😎 I'm not sure why it's not working for you. The link to the repo is in the pinned comments so maybe taking a look at the code will help. Double check and make sure you didn't miss a step as I first did. Push meta only helps with adding meta data to the pages so it shouldn't have any thing to do with the colors. Vite is not bad and I'll be using it more in the future since it seems to not run as hard on my laptop as Mix did. Either way it's a good opportunity to learn something new.
Thanks you🤗
Mine says, unable to locate /resources/css/filament.css.
Hey there @marcoantonio7634. Thanks for watching. Welcome to the channel! 😎 Are you sure you followed all the steps? Have you tried restarting the server?
file serviceProviderfilament not appear in my project how can add it
It's been about a year but I think we did it when setting up the custom menu.
@@DesignatedCoder thanks for speed in reply 🥰🥰
how to change topbar background color?
Hey there @relaxyourdays. Thanks for watching. Welcome to the channel! 😎
It's been about 2 years since I've used Filament and so not sure I'd be the best help with this. The new Filament docs have a color that doesn't agree with my eyesight and even though I've changed it, it's hard for me to read.
If it's just the topbar you want to change I believe you can publish the Filament blade files and can find that component to change it to whatever you want. You will have to look either from the terminal or in the docs to find the command for that. With packages it's as easy as php artisan vendor:publish and you get a list of all available configs you can publish. Your mileage may vary and worse come to worse you can always reach out to the Filament team for a better solution.
Hope this helps and good luck to you!
Nicely done... Can you also make it to use a different shade of blue for primary? To match the logo blue for example?
Hey there Paul Rijke. Thanks for watching. Welcome to the channel! 😎 I think you might be able to do something like what's in the tailiwind docs:
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}
I'm not really sure how to specify it for certain but maybe it'll work. Good luck to you.
@@DesignatedCoder I ended up with this (it works)
const colors = require('tailwindcss/colors')
const custom = {
espunda: {
'50': '#f2f8fd',
'100': '#e3f0fb',
'200': '#c1e1f6',
'300': '#8bc9ee',
'400': '#4cade4',
'500': '#2592d0',
'600': '#1775b2',
'700': '#145e90',
'800': '#145078',
'900': '#164364',
}
}
module.exports = {
content: [
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
],
darkMode: 'class',
theme: {
extend: {
colors: {
danger: colors.rose,
primary: custom.espunda,
success: colors.green,
warning: colors.yellow,
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
Thanks for contributing that Paul Rijke! 🙂
Respect
Very good.
No worries, @joaopoliceno8844. Glad you're enjoying the channel! 😎
can we give custom color like '#030303' if yes then how ??? thanks in advance
Hey there, Umair Malik! you can follow the tailwind docs for that. You would do something like this:
tailwindcss.com/docs/customizing-colors#adding-additional-colors
@@DesignatedCoder thanks its work for me!
Please do a tutorial on filament using socialite to login using google account.
Hey there TatsProduction2k14. Thanks for watching. Welcome to the channel! 😎 I've got something coming up in the next couple of days that everyone can submit suggestions to. Keep an eye out for it.
😍😍😍😍😍😍😍😍😍😍😍😍
please how to change brand logo ?
Hey there @abkdev770. Thanks for watching. Welcome to the channel! 😎 you can change it in the brand view
This completely breaks the layout of my application. Not sure where I went wrong. I went over this and part 6 twice. EDIT: HMM, I don't have a postcss.config.js file anywhere. I manually added it and added the code to it below but still it's broken.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Hey there George Young. Thanks for watching. Welcome to the channel! 😎 That's strange. Can you clarify what the broken looks like? Is postcss installed? How did you create the project? I created mine with with the --jet flag since I have laravel installed globally on my system. Double check the package.json and composer.json of my repo to match it up. The link is in the description of this vid as well as the pinned comment.
@@DesignatedCoder The custom logo I changed out as well as all the icons are huge on the screen. It scrolls forever, but it does show the menu links to the various resources I created. It's kinda like when you break a WordPress theme and it only shows stuff from the database without any CSS applied. I created the project in Laravel 9.5.x locally on my Windows 11 machine. Come to think of it, I don't think I installed Jetstream. I'm really new to Laravel, so I don't know what Postcss is. I looked it up and installed it, however it didn't seem to install a postcss file in the root as expected.
Hmm, ok. If you use the composer create-project laravel/laravel [name of your project], then you won't have a bunch of what I have. I have installed laravel globally so that I can have all of the things I don't want to re-invent the wheel for such as authentication. Jetstream just scaffolds that out using fortify, sanctum, some pages, etc. Once you get more into Laravel you'll start to develop your own preferences. Did you install Livewire? I don't remember when laravel started using vite as the default compilation engine. Does your project have that or laravel mix? I'll try to help as best I can.
@@DesignatedCoder Thank you so much for your replies. Your setup sounds intriguing. I've been thinking about how I might do something similar, so I can install a bunch of packages to try out, but have a base to start with. This is my first Laravel project. Yes, my install is using Vite. I suspect that has something to do with it.
How change footer??? veryyyyyyyyyy thaaaannnnks
If you want to customize the footer you would have to activate it in the config file and create a component for it. Check out the docs:
filamentphp.com/docs/2.x/admin/pages/getting-started#customization
Hello.
Just watched the hole video serie. Simply amazing! 😆
Congrats for this content... 🎊🎊🎊
If you have plans to follow this sequence may you show us how to make the routine to restore the TRASHED USERS ?
If you head to trashed users, and click it up, you will take a 404 page.
Thks
Hey there Davis Ferreira de Lima. Thanks for watching. Welcome to the channel! 😎 Not really sure why it's going to a different page. We set up users to show trashed within the table. You can locate them them through that filtered dropdown, head to their edit page and restore or force delete them from there. Keep in mind I set it up so that only the admin and superadmin have that ability. Hope this helps and good luck to you,
Please do Spatie Activity Log, Spatie Settings
Hey there, ahmed sunil! I've said multiple times that I won't be adding extra features to this series to make it accessible for everyone to use and not specific projects. I will do something in the future with many of the packages you guys have been asking to see but it'll be awhile before I get to that.
Very well..! How use one custom color Hexa Decimal Ex: #ff0099
Hey there Miguel Urtado. Thanks for watching. Welcome to the channel! 😎 Have you tried doing something like this:
primary: '#ff0099'
You can experiment but I think you should keep the same naming conventions like primary, danger etc since Filament seems to recognize those and then use the hex for them. Hope this helps and good luck to you.
please next menu and submenu management
Hey there @pansurna7. Thanks for watching. Welcome to the channel! 😎 It's been nearly 4 months since I looked a Filament or even looked at this project. I did navigation at some point in this series but not sure where. Here's the docs showing how to group them in Filament 3.
filamentphp.com/docs/3.x/panels/navigation#grouping-navigation-items
Hope this helps and good luck to you!
Also create manually a file called 'postcss.config.js' under project directory and add this:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
hi can i know what's this for?
@@khairinchan6614 As far as I remember is for the styling of the dashboard (colors, dark mode etc)
Hi.
hello