Modifying default page layout.
Hi!
I've been following Filament for a while, and am using it for the first time on a small website for a family business. It's incredibly easy to use.
I suspect either I'm overthinking this, or am missing something - and the answer might simply be "publish the filament-panels files and modify the index.blade.php file.". If so, please say.
I am not a particular fan of the large gap on a page between the heading and the tables added. I think I've narrowed it down to the
h-full class on the section element added to the page. Is there a way of removing this without needing to publish/edit the vendor views, and subsequently, is doing this change likely to result in a wonky layout that I may not have encountered yet?34 Replies
Create a theme and override with css. Don’t publish the views unless you absolutely have no choice.
So, I have a theme in order to change the colours used by the page, however, it seems that this isn't an option for removing classes on specific HTML elements on specific pages?
I’m your theme css you can target the element you need with the ‘.fi-‘ classes and override them.
And you don’t need the theme to change the colors in v3. 🙂
Ahhh - that's good to know. 😂 Its my Admin dashboard. I wanted to use the same branded components as the front-end uses. I have blade components for it.
I suspect my selector, then, would need to be
.fi-page > section and I'd need to remove the h-full class.Well you wouldn’t remove the h-full. You would assign it a new height.
That’s how the cascade works.
For context.
Not looking at the code, that selector may not be right but that’s the idea.
Wow. Something else is going on here. The default page and dashboard don’t have that spacing.
Do you have any plugins installed?
Hmm - this is how it came by default.
I followed the instructions into a fairly new Laravel project. The existing tailwind.config.js only specifies colours.
For plugins - filament-panels.
That's it - and the ones that it comes with by default.
Yea. Something else is going on here. Did you follow the theme docs. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
Yeah - those steps exactly. However, this is how it looked before I ran those steps. The colour/font change on the header is because I published and modified the blade files.
I can revert that if that isn't the correct approach, for sure.
I've reverted back now to before publishing those files, and creating a theme, and that is how it is laid out, still.
If you published the views. After deleting them make sure you clear laravels view cache too.
Just ran
php artisan view:clear - no change in the UI.Fair warning too, never publish views unless it is absolutely necessary.
If you remove the viteTheme() from your panel do you still have the issue.?
Yeah - that's fair. I tend to prefer not to - its a nightmare for maintenance with upgrading etc. I just couldn't clearly see a way to do that, and to use my own components in the header, etc.
Well, I had to remove that when I undid the custom theme changes, otherwise it would fail to load because of the now missing admin/theme.css file.
I don't have a
viteTheme call in there by default.Right but without the viteTheme modifier it will load filaments stylesheet by default.
Are you sure you’re on v3?
Run a ‘php artisan about’ and see what the version is.
Certain - one moment.
v3.0.5Oh sorry. That's Livewire 🙄 I haven't specified a
viteTheme in my AdminPanelProvider, but it seems to be respecting my tailwing.config.js.
At least in the colours used within the navigation menu, tables, and such. The page heading doesn't.Do you have a repo you can share? Something is definitely off. Hard to say without seeing the whole thing.
Hmm. I do, but its private. I could invite you as a collaborator, potentially?
That’s up to you. You’re of course free to remove me after I’ve been able to look at it.
Will probably be tomorrow before I can look at it though.
That's reasonable - its getting fairly late for me too. I will be around tomorrow, shall we pick this up then, if that's good with you?
No worries. I’ll be back in the office tomorrow so, my response might be staggered but feel free to add me and I’ll look at it as soon as I can.
I have invited you to the repository now. The branch is
add.filament . Thank you for your help on this. I am also working tomorrow, so won't be on until perhaps about 5:30PM UK time.No worries. I’m on US time so, keep that in mind. Lol.
No worries - you are helping me, so I am flexible to you.
I am about now, so whenever is good for you.
Sorry. Didn’t get a chance to pull it down today. I will as soon as I can though.
Not a problem at all, I'm thankful for your offer to help. I will be heading off for the night soon anyway. I'll catch you tomorrow, if that is OK?
Of course it’s ok. Cheers. Have a good night.
Good evening, I'll be around for a while now.
looks like there was a bug in the version of Filament you have installed.
Solution
run
composer update and you should be fine.Yeah - that seems to have sorted it. Thank you for helping. The odds of that 😂 just my luck.
I've revoked your access to that repository now - thanks again. Appreciate it.
No worries.
I’m not mad about it. 😂
Of course 🙂 Was just letting you know so you didn't have it littering your GitHub, and beyond that, just showing appreciation 😄