Question

标题说明了一切。

我尝试了多种方法，但似乎无济于事。

我尝试在style.properties中导入样式表。 styles=css/styles.css

我尝试直接在html标签中制作样式。 <h1 style="color:blue;">

我试图在我的ftl文件中添加样式，如下所示：

<html>
<style type="text/css">
body {
    margin: 0;
    font-family: 'Source Sans Pro';
    font-weight: 400;
    font-size: 16px;
}
.header{
    background-color: #B70E0C;
    width: 100%;
    height: 96px;
}

.footer{
    flex-shrink: 0;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 16px;
    background-color: #2D2D2D;
    z-index: 1;
    position: absolute;
    bottom: 0;
}

.footer a {
    color: white !important;
}

a:visited {
    color: initial;
}

.activate-btn{
    border-radius: 8px;
    padding: 12px 28px;
    background-color: #FDC300;
    color: black;
    border-style: hidden;
}
</style>
<body>
${kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName, 
linkExpirationFormatter(linkExpiration)))?no_esc}
</body>
</html>

Answer 1

撰写html电子邮件并非像撰写html网页那样简单，因为几乎所有电子邮件服务都以不同的方式处理传入的电子邮件。有些人可能会忽略引用，有些人可能会忽略几个CSS属性。要制作跨平台电子邮件（将在Gmail，Outlook，Thunderbird等中呈现相同的样式），您必须回滚到2000年的技术，例如基于表格的页面布局，内嵌的CSS样式（例如<p style="..">），因此您最好看看像Zurb这样的电子邮件框架。

借助zurb，您可以像在npm world中的任何其他UI应用程序一样在浏览器中创建和调试电子邮件模板。然后，您可以将Zurb输出切成keycloak freemarker模板。最后，您将获得主要的freemarker模板（带有公共标题，底部链接等），以及用于段落，链接的一堆freemarker宏。此组件将封装所有难看的东西，例如内联css，表等，因此您的业务模板将很简单，看起来也很不错。这就是我执行必需的操作电子邮件

所获得的

<#import "template.ftl" as layout>
<@layout.emailLayout title=msg('executeActionsSubject')?no_esc; section>

    <#if section = "header">
        <@layout.header text=msg("executeActionsSubject")?no_esc icon="status-icon-green%403x.png"/>

    <#elseif section = "content">

        <#outputformat "plainText">
            <#assign requiredActionsText>
                <#if requiredActions??>
                    <ul>
                    <#list requiredActions>
                        <#items as reqActionItem><li>${msg("requiredAction.${reqActionItem}")}</li></#items>
                    </#list>
                    </ul>
                </#if>
            </#assign>
        </#outputformat>

        <@layout.paragraph>
            ${msg("executeActionsBodyIntro", realmName)?no_esc}
        </@layout.paragraph>

        <b>
            ${msg("executeActionsList", requiredActionsText)?no_esc}
        </b>

        <@layout.paragraph>
            ${msg("executeActionsClickLinkNote")?no_esc}
        </@layout.paragraph>

        <@layout.mainAction text=msg("executeActionsButtonText")?no_esc href=link/>

        <@layout.secondaryText>
            ${kcSanitize(msg("expirationNote", linkExpirationFormatter(linkExpiration)))?no_esc}
        </@layout.secondaryText>

        <@layout.secondaryText>
            ${msg("mistakeDeleteText")?no_esc}
        </@layout.secondaryText>

    </#if>

</@layout.emailLayout>

Answer 2

您可以使用此代码

body {
  margin: 0;
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-size: 16px;
}

.header {
  background-color: #B70E0C;
  width: 100%;
  height: 96px;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  background-color: #2D2D2D;
  z-index: 1;
  position: absolute;
  bottom: 0;
}

.footer a {
  color: white !important;
}

a:visited {
  color: initial;
}

.activate-btn {
  border-radius: 8px;
  padding: 12px 28px;
  background-color: #FDC300;
  color: black;
  border-style: hidden;
}

<h1 style="color:blue;">lorem ipsum dolor</h1>
${kcSanitize(msg("emailVerificationBodyHtml", link, linkExpiration, realmName, linkExpirationFormatter(linkExpiration)))?no_esc}
<p style="color:red;">lorem ipsum dolor sit amet</p>

有没有办法为我的自定义Keycloak电子邮件主题添加样式？

2 个答案: