Add Image to Login Page

Please how can i add an image to the right alignment of the page
No description
Solution:
```php <x-filament-panels::page.simple> @if (filament()->hasRegistration()) <x-slot name="subheading"> {{ __('filament-panels::pages/auth/login.actions.register.before') }}...
Jump to solution
11 Replies
Matthew
Matthew6mo ago
custom css via theme or make your own view and cutomize it however you want
sadiqgoni13
sadiqgoni136mo ago
this is my custome theme
.fi-simple-main {
display: flex;
justify-content: space-between;
}

.fi-simple-main .image-container img {
max-width: 100%;
}

.auth-nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 12px !important;
margin-top: 9px !important;
margin-right: 20px !important;
margin-bottom: 2px !important;
gap: 9px !important;
}

.auth-nav-menu .links {
margin-right: 4px !important;
}

.fi-simple-layout .fi-simple-main {
margin-top: 8px !important;
}

.fi-simple-layout .fi-simple-main-ctn {
display: flex;
align-items: center;
justify-content: center;
}

.fi-simple-main .image-container {
width: 75%;
background-image: url('/public/images/zamfaralogo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}

.fi-simple-main .login-form {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.fi-simple-main {
display: flex;
justify-content: space-between;
}

.fi-simple-main .image-container img {
max-width: 100%;
}

.auth-nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 12px !important;
margin-top: 9px !important;
margin-right: 20px !important;
margin-bottom: 2px !important;
gap: 9px !important;
}

.auth-nav-menu .links {
margin-right: 4px !important;
}

.fi-simple-layout .fi-simple-main {
margin-top: 8px !important;
}

.fi-simple-layout .fi-simple-main-ctn {
display: flex;
align-items: center;
justify-content: center;
}

.fi-simple-main .image-container {
width: 75%;
background-image: url('/public/images/zamfaralogo.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}

.fi-simple-main .login-form {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
how do you customize the view
Matthew
Matthew6mo ago
Extend the Login class, and then override the $view vairable to point to your new view
sadiqgoni13
sadiqgoni136mo ago
great ,now this is my Login Custom
<?php

namespace App\Filament\Pages\Auth;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Toggle;
use Filament\Pages\Auth\Login as BaseLogin;
use Filament\Pages\Page;

class Login extends BaseLogin
{

protected static string $view = 'filament.pages.auth.login';

protected function getRememberFormComponent(): Component
{
return Toggle::make('remember')
->label(__('filament-panels::pages/auth/login.form.remember.label'));
}
}
<?php

namespace App\Filament\Pages\Auth;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\Toggle;
use Filament\Pages\Auth\Login as BaseLogin;
use Filament\Pages\Page;

class Login extends BaseLogin
{

protected static string $view = 'filament.pages.auth.login';

protected function getRememberFormComponent(): Component
{
return Toggle::make('remember')
->label(__('filament-panels::pages/auth/login.form.remember.label'));
}
}
The view
<x-filament-panels::page>

</x-filament-panels::page>
<x-filament-panels::page>

</x-filament-panels::page>
Matthew
Matthew6mo ago
nice, from now, you jsut build the page however you want
sadiqgoni13
sadiqgoni136mo ago
sorry just curious i dont know what to add inside the view
<x-filament-panels::page>

</x-filament-panels::page>
<x-filament-panels::page>

</x-filament-panels::page>
sadiqgoni13
sadiqgoni136mo ago
No description
Solution
Matthew
Matthew6mo ago
<x-filament-panels::page.simple>
@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('panels::auth.login.form.before') }}

<x-filament-panels::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('panels::auth.login.form.after') }}
</x-filament-panels::page.simple>
<x-filament-panels::page.simple>
@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('panels::auth.login.form.before') }}

<x-filament-panels::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('panels::auth.login.form.after') }}
</x-filament-panels::page.simple>
Matthew
Matthew6mo ago
This will give you the original login form From there you can customize however you want
sadiqgoni13
sadiqgoni136mo ago
Yesss let me customize it by adding the image
sadiqgoni13
sadiqgoni136mo ago
It works Thankyou
Want results from more Discord servers?
Add your server
More Posts