Height of the logo when logged in?

[ruelluna]

Package

Panel builder

Package Version

^3.2

How can we help you?

Can we adjust the height of the logo in the dashboard (when logged)?

Or can we just have a dedicated function to load a different logo in the dashboard?

See screenshots below.

[leandrocfe]

->brandLogoHeight('2rem');

https://filamentphp.com/docs/3.x/panels/themes/#adding-a-logo

[xV4L3x]

No solution for setting different heights for login logo and dashboard logo?

[davidtriminio]

You can create a custom view and then add the logo in the following way

return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->colors([
                'primary' => Color::Blue,
            ])
            ->brandLogo(fn () => view('filament.admin.logo'))
            ->darkModeBrandLogo(fn () => view('filament.admin.logo-dark'))
            ->brandLogoHeight('40px')

And something like this in the view:

<div class="flex items-center space-x-4">
    <img src="{{ asset('imagen/logo-admin.png') }}" alt="logo claro" class="mr-5 h-10 w-10">
    <h1 class="text-black font-bold text-2xl ml-2 mr-2">{!!env('APP_NAME')!!}</h1>
</div>

[Jubeki]

To use different sizes on different screens, you can use tailwindcss to detect classes of the parents and only then apply styles.

For example: after login the header has a class of .fi-sidebar-header, where as on the simple page login the header has a class of .fi-simple-header.

Given that you can write the following in a view (e.g. resources/views/filament/brand-logo.blade.php:

<div>
    <svg class="[.fi-sidebar-header_&]:h-14 [.fi-simple-header_&]:h-20"></svg>
</div>

and then register it in the PanelProvider as follows:

$panel
    ->brandLogo(fn() => view('filament/brand-logo'))
    ->brandLogoHeight('auto')

Important

You need to have a custom theme already working, as the classes are not generated otherwise.
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

this can also be used for different logos on different screens:

<div>
    <svg class="[.fi-sidebar-header_&]:hidden [.fi-simple-header_&]:block"></svg>
    <svg class="[.fi-sidebar-header_&]:block [.fi-simple-header_&]:hidden"></svg>
</div>