I'm setting CSS color variables inside a style tag in a Thymeleaf template. The color values are coming from the model object. I also want to apply a default color, in case the model attirbute is not there.
But when I render the template, Thymeleaf doesn't evaluate the expression, but assigns the entire expression as a string literal, instead of the color value.
Below is my style tag. I've done the same thing in Apache Freemarker, and it worked fine. I'm pretty new to Thymeleaf, what should I do differently here?
<style>
:root {
--primary-color: ${brandingConfig?.themeConfig?.primaryColor} ?: '#633EA5';
--secondary-color: ${brandingConfig?.themeConfig?.secondaryColor} ?: '#E9E6ED';
}
</style>
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.
Related
I'm setting CSS color variables inside a style tag in a Thymeleaf template. The color values are coming from the model object. I also want to apply a default color, in case the model attirbute is not there.
I already used the correct Answer in Question 62610602 but in my case a backslash is pasted in front of the color code. This defenetly isn't comming from the given String
:root {
--accent-color: \#00FF00;
}
The Code in the Thymeleaf template is:
<style th:inline="css">
:root {
--accent-color: [[${appUser?.accentColorCode} ?: '#ea0a8e']];
}
</style>
Looks like [[...]] css expressions escape output as CSS identifiers. You'll have to use the unescaped [(...)] expression to output colors. (I've edited my original answer...)
<style th:inline="css">
:root {
--accent-color: [(${appUser?.accentColorCode} ?: '#ea0a8e')];
}
</style>
I would like to bind a variable as it:
<style lang='sass'>
.picker-item.picker-item-selected
background-color: {{ MY_BG_COLOR }}
</style>
this obviously does not work.
For the context I'm using a picker from framework7 which I want to override the background-color depending of user actions.
Then I cannot really use usual ways to bind values for styling
Is there a way to bind a value for global css class?
You can't do that you want directly, but you can Use "inline style":
You must to bind an inline style with a variable
<div id="app">
<div :style="divInline">Hello</div>
</div>
You must create the variable in the data section
data: {
divInline: 'background-color:red;'
}
after that, you can change the inline style through methods.
methods: {
changeColor( color ) {
this.divInline = 'background-color:' + color + ';'
}
}
Example complete
I'm looking into custom CSS properties and have come up with the code below.
If I put the CSS inline using a STYLE attribute on the canvas tag (like this: style="--rgLinewidth: 3" ) then I can get the custom CSS values using the script shown below.
But using a tag, as below, then it doesn't show the custom CSS properties.
Is it possible to? And if so how?
<html>
<head>
<style>
canvas#cvs {
--rgLinewidth: 3;
background-color: red;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
styles = window.getComputedStyle(canvas);
alert(styles.getPropertyValue('background-color'));
alert(styles.getPropertyValue('--rgLinewidth'));
for (var i=0; i<styles.length; i++) {
if (canvas.style[i].indexOf('--rg') === 0) {
var value = styles.getPropertyValue(canvas.style[i]);
alert([canvas.style[i], value]);
}
}
</script>
</body>
</html>
It does not work because you query for computed style and then attempt to retrieve values of corresponding properties from the inline style, where they do not exist -- your canvas does not define an inline style. You need to query the values through the same styles object where you find the properties.
Consider the following function which when passed an element, will search through its computed style and return the value of the first CSS variable whose name starts with --rg:
function find_first_rg_value(el) {
var styles = getComputedStyle(el);
for (var i = 0; i < styles.length; i++) {
if (styles[i].startsWith('--rg')) {
return styles.getPropertyValue(styles[i]);
}
}
}
(Use like find_first_rg_value(canvas))
The difference between my approach and yours is, as I said, that you attempt to fetch the value from canvas.style[i], but canvas.style is effectively empty. Use styles instead.
Computed style (getComputedStyle), as the name implies, contains "summary" style computed per CSS cascading, inheriting, and so on, with inline style, if any, applied on top (overriding priority). Assigning inline style therefore affects the computed style, but querying inline style only gives you inline style you assigned, no more.
This means that in most cases like yours one would want to use getComputedStyle. Additionally, since CSS variables cannot be queried using style.fontName syntax, you need to use getPropertyValue function for these (all dashes intact in the passed property name), regardless if you are dealing with an inline or computed style object.
I'm using Polymer with Thymeleaf and I want to set a background image in paper-scroll-header-panel element when it's uncondensed. So, I'm trying this:
paper-scroll-header-panel{
--paper-scroll-header-panel-full-header: {
background-image: url("+ #{(${session.user.coverImagePath})} + ");
};
}
But Thymeleaf is not rendering this code, when I access this template I get the code as it is. So, how can I set this property with Thymeleaf?
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.
I'm creating a span in my web page with dojo.create, and need to apply CSS to it. I can see how to apply a style to it in the dojo reference, but I'd rather apply it via the external stylesheet (there's quite a few attributes I need to set and I'd rather not do it inline).
So given the example code below, how would I apply the CSS for the printSpan class?
var node = dojo.create("span", {innerHTML:_text, id:"printSpan", class:"printSpan"}, map);
You can write this in your external stylesheet:
.printSpan { color: red; }
This is called the class selector.
By the way, your code should be:
{ innerHTML : _text, id : "printSpan", "class" : "printSpan" }
Notice the colon was inside the "class" string, though it should be outside and printSpan is a different string.