How to change background color for a component using sightly | Community

shreyasl9335234

Level 2

Solved

How to change background color for a component using sightly

4 replies
6762 views
Translate

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

kautuk_sahniAccepted solution

Employee

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

Abhishek_jha65-

Level 2

working fine. thanks!!

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

Translate

kautuk_sahniAccepted solution

Employee

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

Translate

Kautuk Sahni

Level 10

Also - if you want to create a color dialog - see:

http://scottsdigitalcommunity.blogspot.ca/2016/03/how-to-create-aem-touch-ui-color-picker.html

Translate

Employee

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

Translate