Insert css in thymeleaf template

Question

I need to insert styles in email template (thymeleaf). I need to make a common css files for several templates.

Using spring boot 1.3.3

I tried to follow what's in the following post: Thymeleaf + CSS+SpringBoot

email file: resources > mails > "email.html" css file: resources > static > css > "styles.css"

I use a WebContext for the mail (I used to use a Context but the relative path was not accepted with Context and WebContext was required).

In my css:

h1 {
color: #78ab46;
}

In my template:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title > Hello </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all"
          href="../static/css/styles.css" th:href="@{/css/styles.css}" />
</head>
<body>
    <h1> Hello </h1>
</body>

The result is that the mail is sent but the css style is not taken into an account. I don't see any error message either.

Could you help me, please?

Thanks,

Manuela

score 3 · Answer 1 · answered Aug 13 '19 at 13:56

In the past I've made use of fragments to handle this type of thing.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="fragments/email-header :: head"></div>
    <title > Hello </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1> Hello </h1>
</body>

Then in the fragments folder I have a file email-header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <style>
        h1 {
            color: #78ab46;
        }
    </style>
</html>

In the project I copied this out of, I used the fragment for the entire header. I dont see why it wouldn't work for a "fragment" of the header.

Insert css in thymeleaf template

1 Answers1