How to customize mail notification?

Hello, I am trying to customize the template of the reset password email. I have a ResetPasswordNotification with the toMail method that looks like this:

    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->line('Forgot password?')
            ->action('Click to reset', url($this->url), )
            ->line('Thank you for using '.env('PORTAL_FRONTEND_APP_NAME').'!');
    }

Then I customized it by making a view, with the desired template and css:

    public function toMail($notifiable)
    {
        return (new MailMessage)
            ->view('vendor.notifications.reset_password', ['url' => $this->url])
            ->subject('Portal Password Reset');
    }

It works, I get the email that matches my custom view. However, most of the styling does not work at all.

For example this is how it looks in the browser: https://snipboard.io/DVUnkL.jpg

And this is how it looks when I receive it: https://snipboard.io/WkiSFt.jpg

Here's the custom view:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <style>
         body {
         font-family: sans-serif;
         }
         .container {
         background-color: #e9f0f8;
         }
         h2 {
         /*color: #33353F;*/
         color: #016c30;
         }
         .card {
         background-color: white;
         margin: 20px auto;
         width: 600px;
         text-align: initial;
         padding: 20px;
         border-radius: 5px;
         }
         .reset-button {
         margin: 10px 0;
         background-color: rgb(149, 201, 63);
         color: rgb(255, 255, 255);
         /*border-color: rgb(149, 201, 63) rgb(149, 201, 63) rgb(121, 166, 47);*/
         border: none;
         cursor: pointer;
         padding: 10px 20px;
         font-weight: 400;
         line-height: 1.5;
         transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
         border-radius: 5px;
         text-decoration: none;
         }
         .text-center {
         text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="container text-center">
         <img src="{{asset('images/northstar-logo.png')}}" style="margin: 0 auto" height="75">
         <div class="card">
            <h2 class="text-center">{{env('PORTAL_FRONTEND_APP_NAME')}} Password Reset</h2>
            <p>
               <strong>Hello!</strong>
            </p>
            <p>
               You are receiving this email because we received a password reset request for your account.
            </p>
            <div class="text-center" style="margin: 30px 0;">
               <a class="reset-button" href="{{$url}}">Reset Password</a>
               <div style="margin-top: 10px"><small>This password reset link will expire in 60 minutes.</small></div>
            </div>
            <p>If you did not request a password reset, no further action is required.</p>
            <p>
               Regards,<br/>
               {{env('APP_AUTHOR')}}
            </p>
         </div>
      </div>
   </body>
</html>

How come do I receive it with that weird look, and how to fix it? Thanks.

Snapey

4 years ago

Level 122

most email clients require inline styles applied to every element.

stesvis

4 years ago

Level 1

@Snapey I've tried that too on some elements but didn't work. On the other hand, the default template displays perfectly, how do they do that?

Snapey

4 years ago

Level 122

@stesvis I'm not sure. I know it uses a library so a quick search of composer.lock reveals that it uses https://github.com/tijsverkoyen/CssToInlineStyles

Don't know if that helps.

Personally, I have implemented custom templates using MJML https://mjml.io/

tigusigalpa

3 years ago

Level 3

All Laravel notification mail templates belongs to usual mail ones. Mini guide to customize https://stackoverflow.com/a/75687801/724816

Please or to participate in this conversation.