I created mail html blade file designed with css file in Laravel 5.8.
I tried many ways to work the degisned view with css, but nothing actually works.
Sending email is fine, I just changed the whole designed blade file.
Using default.css or inlined styling both doesn't work.
So confusing about this situation.
- view (resources/views/mail/stat.blade.php)
<div class="element">
<img class="bg-logo" src="" />
<img class="logo" src="" />
<div class="text-title">베이직바이블<br />서비스 주간 리포트</div>
<div class="font-bold-700 text-service_term">2023.12.01 - 2023.12.07</div>
<div class="whitebox-base OS">
<img src="" alt="" class="app-icon">
<div class="font-bold-700 text-app_name">베이직바이블</div>
<div class="font-bold-700 div">쇼핑몰 OS정보</div>
<div class="OS-2">
<div class="div-2">
<img class="img" src="" />
<div class="font-bold-700 text-os_ver">6.6 버전</div>
</div>
<div class="div-2">
<img class="img" src="" />
<div class="font-bold-700 text-os_ver">5.0 버전</div>
</div>
</div>
<div class="IOS">
<div class="font-bold-700 text-wrapper-3">IOS 개발자계정</div>
<div class="date">
<div class="font-bold-700 text-wrapper-4">365일 남음</div>
<div class="text-wrapper-5">만료 2024.12.20</div>
</div>
</div>
</div>
<div class="whitebox-base box-base-1 box-1">
<div class="font-bold-700 title">APP</div>
<div class="text-remain_days">
<div class="font-heavy-400 normal">203</div>
<div class="font-bold-700 font-24">일</div>
</div>
</div>
</div>
- route for preview (web.php)
Route::get('mailable', function() {
// return view('mail.weeklystat');
$data = App\Models\AppsData::findOrFail(3698);
return new App\Mail\WeeklyStatMail($data);
});
- for send mail (app/Mail/StatMail.php)
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;
use App\Models\AppsData;
class WeeklyStatMail extends Mailable
{
use Queueable, SerializesModels;
public $appsData;
public function __construct(AppsData $appsData)
{
$this->appsData = $appsData;
}
public function build()
{
return $this
->subject($this->appsData->app_name." 통계")
->markdown('mail.stat');
}
}
** tried this part like this, but didn't work.**
public function build()
{
return $this
->subject($this->appsData->app_name." 통계")
->view('mail.stat');
}
}
- css (resources/views/mail/html/themes/default.css)
html,
body {
margin: 0px;
height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
outline: 2px solid #4a90e2 !important;
outline: -webkit-focus-ring-color auto 5px !important;
}
a {
text-decoration: none;
}
@font-face {
font-family: "SUIT-Bold";
src: url('/assets/css/fonts/SUIT/SUIT-Bold.ttf') format("truetype");
}
@font-face {
font-family: "SUIT-Medium";
src: url('/assets/css/fonts/SUIT/SUIT-Medium.ttf') format("truetype");
}
@font-face {
font-family: "SUIT-Heavy";
src: url('/assets/css/fonts/SUIT/SUIT-Heavy.ttf') format("truetype");
}
@font-face {
font-family: "SUIT-ExtraBold";
src: url('/assets/css/fonts/SUIT/SUIT-ExtraBold.ttf') format("truetype");
}
.rectangle {
position: relative;
width: 10px;
height: 10px;
border-radius: 2px;
}
.bg-color-red {
background-color: #f56650;
}
.bg-color-yellow {
background-color: #ffa812;
}
.bg-color-green {
background-color: #00a65a;
}
.bg-color-green-2 {
background-color: #34a853;
}
.bg-color-black {
background-color: #000;
}
.font-black {
color: #000;
}
.font-green {
color: #00a65a;
}
.font-red {
color: #f56650;
}
.font-white {
color: #fff;
}
.font-666 {
color: #666;
}
.font-bold-700 {
font-family: "SUIT-Bold", Helvetica;
font-weight: 700;
letter-spacing: 0;
line-height: normal;
}
.font-heavy-400 {
font-family: "SUIT-Heavy", Helvetica;
font-weight: 400;
letter-spacing: 0;
line-height: normal;
}
.whitebox-base {
position: absolute;
background-color: #fff;
border-radius: 12px;
overflow: hidden;
}
.title {
position: relative;
align-self: stretch;
margin-top: -1px;
font-size: 15px;
color: #666;
}
.yellow_circle {
display: flex;
flex-direction: column;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px;
position: absolute;
top: 0;
left: 147px;
background-color: #ffba00;
border-radius: 20px;
}
.title_number {
position: relative;
width: fit-content;
margin-top: -6.5px;
margin-bottom: -4.5px;
font-family: "SUIT-Heavy", Helvetica;
font-weight: 400;
color: #fff;
letter-spacing: 0;
line-height: normal;
font-size: 20px;
}
.text-title {
position: absolute;
top: 42px;
left: 0;
font-family: "SUIT-ExtraBold", Helvetica;
font-weight: 800;
color: #151515;
font-size: 36px;
text-align: center;
letter-spacing: 0;
line-height: normal;
}
.text-subtitle {
position: absolute;
top: 87px;
left: 22px;
font-family: "SUIT-Regular", Helvetica;
font-weight: 400;
color: #999;
font-size: 18px;
text-align: center;
letter-spacing: 0;
line-height: normal;
}
.text-unit {
position: relative;
width: fit-content;
color: #151515;
font-size: 24px;
text-align: right;
}
.img {
position: relative;
width: 16px;
height: 16px;
}
.num-up {
color: #e74646;
font-size: 16px;
position: relative;
width: fit-content;
margin-top: -1px;
font-family: "SUIT-Bold", Helvetica;
font-weight: 700;
text-align: right;
letter-spacing: 0;
line-height: normal;
}
.num-down {
color: #4673e7;
font-size: 16px;
position: relative;
width: fit-content;
margin-top: -1px;
font-family: "SUIT-Bold", Helvetica;
font-weight: 700;
text-align: right;
letter-spacing: 0;
line-height: normal;
}
.data-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: stretch;
position: relative;
gap: 8px;
width: 100%;
flex: 0 0 auto;
}
.element {
position: relative;
width: 895px;
height: 605px;
background-color: #e8ebed;
}
.element .bg-logo {
position: absolute;
width: 473px;
height: 135px;
top: 0;
left: 422px;
}
.element .logo {
position: absolute;
width: 58px;
height: 66px;
top: 48px;
left: 58px;
}
.element .text-title {
position: absolute;
top: 122px;
left: 58px;
color: #151515;
font-size: 48px;
font-family: "SUIT-ExtraBold", Helvetica;
font-weight: 800;
letter-spacing: 0;
line-height: normal;
}
.element .text-service_term {
position: absolute;
top: 244px;
left: 58px;
color: #7a7a7a;
font-size: 20px;
}
.element .OS {
width: 225px;
height: 260px;
top: 305px;
left: 40px;
}
.element .app-icon {
position: absolute;
width: 72px;
height: 72px;
top: 47px;
left: 77px;
border-radius: 20px;
border: 1px solid;
border-color: #0000000d;
/* background-image: url(https://c.animaapp.com/XyeV1pwN/img/app-icon@2x.png);
background-size: cover;
background-position: 50% 50%; */
}
.element .text-app_name {
position: absolute;
top: 126px;
left: 60px;
font-size: 20px;
color: #151515;
}
.element .div {
position: absolute;
top: 15px;
left: 16px;
font-size: 15px;
color: #666666;
}
.element .OS-2 {
display: flex;
width: 193px;
align-items: flex-start;
gap: 8px;
position: absolute;
top: 159px;
left: 16px;
}
.element .div-2 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 8px;
position: relative;
flex: 1;
flex-grow: 1;
background-color: #999999;
border-radius: 8px;
}
.element .img {
position: relative;
width: 16px;
height: 16px;
}
.element .text-os_ver {
position: relative;
width: fit-content;
margin-top: -0.5px;
color: #ffffff;
font-size: 12px;
}
.element .IOS {
display: flex;
width: 193px;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
position: absolute;
top: 195px;
left: 16px;
background-color: #f1f1f1;
border-radius: 8px;
overflow: hidden;
}
.element .text-wrapper-3 {
position: relative;
width: fit-content;
color: #666666;
font-size: 12px;
}
.element .date {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
position: relative;
flex: 0 0 auto;
}
.element .text-wrapper-4 {
position: relative;
width: fit-content;
margin-top: -1px;
color: #151515;
font-size: 14px;
text-align: right;
}
.element .text-wrapper-5 {
position: relative;
width: fit-content;
color: #999999;
font-size: 10px;
text-align: right;
font-family: "SUIT-Medium", Helvetica;
font-weight: 500;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;
}
.element .box-base-1 {
display: flex;
flex-direction: column;
width: 181px;
height: 122px;
align-items: flex-start;
justify-content: space-between;
padding: 16px;
}
.element .box-1 {
top: 305px;
left: 281px;
}
.element .box-2 {
top: 305px;
left: 478px;
}
.element .box-3 {
top: 305px;
left: 675px;
}
.element .box-4 {
top: 443px;
left: 281px;
}
.element .box-5 {
width: 181px;
height: 122px;
top: 443px;
left: 478px;
}
.element .box-6 {
width: 181px;
height: 122px;
top: 443px;
left: 675px;
}
.element .text-remain_days {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
align-self: stretch;
width: 100%;
position: relative;
flex: 0 0 auto;
}
.element .normal {
color: #151515;
position: relative;
width: fit-content;
margin-top: -1px;
font-size: 40px;
text-align: right;
}
.element .not {
color: #e74646;
}
.element .font-24 {
font-size: 24px;
}
.element .text-lock {
position: absolute;
top: 15px;
left: 16px;
color: #666;
font-size: 15px;
}
.element .locked {
display: flex;
width: 66px;
height: 66px;
top: 40px;
left: 57px;
align-items: center;
justify-content: center;
gap: 2px;
position: relative;
border-radius: 33px;
background-color: #ffe39b;
overflow: hidden;
}
.element .lock {
position: relative;
width: 32px;
height: 33.36px;
}
.element .box-6 .text-not_using {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 24px;
position: absolute;
top: 53px;
left: 45px;
background-color: #e8ebed;
border-radius: 28px;
}
.element .not_using {
position: relative;
flex: 0 0 auto;
color: #999;
}
I even tried to copy and paste the default.css to resources/views/vendor/mail/html/themes/default.css
, but it doesn't work either.
Also tried to change the css styles to inline styles in stat.blade.php
, then it works but not actually worked as the original style.
How can I make it work for this mail styling with css? Would it only worked with table
tags?
via
Chebli Mohamed