Skip to main content
S
shreyasl9335234
Level 2
October 18, 2016
Solved

How to change background color for a component using sightly

  • October 18, 2016
  • 4 replies
  • 6778 views

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.
    Best answer by kautuk_sahni

    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

    4 replies

    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe Employee
    October 18, 2016

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

    smacdonald2008
    smacdonald2008
    Level 10
    October 18, 2016

    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

    kautuk_sahni
    Adobe Employee
    kautuk_sahniAdobe EmployeeAccepted solution
    Adobe Employee
    October 18, 2016

    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
      A
      Abhishek_jha65-
      Level 2
      December 28, 2017

      working fine. thanks!!

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

        Terms & ConditionsAccessibility statement

        Loading footer...