Custom Main Layout & Theme
I am using flux and have already created a layout. In general I am big on the design of the main template and like to create my own global layout like the app.blade.php. How can I make filament use my own layout or edit filaments. I am not finding what I am looking for in documentation. It only mentions editing themes, colors, etc or adding custom components. I want to build the whole thing from scratch or make it load empty except the main content ... UPDATE: I got my answer by reading the code while I was told it can't be done, just have to add the one line in panel pages:
protected static string $layout='layouts.web';50 Replies
If you are referring to filament as the use of panels, that’s just not going to be possible.
I guess you could override the panel views but that sounds like a huge headache since each filament update could break your views.
You mean not practical?
Yes.
It doesn't have a built in override? to look for a resource outside vendor
?
If you’re using the individual packages in livewire components out side of panels it might be more practical. But I still see there being complications.
Yeah thats whay I think I am gonna do I was trying to see which way to go
I l ive my flux template so much better than the one that comes with filament
There’s just not a 1:1 between filament components and flux components. Not saying it isn’t possible. But definitely not something I would want to take on.
I basically want benefit and features of filament]
but I don't wanna use its template
the global template layout
just components
I used a custom package called filament-jetstream
someguy already merged their user model to work nicely together
You could use custom pages in the panels scope. But even then I think there would be compatibility issues. But I could be wrong.
but custom pages will load the global theme
Is it even pure tailwind? I think it might be using bootstrap
It is a little unexpected for such abig flexible package to not allow editing the code html of layout
But yea. It sounds like you just need the individual filaments packages that all work outside panels. Panels is just an opinionated preset for using the packages together.
hard to believe haha
If I want a blank layout that doesnt have a header and left sidebar
I can't do that by removing those HTML codes?
Yea, but that is dependent on panels. You can do all that without panels.
If you wren't a core team member I would have thought you have no idea what you were talking about lol
I can use everything lese wihtout using panels right?
Nothing is stoping you from having a route that renders a livewire view that doesn’t use the panels. But it does require more setup and wiring
With Flux launched now do you guys plan to steer away from that?
Well thats what I have now
I have a full app without filament
might as well uninstall filament
but I want to start adding some pages to my app that use forexample filament tables
and I want them to load in my own design
and ideally I figured I would use the same logic to build my menu as the filament panels navigation menu
but I guess that last one is not gonna be possible
in a practical way
The design is based on the css, right? That easy enough to override.
Yeah but its not that I want to edit it I already loaded a super lightweigt flux design
Calib pretty much did all the js anc css and html it all works amazing
Unfortunately we can’t just use flux out of the box since it’s a paid product. But with the news from laracon eu, depending on what Caleb opens up maybe some of it could be brought in, but it’s not our main focus at the moment.
I want to use that and not have to write css to make filaments look that way
Basically panels is for all that and I need to load compponents seperately into my livewire?
That’s just kinda the nature of tailwind though, right.
After I build a new table it ads it to panels
how do I add it to my custome livewire blade
Sorry, not following.
is there there some @livewire('filament-table... I can do?
Tables aren’t livewire components. They are added to livewire components.
Can they be added to regular livewire components
Yes
and not filament livewire components
Yes
ok great I guess I need to figure that out
All of the packages in filament are separate and can be used without panels individually.
Ok awesome thanks I guess I was confused about the structure of filament.
But still think it should have allowed just editing the blade for the global layout
Maybe I'll look into it and propose on github haha
Filament panels is not filament. 😀 panels is just an all inclusive way that uses all the packages
ok thats a good way to put it
makes sense
But all the packages can be used with out panels.
ok perfect
so panels is pretty much the layout and navigation?
Yea. It is its own thing, but they can all be used independently.
Was just curious if I would miss out on anuything else by not using panels
if thats only it I guess it makes sense
to not be able to edit it
either use it or dont
that makes perfect sense
I like the way you guys went after v2
I had a bit of skewed idea about it based on previous versions
I previously used notifications independently and looked into all that
Yea, if you just want tables in your app you can just install the tables package and add it to livewire components. There is still default styling involved but you can change that with the fi classes in your apps css. https://filamentphp.com/docs/3.x/support/style-customization
Thank you so much for the support
Anytime
So I looked into it a bit
and the Filament\Pages\BasePage
function render
->layout($this->getLayout())
if I could have override the value of getLayout() it would do what I needed
or just have a vendor:publish feature for panel resources. Maybe something to consider down the road
But that’s specific to panels.
Sounds contradictory to me. You want to use panel views but you don’t really want panel views.
In my case I built my whole app on someones package stephenjude/filament-jetstream:
So my built in pages uses that layout
I was hoping I could just change them and not have to code all those pages manually
I am close to the end all my custom pages are done so I am looping back around to the base auth pages and they all use panels
Otherwise you are right. You solved my other problem but I realized why I had filament in the first place and in was using panels
I am a big jetstream user and filament plugins really appealed to me and the panels for the admin section so I buily the whole app on this package in the last few months while ignoring the filament features until now
I place to use panels for the super admin section
Sorry for a lot of text just figured I explain to you
to not be confusing
They can all work along side each other. You just have to keep the context in check.
But you also just can’t throw the css. Even if you hate it is still very relevant just because of how tailwind works.
Especially if you are cross rendering things inside and outside of panels.
Sounds like a complicated setup though. But I do think it’s all doable and not a limitation of filament or any of the dependencies.
Just matter of loading the right things when and if they are need for the route.
What exactly do you do at filament?
My friend I read over the code and figured it out, it had a very one line solution as I had anticipated from a experienced dev
All Ihad to do was add this line of code to my filament files
protected static string $layout='layouts.web';
That was it haha 🤦♂️Please update my profile with a filament advanced team badge thank you
Maybe I misunderstood the question. Sorry.