CODEWITHSUNDEEP
thymeleaf
Webster Lou
Webster Lou

Reputation: 51

Thymeleaf print entity attribute on html without span tag

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.

enter image description here

<!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>

Upvotes: 2

Views: 2156

Answers (2)

Metroids
Metroids

Reputation: 20477

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>

Upvotes: 0

Periklis Douvitsas
Periklis Douvitsas

Reputation: 2491

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"/>;
  }

Upvotes: 5

Related Questions