Share a template of Pretty Email !

Littlegolden

As from Pretty Mail v0.2.0，$baseUrl is deprecated, please use $url->to('forum')->base() instead.

🇺🇸

Hello everyone! Let me share with you a great email template of "Flarum/mentions Post Mentioned Email". This time I shared the description in Chinese and English, the code and the effect of the template is at the bottom of this floor.

Open source is not easy, please do not delete "Them from: Halo" in the lower right corner of the mail.

This template comes from the Halo blog system, ❤thanks to the original developer Ryan Wang.
On the basis of the original template, I improved the adaptation of Flarum and manually translated it into Chinese(中文), English, and Japanese(日本語). You can use it as needed.

⚠Notice:

The mobile email client cannot display the mail style because some mail service providers will remove the declared style tag when you use mobile read the e-mail. Therefore, I used the inline style.
The declared <style> tags are still retained in the code I posted. This is because I need to write a comment to make it clearer how the style works. You can remove it at deployment time.

📌Tips：

The default card title background color is the theme color of the forum. You can modify it in the CSS file.

👑 In addition to the Flarum team:

I found that Flarum's original mechanism is that the activation email for user registration is sent in the user's language. It would be better if such replies and mentioned posts can also be sent in the user's language.
My current forum has users in three languages, so I have to write all three languages in the current email template. This means that each user receives a single message in a trilingual version. . . Causes an email to show too much content. .

🇨🇳

大家好，我给大家分享一个很好看的邮件模板，代码和效果图在最后面。

开源不易！请不要删除邮件右下角 “主题来自：Halo” 这句话！

这个模板来自Halo博客系统，❤感谢[开发者王哥](Ryan Wang)。
我在原来的模板基础上，改进了对Flarum的适配，并且人工翻译成了中文、英文、日文三种版本，大家可以按需使用。

⚠注意：

由于有些邮件服务商会去除声明的style标签，导致手机邮箱客户端无法展示邮件样式。因此，我使用了内联样式（也就是所有样式都写在body的行内）。
我贴出的代码中依然保留了声明的style标签，这是因为我需要写一写注释让大家更清楚地理解样式是怎么起作用的。您可以在部署时自行去掉。

📌Tips：

默认卡片标题背景色为论坛的主题色，您可以在CSS文件中自行修改。

👑 另外说给Flarum团队的话：

我发现Flarum原本就是用户注册的激活邮件按照用户的语言发送的，如果这种回帖、被提及的的帖子也能按照用户的语言发送就更好了。
我现在的论坛是有三种语言的用户，所以我不得已在当前的邮件模板里都把三种语言写进去。这样意味着每一位用户收到的单个邮件都是三语版本的。。。导致一封邮件显示的内容太多了。。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
			body {
				font-family: 'Open Sans', sans-serif;
				background: white;
				color: #426799;
				margin: 0;
				padding: 0;
			}
			.content {
				box-sizing: border-box;
				width: 100%;
				max-width: 600px;
				margin: 0 auto;
				padding: 10px 20px;
			}
			.header-tips {
				border-bottom: 1px solid #e8ecf3;
				background: #e8ecf3;
			}
			a {
				/* you can change background color to this them default color #3798e8  */
				color: {{ $settings->get('theme_primary_color') }};	
				text-decoration: none;
			}
			
		.card-container{
			width:100%;
			max-width:720px;
			text-align:left;
			margin:0 auto;
			padding-top:20px;
			padding-bottom:20px;
		}
		.card-body{
			border-radius:5px;
			border:1px solid #eee;
			overflow:hidden;
		}
		h1.card-title{
			/* you can change background color to this them default color #3798e8  */
			color:#fff;
			background:{{ $settings->get('theme_primary_color') }};
			line-height:70px;
			font-size:24px;
			font-weight:normal;
			padding-left:40px;
			margin:0;
		}
		.card-postContent{
			background:#fff;
			padding:20px 32px 40px;
			/* ↓ p */
			color:#6e6e6e;
			font-size:13px;
			line-height:24px;
		}
		.card-replyContent{
			color:#6e6e6e;
			padding:10px 20px;
			background:#f8f8f8;
			margin:0;
		}
		.card-replyContent, .card-replyContent p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /* p tags only display 2 lines */
			overflow: hidden;
			max-height: 70px; /* div max height, than hide */
		}
		.card-footer{
			color:#6e6e6e;
			text-align:right;
			padding:0 32px;
			font-size:13px;
			line-height:24px;
		}
	</style>
	
</head>
</html>
<body style="font-family: 'Open Sans', sans-serif; background: white; color: #426799; margin: 0; padding: 0;">
	<div class="header-tips" style="border-bottom: 1px solid #e8ecf3; background: #e8ecf3;">
		<div class="content" style="box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; padding: 10px 20px;">
			<p>Tips: This email is available in English / 简体中文 / 日本語サポート.</p>
		</div>
	</div>
	
<!-- ZH -->
<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
	<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
		<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; line-height:70px; font-size:24px; font-weight:normal; padding-left:40px; margin:0;">
			您在 CSUR 社区上的发言有回复啦！
		</h1>
		<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
			<p>{!! $user->display_name !!}, 您好!</p>
			<p>您在<a href="{!! app()->url() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">《{!! $blueprint->post->discussion->title !!}》(#{!! $blueprint->post->number !!})楼</a>的发言:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->post->formatContent() !!}
			</div>
			<p>{!! $blueprint->reply->user->username !!} 回复了您:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->reply->formatContent() !!}
			</div>
			<p>您可以点击
				<a href="{!! app()->url() !!}/d/{!! $blueprint->reply->discussion_id !!}/{!! $blueprint->reply->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">查看完整内容</a>
			</p>
			<p>欢迎再度光临
				<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSUR 社区</a>
			</p>

			<p>(此邮件由系统自动发出, 请勿回复。如有打扰，请见谅。)</p>
			<p></p>
			<p></p>
		</div>
		<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
			邮件发自：<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSUR 社区</a>
			<br>
			主题：<a href="https://github.com/halo-dev/halo" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Halo</a>
		</p>
	</div>
</div>

<!-- EN -->
<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
	<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
		<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; line-height:70px; font-size:24px; font-weight:normal; padding-left:40px; margin:0;">
			Someone replied to your post！
		</h1>
		<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
			<p>
				Hey, {!! $user->display_name !!}!
			</p>
			<p>Your post in<a href="{!! app()->url() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">《{!! $blueprint->post->discussion->title !!}》(#{!! $blueprint->post->number !!})</a>:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->post->formatContent() !!}
			</div>
			<p>{!! $blueprint->reply->user->username !!} replied to you:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->reply->formatContent() !!}
			</div>
			<p>You can
				<a href="{!! app()->url() !!}/d/{!! $blueprint->reply->discussion_id !!}/{!! $blueprint->reply->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">View the Full Reply</a>
			</p>
			<p>Welcome to 
				<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSUR Community</a> again
			</p>

			<p>(This message was sent automatically by the system. Please do not reply. Excuse me for any interruptions.)</p>
			<p></p>
			<p></p>
		</div>
		<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
			Mail from：<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSUR Community</a>
			<br>
			Them from：<a href="https://github.com/halo-dev/halo" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Halo</a>
		</p>
	</div>
</div>

<!-- JA -->
	<div class="card-container" style="width:100%; max-width:720px; text-align:left; margin:0 auto; padding-top:20px; padding-bottom:20px;">
		<div class="card-body" style="border-radius:5px; border:1px solid #eee; overflow:hidden;">
			<h1 class="card-title" style="color:#fff; background:{{ $settings->get('theme_primary_color') }}; line-height:70px; font-size:24px; font-weight:normal; padding-left:40px; margin:0;">
				CSURコミュニティでの発言に返信があります！
			</h1>
			<div class="card-postContent" style="background:#fff; padding:20px 32px 40px; color:#6e6e6e; font-size:13px; line-height:24px;">
				<p>{!! $user->display_name !!}, こんにちは!</p>
				<p><a href="{!! app()->url() !!}/d/{!! $blueprint->post->discussion_id !!}/{!! $blueprint->post->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">《{!! $blueprint->post->discussion->title !!}》(#{!! $blueprint->post->number !!})で</a>の発言:
					<br>
				</p>
				<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
					{!! $blueprint->post->formatContent() !!}
				</div>
				<p>{!! $blueprint->reply->user->username !!} はあなたに返信しました:
					<br>
				</p>
				<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
					{!! $blueprint->reply->formatContent() !!}
				</div>
				<p>
					<a href="{!! app()->url() !!}/d/{!! $blueprint->reply->discussion_id !!}/{!! $blueprint->reply->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">をクリックして、完全な内容を見ることもできます。</a>
				</p>
				<p>またお越しくださいませ
					<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSURコミュニティ</a>
				</p>

				<p>(このメールはシステムから自動で送信されますので、返信しないでください。お邪魔しましたら、ご了承ください。)</p>
				<p></p>
				<p></p>
			</div>
			<p class="card-footer" style="color:#6e6e6e; text-align:right; padding:0 32px; font-size:13px; line-height:24px;">
				メール：<a href="{{ $baseUrl }}" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">CSUR 社区</a>
				<br>
				ポスト：<a href="https://github.com/halo-dev/halo" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Halo</a>
			</p>
		</div>
	</div>

</body>

Kyrne

Littlegolden this is great! I was hoping people would share their templates for prettymail, glad to see it!

[deleted]

Littlegolden Could you please put the code in pastebins? What do i do with the first lines of code that are not marked like  ?

Littlegolden

By the same token, "mentioned" and "being @" emails can also use such templates.

Littlegolden

[deleted]
Before the ZH div, it the tips you want to declare at the top of the mail.
Pastebins: https://paste.ubuntu.com/p/jC6Qskyy33/

ram0ng1

After a long time with this inactive discussion, I come to share my template...

Default;

<!DOCTYPE html>
<html lang="pt-BR" >
<head>
  <meta charset="UTF-8">
  <title>Ramon</title>
<style>
:root {
    --main-text-color: #354052;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}

html {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--main-text-color);   
}

body {
    padding: 0px;
    margin: 0px;
}

[class*="col-"] {
    width: 100%;
}

/*------------------------------------*\
Mobile Main content
\*------------------------------------*/

.wrapper {
    padding: 0px 3%;
}

.heading {
    margin-top: 58px;    
    font-size: 60px;
    font-weight: 900;
    color: #6B3DE4;
}

.image {
    width: 100%;
    height: 196px;
    margin-top: 51px;
    margin-left: auto;
    margin-right: auto;
    background: #F5E9F3;
    position: relative;
}

.image-resize-heading {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}    

.image-resize {  
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}

.image-resize-tub {
    width: 120px;
}

.intro-text-1 {    
    font-size: 20px;
    margin-bottom: 30px;
}

.intro-text-2 {
    font-size: 20px;
    font-weight: 300;
}

.card {

}

.card__title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card__body {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

input[type="button"] {
    color: #FFFFFF;
    background: #007AC2;
    height: 80px;
    width: 100%;
    font-size: 25px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    white-space: normal;
    margin: 61px 0px;
}

.footer {
    padding-top: 20px;
    background: #F5F5F5;
    text-align: center;
    padding-bottom: 50px;
    padding-left: 3%;
    padding-right: 3%;
}

.footer__title {    
    font-size: 30px;
    font-weight: 700;    
}

.footer__body {
    font-size: 22px;
    font-weight: 300;
}

.footer__social-links {
    margin-top: 18px;
    margin-bottom: 24px;
}

.icon {
    font-size: 24px;
    margin-left: 9px;
    margin-right: 9px;
}

.footer__copyright {
    font-size: 16px;
    font-weight: 300;
}

.footer__contact {
    font-size: 16px;
    font-weight: 600;
}


/*------------------------------------*\
Desktop Main content
\*------------------------------------*/
@media only screen and (min-width: 500px) {


    .wrapper {
        padding: 0px 20px;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .heading {
        margin-top: 58px;    
        font-size: 80px;
        font-weight: 900;
        color: #6B3DE4;
    }

    .image {        
        width: 100%;
        height: 356px;
        position: relative;
    }

    .image-resize-heading {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;
    }    


    .image-resize {  
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;

    }

    .image-resize-tub {
        width: 120px;
    }

    .intro-text-1 {    
        font-size: 20px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .intro-text-2 {
        font-size: 20px;
        font-weight: 300;
        margin-bottom: 24px;
    }

    .card {
        height: 330px;
    }

    .card .image {        
        height: 242px;    
        margin-top: 0px;
    }

    .card__title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .card__body {
        text-align: center;
        font-size: 18px;
        font-weight: 300;
    }

    input[type="button"] {        
        height: 85px; 
        margin-top: 81px;
        margin-bottom: 54px;
    }

    .footer {
        padding-top: 60px;
        background: #F5F5F5;
        text-align: center;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer__title {    
        font-size: 45px;
        font-weight: 700;    
    }

    .footer__body {
        font-size: 22px;
        font-weight: 300;
    }

    .footer__social-links {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .icon {
        font-size: 24px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .footer__copyright {
        font-size: 16px;
        font-weight: 300;
    }

    .footer__contact {
        font-size: 16px;
        font-weight: 600;        
    }

    .col-6 {
        margin-left: 0px;
        margin-right: 0px;
        width: 50%;
    }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>       
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    </head>
    <body>

        <div class="wrapper">

            <!--<div class="heading">ella.</div>-->
			<div class="heading"><a href="{{ $url->to('forum')->base() }}"><img src="https://ramonguilherme.com.br/assets/files/2022-01-05/1641422794-242922-p-logo.png" alt="Ramon"></a></div>

            <!--<div class="image"><img class="image-resize-heading" src="https://preview.ibb.co/eSK8FJ/Group_40_2x.png" alt="Group_40_2x"></div>-->

            <!--<div class="intro-text-1">
                Hi there,  we are please to have you as one of our first users.
            </div>-->
            <div class="intro-text-2">
                {!! $body !!}
            </div>
			
			

        </div>

        <div class="footer">
            <!--<div class="footer__title">We’d love to hear from you!</div>
            <div class="footer__body">Help us improve by sharing your feedback in this short <a href="" >survey.</a></div>                
            <div class="footer__social-links">
                <span class="icon"><a href=""><i class="fab fa-facebook-f"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-twitter"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-instagram"></i></a></span>
            </div>-->
            <div class="footer__copyright">(Esta mensagem foi enviada automaticamente pelo sistema. Por favor, não responda.)</div>
			<a href="{{ $url->to('forum')->base() }}/settings" style="text-decoration: underline; color: #9a9ea6; font-size: 15px; text-align: center;">Unsubscribe</a>
        </div>
		

    </body>
</html>
</body>
</html>

New Post:

<!DOCTYPE html>
<html lang="pt-BR" >
<head>
  <meta charset="UTF-8">
  <title>Ramon</title>
<style>
:root {
    --main-text-color: #354052;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}

html {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--main-text-color);   
}

body {
    padding: 0px;
    margin: 0px;
}

[class*="col-"] {
    width: 100%;
}

/*------------------------------------*\
Mobile Main content
\*------------------------------------*/

.wrapper {
    padding: 0px 3%;
}

.heading {
    margin-top: 58px;    
    font-size: 60px;
    font-weight: 900;
    color: #6B3DE4;
}

.image {
    width: 100%;
    height: 196px;
    margin-top: 51px;
    margin-left: auto;
    margin-right: auto;
    background: #F5E9F3;
    position: relative;
}

.image-resize-heading {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}    

.image-resize {  
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}

.image-resize-tub {
    width: 120px;
}

.intro-text-1 {    
    font-size: 20px;
    margin-bottom: 30px;
}

.intro-text-2 {
    font-size: 20px;
    font-weight: 300;
}

.card {

}

.card__title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card__body {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

input[type="button"] {
    color: #FFFFFF;
    background: #007AC2;
    height: 80px;
    width: 100%;
    font-size: 25px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    white-space: normal;
    margin: 61px 0px;
}

.footer {
    padding-top: 20px;
    background: #F5F5F5;
    text-align: center;
    padding-bottom: 50px;
    padding-left: 3%;
    padding-right: 3%;
}

.footer__title {    
    font-size: 30px;
    font-weight: 700;    
}

.footer__body {
    font-size: 22px;
    font-weight: 300;
}

.footer__social-links {
    margin-top: 18px;
    margin-bottom: 24px;
}

.icon {
    font-size: 24px;
    margin-left: 9px;
    margin-right: 9px;
}

.footer__copyright {
    font-size: 16px;
    font-weight: 300;
}

.footer__contact {
    font-size: 16px;
    font-weight: 600;
}


/*------------------------------------*\
Desktop Main content
\*------------------------------------*/
@media only screen and (min-width: 500px) {


    .wrapper {
        padding: 0px 20px;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .heading {
        margin-top: 58px;    
        font-size: 80px;
        font-weight: 900;
        color: #6B3DE4;
    }

    .image {        
        width: 100%;
        height: 356px;
        position: relative;
    }

    .image-resize-heading {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;
    }    


    .image-resize {  
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;

    }

    .image-resize-tub {
        width: 120px;
    }

    .intro-text-1 {    
        font-size: 20px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .intro-text-2 {
        font-size: 26px;
        font-weight: 300;
        margin-bottom: 24px;
    }

    .card {
        height: 330px;
    }

    .card .image {        
        height: 242px;    
        margin-top: 0px;
    }

    .card__title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .card__body {
        text-align: center;
        font-size: 18px;
        font-weight: 300;
    }

    input[type="button"] {        
        height: 85px; 
        margin-top: 81px;
        margin-bottom: 54px;
    }

    .footer {
        padding-top: 60px;
        background: #F5F5F5;
        text-align: center;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer__title {    
        font-size: 45px;
        font-weight: 700;    
    }

    .footer__body {
        font-size: 22px;
        font-weight: 300;
    }

    .footer__social-links {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .icon {
        font-size: 24px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .footer__copyright {
        font-size: 16px;
        font-weight: 300;
    }

    .footer__contact {
        font-size: 16px;
        font-weight: 600;        
    }

    .col-6 {
        margin-left: 0px;
        margin-right: 0px;
        width: 50%;
    }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>       
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    </head>
    <body>

        <div class="wrapper">

            <!--<div class="heading">ella.</div>-->
			<div class="heading"><a href="{{ $url->to('forum')->base() }}"><img src="https://ramonguilherme.com.br/assets/files/2022-01-05/1641422794-242922-p-logo.png" alt="Ramon"></a></div>

            <!--<div class="image"><img class="image-resize-heading" src="https://preview.ibb.co/eSK8FJ/Group_40_2x.png" alt="Group_40_2x"></div>-->

		<div class="intro-text-1">
			<p>
				<p>Hey {!! $user->display_name !!}!</p>
			</p>
			<p>Seu post em<a href="{{ $url->to('forum')->route('user', ['username' => $blueprint->post->user->username]) }}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">{{ $url->to('forum')->route('user', ['username' => $blueprint->post->user->username]) }}</a>:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->post->formatContent() !!}
			</div>
			<p>{!! $blueprint->reply->user->username !!} respondeu você:
				<br>
			</p>
			<div class="card-replyContent" style="color:#6e6e6e; padding:10px 20px; background:#f8f8f8; margin:0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 70px;">
				{!! $blueprint->reply->formatContent() !!}
			</div>
			<p>Você pode
				<a href="{!! app()->url() !!}/d/{!! $blueprint->reply->discussion_id !!}/{!! $blueprint->reply->number !!}" target="_blank" style="color: {{ $settings->get('theme_primary_color') }};	text-decoration: none;">Ver a resposta completa</a>
			</p>
			<p></p>
			<p></p>
			
        </div>

        <div class="footer">
            <!--<div class="footer__title">We’d love to hear from you!</div>
            <div class="footer__body">Help us improve by sharing your feedback in this short <a href="" >survey.</a></div>                
            <div class="footer__social-links">
                <span class="icon"><a href=""><i class="fab fa-facebook-f"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-twitter"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-instagram"></i></a></span>
            </div>-->
            <div class="footer__copyright">(Esta mensagem foi enviada automaticamente pelo sistema. Por favor, não responda.)</div>
			<a href="{{ $url->to('forum')->base() }}/settings" style="text-decoration: underline; color: #9a9ea6; font-size: 15px; text-align: center;">Unsubscribe</a>
        </div>
		

    </body>
</html>
  
</body>
</html>

Mentions User:

<!DOCTYPE html>
<html lang="pt-BR" >
<head>
  <meta charset="UTF-8">
  <title>Ramon</title>
<style>
:root {
    --main-text-color: #354052;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}

html {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--main-text-color);   
}

body {
    padding: 0px;
    margin: 0px;
}

[class*="col-"] {
    width: 100%;
}

/*------------------------------------*\
Mobile Main content
\*------------------------------------*/

.wrapper {
    padding: 0px 3%;
}

.heading {
    margin-top: 58px;    
    font-size: 60px;
    font-weight: 900;
    color: #6B3DE4;
}

.image {
    width: 100%;
    height: 196px;
    margin-top: 51px;
    margin-left: auto;
    margin-right: auto;
    background: #F5E9F3;
    position: relative;
}

.image-resize-heading {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}    

.image-resize {  
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}

.image-resize-tub {
    width: 120px;
}

.intro-text-1 {    
    font-size: 20px;
    margin-bottom: 30px;
}

.intro-text-2 {
    font-size: 20px;
    font-weight: 300;
}

.card {

}

.card__title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card__body {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

input[type="button"] {
    color: #FFFFFF;
    background: #007AC2;
    height: 80px;
    width: 100%;
    font-size: 25px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    white-space: normal;
    margin: 61px 0px;
}

.footer {
    padding-top: 20px;
    background: #F5F5F5;
    text-align: center;
    padding-bottom: 50px;
    padding-left: 3%;
    padding-right: 3%;
}

.footer__title {    
    font-size: 30px;
    font-weight: 700;    
}

.footer__body {
    font-size: 22px;
    font-weight: 300;
}

.footer__social-links {
    margin-top: 18px;
    margin-bottom: 24px;
}

.icon {
    font-size: 24px;
    margin-left: 9px;
    margin-right: 9px;
}

.footer__copyright {
    font-size: 16px;
    font-weight: 300;
}

.footer__contact {
    font-size: 16px;
    font-weight: 600;
}


/*------------------------------------*\
Desktop Main content
\*------------------------------------*/
@media only screen and (min-width: 500px) {


    .wrapper {
        padding: 0px 20px;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .heading {
        margin-top: 58px;    
        font-size: 80px;
        font-weight: 900;
        color: #6B3DE4;
    }

    .image {        
        width: 100%;
        height: 356px;
        position: relative;
    }

    .image-resize-heading {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;
    }    


    .image-resize {  
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;

    }

    .image-resize-tub {
        width: 120px;
    }

    .intro-text-1 {    
        font-size: 20px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .intro-text-2 {
        font-size: 26px;
        font-weight: 300;
        margin-bottom: 24px;
    }

    .card {
        height: 330px;
    }

    .card .image {        
        height: 242px;    
        margin-top: 0px;
    }

    .card__title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .card__body {
        text-align: center;
        font-size: 18px;
        font-weight: 300;
    }

    input[type="button"] {        
        height: 85px; 
        margin-top: 81px;
        margin-bottom: 54px;
    }

    .footer {
        padding-top: 60px;
        background: #F5F5F5;
        text-align: center;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer__title {    
        font-size: 45px;
        font-weight: 700;    
    }

    .footer__body {
        font-size: 22px;
        font-weight: 300;
    }

    .footer__social-links {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .icon {
        font-size: 24px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .footer__copyright {
        font-size: 16px;
        font-weight: 300;
    }

    .footer__contact {
        font-size: 16px;
        font-weight: 600;        
    }

    .col-6 {
        margin-left: 0px;
        margin-right: 0px;
        width: 50%;
    }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>       
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    </head>
    <body>

        <div class="wrapper">

            <!--<div class="heading">ella.</div>-->
			<div class="heading"><a href="{{ $url->to('forum')->base() }}"><img src="https://ramonguilherme.com.br/assets/files/2022-01-05/1641422794-242922-p-logo.png" alt="Ramon"></a></div>

            <!--<div class="image"><img class="image-resize-heading" src="https://preview.ibb.co/eSK8FJ/Group_40_2x.png" alt="Group_40_2x"></div>-->

		<div class="intro-text-1">
        <div class="intro-text-2">
            <p>Hey {!! $user->display_name !!}!</p>

            <p><a href="{{ $url->to('forum')->route('user', ['username' => $blueprint->post->user->username]) }}">{!! $blueprint->post->user->username !!}</a> mencionou você em um post em <a href="{{ $url->to('forum')->route('discussion', ['id' => $blueprint->post->discussion_id, 'near' => $blueprint->post->number]) }}">{!! $blueprint->post->discussion->title !!}</a>.</p>

            ---

        </div>
        <br/>
        <div class="post-content">
            {!! $blueprint->post->formatContent() !!}
        </div>
        <br/>
    </div>
			
        </div>

        <div class="footer">
            <!--<div class="footer__title">We’d love to hear from you!</div>
            <div class="footer__body">Help us improve by sharing your feedback in this short <a href="" >survey.</a></div>                
            <div class="footer__social-links">
                <span class="icon"><a href=""><i class="fab fa-facebook-f"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-twitter"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-instagram"></i></a></span>
            </div>-->
            <div class="footer__copyright">(Esta mensagem foi enviada automaticamente pelo sistema. Por favor, não responda.)</div>
			<a href="{{ $url->to('forum')->base() }}/settings" style="text-decoration: underline; color: #9a9ea6; font-size: 15px; text-align: center;">Unsubscribe</a>
        </div>
		

    </body>
</html>
  
</body>
</html>

Mention Post:

<!DOCTYPE html>
<html lang="pt-BR" >
<head>
  <meta charset="UTF-8">
  <title>Ramon</title>
<style>
:root {
    --main-text-color: #354052;
}

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}

html {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--main-text-color);   
}

body {
    padding: 0px;
    margin: 0px;
}

[class*="col-"] {
    width: 100%;
}

/*------------------------------------*\
Mobile Main content
\*------------------------------------*/

.wrapper {
    padding: 0px 3%;
}

.heading {
    margin-top: 58px;    
    font-size: 60px;
    font-weight: 900;
    color: #6B3DE4;
}

.image {
    width: 100%;
    height: 196px;
    margin-top: 51px;
    margin-left: auto;
    margin-right: auto;
    background: #F5E9F3;
    position: relative;
}

.image-resize-heading {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}    

.image-resize {  
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: absolute;               
    top: 50%;                         
    transform: translate(-50%, -50%);
    left: 50%;
}

.image-resize-tub {
    width: 120px;
}

.intro-text-1 {    
    font-size: 20px;
    margin-bottom: 30px;
}

.intro-text-2 {
    font-size: 20px;
    font-weight: 300;
}

.card {

}

.card__title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card__body {
    text-align: center;
    font-size: 18px;
    font-weight: 300;
}

input[type="button"] {
    color: #FFFFFF;
    background: #007AC2;
    height: 80px;
    width: 100%;
    font-size: 25px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    white-space: normal;
    margin: 61px 0px;
}

.footer {
    padding-top: 20px;
    background: #F5F5F5;
    text-align: center;
    padding-bottom: 50px;
    padding-left: 3%;
    padding-right: 3%;
}

.footer__title {    
    font-size: 30px;
    font-weight: 700;    
}

.footer__body {
    font-size: 22px;
    font-weight: 300;
}

.footer__social-links {
    margin-top: 18px;
    margin-bottom: 24px;
}

.icon {
    font-size: 24px;
    margin-left: 9px;
    margin-right: 9px;
}

.footer__copyright {
    font-size: 16px;
    font-weight: 300;
}

.footer__contact {
    font-size: 16px;
    font-weight: 600;
}


/*------------------------------------*\
Desktop Main content
\*------------------------------------*/
@media only screen and (min-width: 500px) {


    .wrapper {
        padding: 0px 20px;
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .heading {
        margin-top: 58px;    
        font-size: 80px;
        font-weight: 900;
        color: #6B3DE4;
    }

    .image {        
        width: 100%;
        height: 356px;
        position: relative;
    }

    .image-resize-heading {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;
    }    


    .image-resize {  
        width: 200px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        position: absolute;               
        top: 50%;                         
        transform: translate(-50%, -50%);
        left: 50%;

    }

    .image-resize-tub {
        width: 120px;
    }

    .intro-text-1 {    
        font-size: 20px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .intro-text-2 {
        font-size: 26px;
        font-weight: 300;
        margin-bottom: 24px;
    }

    .card {
        height: 330px;
    }

    .card .image {        
        height: 242px;    
        margin-top: 0px;
    }

    .card__title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .card__body {
        text-align: center;
        font-size: 18px;
        font-weight: 300;
    }

    input[type="button"] {        
        height: 85px; 
        margin-top: 81px;
        margin-bottom: 54px;
    }

    .footer {
        padding-top: 60px;
        background: #F5F5F5;
        text-align: center;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer__title {    
        font-size: 45px;
        font-weight: 700;    
    }

    .footer__body {
        font-size: 22px;
        font-weight: 300;
    }

    .footer__social-links {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .icon {
        font-size: 24px;
        margin-left: 9px;
        margin-right: 9px;
    }

    .footer__copyright {
        font-size: 16px;
        font-weight: 300;
    }

    .footer__contact {
        font-size: 16px;
        font-weight: 600;        
    }

    .col-6 {
        margin-left: 0px;
        margin-right: 0px;
        width: 50%;
    }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>       
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    </head>
    <body>

        <div class="wrapper">

            <!--<div class="heading">ella.</div>-->
			<div class="heading"><a href="{{ $url->to('forum')->base() }}"><img src="https://ramonguilherme.com.br/assets/files/2022-01-05/1641422794-242922-p-logo.png" alt="Ramon"></a></div>

            <!--<div class="image"><img class="image-resize-heading" src="https://preview.ibb.co/eSK8FJ/Group_40_2x.png" alt="Group_40_2x"></div>-->

		<div class="intro-text-1">
		<div class="intro-text-2">
        <p>Hey {!! $user->display_name !!}!</p>

        <p><a href="{{ $url->to('forum')->route('user', ['username' => $blueprint->reply->user->username]) }}">{!! $blueprint->reply->user->username !!}</a> respondeu seu post (#{!! $blueprint->post->number !!}) em <a href="{{ $url->to('forum')->route('discussion', ['id' => $blueprint->post->discussion_id, 'near' => $blueprint->reply->number]) }}">{!! $blueprint->post->discussion->title !!}</a>.</p>

        ---

    </div>
    <br/>
    <div class="post-content">
        {!! $blueprint->reply->formatContent() !!}
    </div>
    <br/>
</div>
			
        </div>

        <div class="footer">
            <!--<div class="footer__title">We’d love to hear from you!</div>
            <div class="footer__body">Help us improve by sharing your feedback in this short <a href="" >survey.</a></div>                
            <div class="footer__social-links">
                <span class="icon"><a href=""><i class="fab fa-facebook-f"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-twitter"></i></a></span>
                <span class="icon"><a href=""><i class="fab fa-instagram"></i></a></span>
            </div>-->
            <div class="footer__copyright">(Esta mensagem foi enviada automaticamente pelo sistema. Por favor, não responda.)</div>
			<a href="{{ $url->to('forum')->base() }}/settings" style="text-decoration: underline; color: #9a9ea6; font-size: 15px; text-align: center;">Unsubscribe</a>
        </div>
		

    </body>
</html>
  
</body>
</html>

You can replace the logo by replacing the link: https://ramonguilherme.com.br/assets/files/2022-01-05/1641422794-242922-p-logo.png I recommend a logo with dimensions 577x253

You just have to translate it into your language...
Sorry for the rush and some errors