Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to change background color for a component using sightly

Avatar

Level 2

I have a particular footer component, written in sightly but the background color is hard coded, which i want to make it dynamic. I want to provide the color in the dialog, then value should hold in footer.js file, and write the sightly code to get image value dynamically in my footer.html file

1 Accepted Solution

Avatar

Correct answer by
Administrator

Hi 

You can do it as:

<p> Color : ${properties.color}</p>
<p style="color:${properties.color @ context='styleToken'};"> Text : ${properties.text}</p>

 

<p> Background Color : ${properties.backgroundColor}</p>
<p style="backgroundColor:${properties.backgroundColor@ context='styleToken'};"> Text : ${properties.text}</p>

 

<script> var trackingID = "${myTrackingID @ context='scriptString'}"; </script>
<style> a { font-family: "${myFont @ context='styleString'}"; } </style>

Reference article :- https://docs.adobe.com/docs/en/htl/docs/getting-started.html?wcmmode=disabled

I hope this would help you.

~kautuk

View solution in original post

4 Replies

Avatar

Employee

You can just replace the background-color with an expression, like : ${properties.backgroundColor}

Avatar

Correct answer by
Administrator

Hi 

You can do it as:

<p> Color : ${properties.color}</p>
<p style="color:${properties.color @ context='styleToken'};"> Text : ${properties.text}</p>

 

<p> Background Color : ${properties.backgroundColor}</p>
<p style="backgroundColor:${properties.backgroundColor@ context='styleToken'};"> Text : ${properties.text}</p>

 

<script> var trackingID = "${myTrackingID @ context='scriptString'}"; </script>
<style> a { font-family: "${myFont @ context='styleString'}"; } </style>

Reference article :- https://docs.adobe.com/docs/en/htl/docs/getting-started.html?wcmmode=disabled

I hope this would help you.

~kautuk

Avatar

Level 2

working fine. thanks!!

            <nav style="background-color:${properties.backgroundColor @ context='styleToken'}">