0

I'm following this guide to change the default email stlying. I tried to change the stylesheet inside resources/views/mail/html/themes/default.css but it doesn't work. I'm not creating any custom notification for auth emails.

I tried to change the content of the blade file located in the following directory, it is showing updated content, but I don't know from where it is applying to style the email.

resources/views/vendor/notifications/email.blade.php
Mohsin Ali
  • 360
  • 2
  • 12
  • It's been a while since i've done this. Have you tried `php artisan view:clear`? – lordisp Apr 01 '22 at 17:51
  • yes I tried but it didn't work – Mohsin Ali Apr 01 '22 at 18:03
  • are you sure about the directory structure and not `resources/views/VENDOR/mail/html/themes/default.css`? You may verify if in the browsers `dev-tools` if the correct `default.css` file is loaded and holds the expected changed content – lordisp Apr 01 '22 at 18:46
  • yes I tried in browser, it is showing updated verison but in mail it is not applying – Mohsin Ali Apr 01 '22 at 19:47

2 Answers2

2

Customizing Notifications with markdown

create a copy of the default.css in resources/views/vendor/mail/html/themes. Something like custom.css

If you don't have vendor directory, consider to publish the laravel-mail tag:

php artisan vendor:publish --tag=laravel-mail

In your Notification change the css with the theme method:

public function toMail($notifiable)
{
    return (new MailMessage)
        ->theme('custom')
        ->subject('Demo Subject')
        ->markdown('mail.invoice.paid', ['url' => $url]);
}

Customizing auth mails

While generating the auth using make:auth, it will generate the required views in the resources/view/auth folder.

The files will have the corresponding layouts tag

<x-guest-layout>

  {{-- some content --}}

</x-guest-layout>
...

You can customize the guest-layout from the resources/views/layouts/guest.blade.php or create a new custom.blade.php file and change the tags in your mail templates:

<x-custom-layout>

  {{-- some content --}}

</x-custom-layout>
lordisp
  • 634
  • 9
  • 21
  • I don't want to create separate notifications. I just want to use the built-in auth mails but only customize the styling. – Mohsin Ali Apr 01 '22 at 19:55
  • well, in this case you will find the templates in `resources/views/auth`. Open one the templates and check the layout tags `...`. Unter `resources/views/layouts/guest.blade.php` you'll find the guest layout and it's css file. The `default.css` does not apply on the `auth mails`. – lordisp Apr 01 '22 at 20:04
  • I didn't see these files on my side. I'm using my own views for auth pages for front end. There are no components available – Mohsin Ali Apr 01 '22 at 20:11
  • I don't want to customize auth pages styling. I am talking about auth emails – Mohsin Ali Apr 01 '22 at 20:26
0

Laravel does not actually use any email template, instead it builds the email directly using MailMessage like this

return (new MailMessage)
            ->subject(Lang::get('Reset Password Notification'))
            ->line(Lang::get('You are receiving this email because we received a password reset request for your account.'))
            ->action(Lang::get('Reset Password'), $url)
            ->line(Lang::get('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.'.config('auth.defaults.passwords').'.expire')]))
            ->line(Lang::get('If you did not request a password reset, no further action is required.'));

So to override this, in any of your Service Providers, I will go with AuthServiceProvider, add the following:

// use Illuminate\Auth\Notifications\ResetPassword;
// ...


ResetPassword::toMailUsing(function ($notifiable, $token) {
            $email = $notifiable->getEmailForPasswordReset();

            
            $emailResetUrl = url(route('password.reset', [
                    'token' => $token,
                    'email' => $email,
                ], false));
            
            // this is where you generate your own email
            return (new MailMessage)
                ->subject(Lang::get('Reset Password Notification'))
                ->view('email.auth.reset-password', [
                    'url' => $emailResetUrl
                ]);
        });

Or you learn more from this article, https://medium.com/@josephajibodu/how-to-customize-laravel-fortify-authentication-email-templates-21b6a315e279

Joseph Ajibodu
  • 1,093
  • 10
  • 14