{{#if tmfxActive}} {{#each tmfxPresets }} {{/each}} {{/if}} {{#if ceEffects}} {{#each ceEffects }} {{/each}} {{/if}} {{#each macros }} {{/each}}

Use unique IDs and classes to apply styles as it is not possible to limit CSS scope to just the overlay and anything entered here will be applicable to the rest of the document.

Register your listeners here. Overlays "html" is accessible in this scope.

{{#each interactivity as |event|}}
{{event.listener}}
{{#if ../ceActive}}
{{/if}} {{#if ../tmfxActive}}
{{/if}}
{{/each}}

Overlay marked as a UI element will always display above Tokens and will not interact with scene lighting.

Display Priority

Place the image, video or text underneath the token.

Place this underlay bellow all tokens.

Place this overlay above all tokens.

Link To Token
Link To Stage
Video
{{#each img as |image|}}
{{/each}}
{{~>modules/token-variants/templates/partials/repeating.html repeating=repeating root="" repeat=repeat padding="true"}}
Appearance
{{~>modules/token-variants/templates/partials/interpolateColor.html root="" interpolateColor=interpolateColor label="Tint Color"}}
Dimensions
Positioning

Offset relative to parent width.

e.g. If you want the overlay positioned at the left edge of the parent, set it as "0.5" which is equivalent to "parent width * 0.5"

Offset relative to parent height.

e.g. If you want the overlay positioned at the top of the parent, set it as "0.5" which is equivalent to "parent height * 0.5"

Set the point on an overlay to be used to anchor it to the center of the parent.

{{{filterOptions}}}

Overlay will be visible in explored areas of the map even when the Token is not.

Limit Visibility to Users {{#each users as |user|}}
{{/each}}
Limit Visibility to State
Limit Visibility to Token With Effect

Overlay will only be visible to Tokens with this effect applied to them.

Limit Visibility to Token With Property

Overlay will only be visible to Tokens that satisfy this expression.

e.g.
actor.system.attributes.senses.truesight>0
actor.system.skills.prc.passive>=15
hp<=50%

For this text to show make sure that no image is assigned to this overlay.

Token attributes can be inserted as so: {{name}}

{{~>modules/token-variants/templates/partials/repeating.html repeating=text.repeating root="text." repeat=text.repeat}}
{{ colorPicker name="text.fill" value=text.fill }}
{{~>modules/token-variants/templates/partials/interpolateColor.html root="text." interpolateColor=text.interpolateColor label="Fill Color"}}
Wrapping

Curve

Curve the text either by defining an angle it should bend by or a radius of an imaginary circle whose edge the text should sit on.

{{#each shapes as |shape|}}

{{#if (eq shape.shape.type "rectangle")}} {{~>modules/token-variants/templates/partials/shapeRectangle.html shape}} {{else if (eq shape.shape.type "ellipse")}} {{~>modules/token-variants/templates/partials/shapeEllipse.html shape}} {{else if (eq shape.shape.type "polygon")}} {{~>modules/token-variants/templates/partials/shapePolygon.html shape}} {{else if (eq shape.shape.type "torus")}} {{~>modules/token-variants/templates/partials/shapeTorus.html shape}} {{/if}}
Line Style
{{ colorPicker name=(concat "shapes." @index ".line.color") value=shape.line.color }}
Fill
{{ colorPicker name=(concat "shapes." @index ".fill.color") value=shape.fill.color }}
{{~>modules/token-variants/templates/partials/interpolateColor.html root=(concat "shapes." @index ".fill.") interpolateColor=shape.fill.interpolateColor label="Color"}}
{{~>modules/token-variants/templates/partials/repeating.html repeating=shape.repeating root=(concat "shapes." @index ".") repeat=shape.repeat padding="true"}}

{{/each}}

Define variables that you can insert into any overlay field. Useful when you have a constant value you want to re-use; for example multiple shapes that all share the same width

e.g. @shapeWidth

{{#each variables as |variable|}} {{/each}}
NameValue
@