Thymeleaf into <Style>< /Style>

Thymeleaf add value in style

Most probably you are having a syntax issue here. Try the following code:

th:styleappend="'background-position:-' + @{${value}} + '%'"

Set CSS variables from model object in Thymeleaf

If you want to set CSS variables, you should use CSS inlining.

<style th:inline="css">
  :root {
    --primary-color: [[${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5']];
    --secondary-color: [[${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED']];
  }
</style>

Normally the Thymeleaf processor only evaluates expressions in th:* attributes of tags. However, if you set th:inline="css" on your style tag you can use [[...]] expressions to evaluate the text inside a tag.

Thymeleaf into style /style

You have to explicitly tell Thymeleaf to look for expressions in text with th:inline attribute, and than surround the expression with double square brackets.

<style th:inline="text">
    paper-scroll-header-panel{
       --paper-scroll-header-panel-full-header: {
          background-image: url([[@{(${session.user.coverImagePath})}]]);        
       };
    }
</style>

The authors of Thymeleaf have chosen this scheme for performance reasons, because the Thymeleaf's template parsing and processing is very different compared to JSP or Facelets.

How to do if-else in Thymeleaf?

Thymeleaf has an equivalent to <c:choose> and <c:when>: the th:switch and th:case attributes introduced in Thymeleaf 2.0.

They work as you'd expect, using * for the default case:

<div th:switch="${user.role}"> 
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p> 
</div>

See this for a quick explanation of syntax (or the Thymeleaf tutorials).

Disclaimer: As required by StackOverflow rules, I'm the author of Thymeleaf.

Thymeleaf th:text - Put a text without removing HTML structures

I faced the same problem. The answer is th:inline='text'

This should solve your issue

<h1 th:inline="text" >
   [[${header.title}]]
   <small th:text="${header.subtitle}">Subtitle</small>
</h1>

---

or you can also use th:remove="tag"

<h1>
    <span th:text="${header.title}" th:remove="tag">title</span>
    <small th:text="${header.subtitle}" >Subtitle</small>
</h1>

---

Related Topics