Filament: Change CSS Styles with Custom Theme

Answering a question about how to customize login/register page, but with a broader concept that you can apply to any other pages.

Docs:

[FarazSamapoor]

Short, practical, and on-point as always. Thank you, Povilas!

[blzspti]

I reverted back to Laravel Mix due to some issues with Vite and LiveWire.
How can I include the .css and .js file and actually make it work without having to use Vite?

In the Filament config .php file in app/providers/filament, using ->viteTheme('/path/to/files') is out of the question obviously due to Vite not being installed.

What could be the solution to this?

It's the 1st time trying to mess arround with FilamentPHP, there has to be a solution to this that doesn't include Vite.

[galegobr]

Hello, could you give us an easy example of how to change the Filament registration to use the Wizard?

[gotthold]

Thank you very much for the tutorial.
When using npm run build, the assets in public\build are created. But after registering with ->viteTheme() my theme references to assets at the vite server. But for prod env I don't need the vite server. What have I to change, so that the template uses the builded assets? In your video you didn't use npm run dev for starting the vite server, but it works also. What am I doing wrong?

[learntechbasics]

Nice bunch of tips. Can you also please try to cover topics like custom field, custom widget, custom page, custom component and using it in a page etc?

[danielmastrodomenico]

How to create a page that isn't crud, it's just editing? Example a profile edit page

[adrian]

Thank you Povilas.

How about create theme based on environment.

For example, production have their own style, staging have different style. To help user to understand what environment are the in while using the system.

[learntechbasics]

Example Request : how can we replace the filament login page with a new page altogether? (a new login page with a responsive 2 column layout, only the login part is shown on mobile screens and both columns are shown on larger screens)

Maybe a complete new layout for the login screen and navigate to this appropriately when session is not active etc (typical auth / session handling)


Most of them would like to customise the look of the pages and hence starting with login screen (and register screen).