Thymeleaf print entity attribute on html without span tag

Question

I need some custom css in html page which css styling is retrieve from database. When page invoke controller will render css style to html. I want to display the color code only instead of whole span tags.

This is result I need:

color: #159426;

This is unexpected result I get:

color: <span>#159426</span>;

This is my directory structure.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title</title>
  <meta content="initial-scale=1.0, width=device-width" name="viewport"/>
  <style th:include="generic/templates/init :: init" th:with="params=${params}"/>
</head>

<body>

<div id="wrapper">
  <a><h1>....111</h1></a>
  <h1>....222</h1>
</div>

</body>

</html>

This is init.html

<script th:inline="javascript" th:fragment="init">
    h1, h2, h3, h4, h5, h6, .site-title {
        font-family: 'Open Sans', sans-serif;
    }

    body.site {
        border-top: 3px solid <span th:text="${params.templateColor}"/>;
        background-color: <span th:text="${params.templateBackgroundColor}"/>;
    }

    a {
        color: <span th:text="${params.templateColor}"/>;
    }
</script>

This is my result

<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" 
      xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title</title>
  <meta content="initial-scale=1.0, width=device-width" name="viewport" />
  <style>
    h1, h2, h3, h4, h5, h6, .site-title {
      font-family: 'Open Sans', sans-serif;
    }
    
    body.site {
      border-top: 3px solid <span>#159426</span>;
      background-color: <span>#f4f6f7</span>;
    }
    
    a {
      color: <span>#159426</span>;
    }
  </style>
</head>

<body>

<div id="wrapper">
  <a><h1>....111</h1></a>
  <h1>....222</h1>
</div>

</body>

</html>

Periklis Douvitsas · Accepted Answer · 2017-09-18 09:32:32Z

5

try using the

th:remove="tag"

for example substitute

a {
        color: <span th:text="${params.templateColor}" />;
  }

with this one

a {
        color: <span th:text="${params.templateColor}" th:remove="tag"/>;
  }

answered Sep 18, 2017 at 9:32

Periklis Douvitsas

2,5011 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Metroids · Accepted Answer · 2017-09-18 14:48:19Z

0

Instead of using html tags in your css, you should really be using inlining. Thymeleaf 3 suports this out of the box. Your style tags should look like this:

<style th:fragment="init">
    h1, h2, h3, h4, h5, h6, .site-title {
        font-family: 'Open Sans', sans-serif;
    }

    body.site {
        border-top: 3px solid [[${params.templateColor}]];
        background-color: [[${params.templateBackgroundColor}]];
    }

    a {
        color: [[${params.templateColor}]];
    }
</style>

answered Sep 18, 2017 at 14:48

Metroids

20.6k4 gold badges49 silver badges56 bronze badges

2 Comments

Webster Lou Over a year ago

Metroids, it's not working for me. I using spring boot with basic thymeleaf dependency org.springframework.boot/spring-boot-starter-thymeleaf

Metroids Over a year ago

If you're using thymeleaf 2, you might have to change the style tag to look like this: <style th:fragment="init" th:inline="text">

Collectives™ on Stack Overflow

Thymeleaf print entity attribute on html without span tag

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related