Css 不适用于电子邮件模板,因此我的客户的任何电子邮件看起来都很丑陋,经过大量谷歌搜索后,我看到了 Laravel css 内联解决方案,但我不知道如何使用它们,
任何解决方案以帮助我的 css 加载
@extends('layouts.master')
@section('title')
XXXX | WELCOME
@endsection``
@section('body')
<div class="page text-center">
<!-- Page Head-->
<!-- Page Contents-->
<main class="page-content">
<!-- Search Engine-->
<section class="section-98 section-sm-110">
<div class="shell">
<div class="offset-sm-top-66">
<center>
<img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>
</center>
<!-- Responsive-tabs-->
<div data-type="horizontal" class="responsive-tabs responsive-tabs-classic">
<p class="text-center alert alert-info">Welcome to XXXX <br> please verify your account by entering digits sent via sms.</p>
</div>
</div>
</div>
</section>
</main>
</div>
@endsection
Run Code Online (Sandbox Code Playgroud)
以上是示例模板
谢谢你。
Laravel 会自动从你主题的 CSS 文件中移动样式并将其放入内联。请参阅文档中的自定义 CSS。
发布默认主题的布局和 css: php artisan vendor:publish --tag=laravel-mail。
这会给你一个default.css文件resources/views/vendor/mail/html/themes。中的“默认”default.css是您的主题名称。
(可选)将resources/views/vendor/mail目录复制到对您的应用最有意义的位置。例如resources/views/mail
(可选)自定义 .html 中的 HTMLmail/layout.blade.php或 CSS 中的mail/themes/default.css.
设置您的配置。编辑/config/mail.php并提供邮件布局和主题名称的路径:
// in config/mail.php
/*
|--------------------------------------------------------------------------
| Send Emails Using Markdown
|--------------------------------------------------------------------------
|
*/
'markdown' => [
'theme' => 'default', # The name of your theme (default.css)
'paths' => [ # The path to your /html and /text dirs
resource_path('views/emails/layouts')
]
],
Run Code Online (Sandbox Code Playgroud)
mytheme1.css. 然后,您使用该主题将 CSS 文件的名称用作 Mailable 上的属性。
// in e.g. app/Mail/MyMailable.php
/**
* The name of the theme that should be used when formatting the message.
*
* @var string|null
*/
public $theme = "mytheme1.css";
Run Code Online (Sandbox Code Playgroud)
主题文件中的 CSS 将“自动内联在 Markdown 邮件消息的 HTML 表示中”。
小智 2
对电子邮件使用内联 css 是正确的。
如果我们采用这行代码:
<img class='img-responsive' style='margin-top: -20px;margin-left: -5px;' width='329' height='67' src="{{URL::to('/images/icon1.png')}}" alt=''/>
Run Code Online (Sandbox Code Playgroud)
内联 CSS 从 style 标签开始。此时类标签什么也不做。<style></style>要解决此问题,您可以在电子邮件标题中添加一个。所以你会得到这样的东西:
<head><style>.img-responsive {margin-top: -20px; margin-left: -5px; width=329px; height=67px}</style></head>
现在您可以在代码中使用 img-responsive 类。
请注意,如果您使用 bootstrap css,则需要将其放入样式代码中。
| 归档时间: |
|
| 查看次数: |
10495 次 |
| 最近记录: |