Filament•2mo ago

How do I change, or remove the Logo from the Login page?

I have a logo on my panel that works perfectly. It is a white logo, but the custom theme has a dark header so it works. However, the login form has a white background and it looks odd. What I would like to do is have a different logo for the login pages, etc than the header, or simply remove the logo from the login/etc pages. How can I do this please? Currently i'm setting the logo image using the panel provider, which looks like it is being used everywhere on this panel. First screenshot shows logo w/ white text, second secreenshot shows logo w/ white text over white background. I need to replace or remove that logo.

7 Replies

awcodes•2mo ago

Since your logo isn’t dependent on light or dark mode you’re going to have to provide custom auth views to give it a different logo on those pages. https://filamentphp.com/docs/3.x/panels/users#customizing-the-authentication-features

Users - Panel Builder - Filament

CGM•2mo ago

Thank you @awcodes Is it somewhat safe to 'take over' the auth login view? I've put the contents of vendor/filament/filament/resources/views/pages/auth/login.blade.php into my own auth method's view: The only change is I've removed the outer <x-filament-panels::page.simple> with a simple <div> Full edit:

<div>
    @if (filament()->hasRegistration())
    <x-slot name="subheading">
        {{ __('filament-panels::pages/auth/login.actions.register.before') }}

        {{ $this->registerAction }}
    </x-slot>
@endif

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE, scopes: $this->getRenderHookScopes()) }}

<x-filament-panels::form id="form" wire:submit="authenticate">
    {{ $this->form }}

    <x-filament-panels::form.actions
        :actions="$this->getCachedFormActions()"
        :full-width="$this->hasFullWidthFormActions()"
    />
</x-filament-panels::form>

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_AFTER, scopes: $this->getRenderHookScopes()) }}
</div>

<div>
    @if (filament()->hasRegistration())
    <x-slot name="subheading">
        {{ __('filament-panels::pages/auth/login.actions.register.before') }}

        {{ $this->registerAction }}
    </x-slot>
@endif

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE, scopes: $this->getRenderHookScopes()) }}

<x-filament-panels::form id="form" wire:submit="authenticate">
    {{ $this->form }}

    <x-filament-panels::form.actions
        :actions="$this->getCachedFormActions()"
        :full-width="$this->hasFullWidthFormActions()"
    />
</x-filament-panels::form>

{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_AFTER, scopes: $this->getRenderHookScopes()) }}
</div>

Seems to do what I want. I'm just a bit nervus taking over that much code. Will this be tricky to keep synced with updates or is there a better way to do this?

awcodes•2mo ago

I normally wouldn’t recommend custom views, but I doubt that the auth views will change much in the future. Just keep them on the radar in case you need to modify them for breaking changes in the future.

CGM•2mo ago

Thank you @awcodes . Will add the 'when it hits the fan' comment to my Service Provider. 🙂

awcodes•2mo ago

If you’re truly worried about it though. I’m sure there’s way you can set up your svg with custom classes to change that particular fill or stroke color in the svg itself. Check the html code in the auth views. There’s probably a class on the body that could be used to target the svg to do it all from css. Or even vice versa. If it’s in the sidebar after logging in.

CGM•2mo ago

I got lazy and used a PNG. I think what you're suggesting is a much better idea.

awcodes•2mo ago

It would just be a custom filament theme at that point. Yea, a lot more difficult with a png. 😆

Gaming

Programming

How do I change, or remove the Logo from the Login page?