Twine Harlowe 3.3.9
Hello! I’m desperately wanting to use a (meter:) macro but I want the unfilled portion to be a color instead of transparent. I want to be able to make a physical representation of the results of a debate, so it’s like both sides/colors are fighting. Is this possible?
Supplying an example of your existing code can help those answering questions about how to use the macros in that code. I will assume your (meter:) macro call looks something like…
(set: $level to 5)
(meter: bind $level, 10, "X===", "Title", red)
A web-browser’s Web Developer Tools will show that the above generates the following HTML when that Passage is visited…
<tw-expression type="macro" name="meter" return="command" data-2bind="true" style="margin-left: 0%; width: 25%; height: 1.5em; display: block;">
<tw-meter style="height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, rgba(230, 25, 25, 1) 0%,rgba(230, 25, 25, 1) 200%);background-size:50%;background-position-x:left;text-align:left" data-raw="">Title</tw-meter>
</tw-expression>
From the above structure we can see that the unfilled portion of the “meter” is controlled by the background colour of the outer <tw-expression> element, so the CSS Rule placed in the project’s Story Stylesheet area needs to target it.
The following changes the background colour of all meters to grey.
tw-expression[name="meter"] {
background-color: grey;
}
If you want to apply different styling to each meter then you’ll need a way to distinguish one meter from another, and one technique for doing that is to enclose the (meter:) macro call inside a Named Hook…
|level>[(meter: bind $level, 10, "X===", "Title", red)]
…which would change the generated HTML structure to…
<tw-hook name="level">
<tw-expression type="macro" name="meter" return="command" data-2bind="true" style="margin-left: 0%; width: 25%; height: 1.5em; display: block;">
<tw-meter style="height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, rgba(230, 25, 25, 1) 0%,rgba(230, 25, 25, 1) 200%);background-size:50%;background-position-x:left;text-align:left" data-raw="">Title</tw-meter>
</tw-expression>
</tw-hook>
…so the Selector of the CSS Rule targeting that specific meter would need to be changed to…
tw-hook[name="level"] tw-expression[name="meter"] {
background-color: grey;
}