L3010
New Member
Posts: 49
inherit
264353
0
Mar 4, 2023 7:57:32 GMT -8
L3010
49
May 2021
l3010
|
Post by L3010 on Aug 24, 2021 4:22:49 GMT -8
Hi! I wonder if there is a way to change the @-CSS-variables (avalible to use in the CSS style-sheet) in a HTML-dokument (layout template) inside a <style>-tag.
The following code (used in the "board" layout templaye) doesn't seem to work. The purpose of this @-variable is to change the secondaty background color (every other) in a post.
{if $[board.category_id] == 5} <style type="text/css"> @container_background_color_2: #f0f;
</style>
{/if}
B: If there is no way to change the @-CSS-variables in a style sheet, is there a way to change CSS-"var()"-variables?
This code didn't seem to work when i tried it either :/
{if $[board.category_id] == 5} <style type="text/css"> :root { --bg: #0ff !important; } </style> {/if}
If anyone has any solutions or ideas of how to acomplish something that produces the same result, let me know! :-) /Leo
|
|
#eb7100
1480
0
1
Mar 28, 2024 3:30:24 GMT -8
Craig
208,824
September 2001
cmdynasty
|
Post by Craig on Aug 24, 2021 5:17:55 GMT -8
Those variables will only work in the stylesheet, i'm afraid. You can still do what you want to do, but you would need to target the specific classes you want to change, and update the color in the template ( code you put in ) when you want to change it.
{if $[board.category_id] == 5} <style type="text/css"> .posts .post.even, .post .quote div.quote_body, .post.even .quote div.quote div.quote_body { background-color: #f0f; } </style> {/if}
Or, alternately you would modify the template a little to add the category ID to the container and then just add the css to the stylesheet. So in the Thread template:
<div class="container posts">
Add an id to that tag:
<div id="$[thread.category_id]-posts-container" class="container posts">
Then in the stylesheet you can add, using that ID, you can target the areas you can target the threads in that category.
#5-posts-container .posts .post.even, #5-posts-container .post .quote div.quote_body, #5-posts-container .post.even .quote div.quote div.quote_body { background-color: @container_background_color_2; }
Hopefully that helps.
|
|
L3010
New Member
Posts: 49
inherit
264353
0
Mar 4, 2023 7:57:32 GMT -8
L3010
49
May 2021
l3010
|
Post by L3010 on Aug 26, 2021 23:11:00 GMT -8
Thanks for the great technique.
|
|