Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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



Kautuk Sahni

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



Kautuk Sahni

Avatar

Level 2

working fine. thanks!!

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