How to change background color for a component using sightly | Community
Skip to main content
S
shreyasl9335234
New Participant
October 18, 2016
Solved

How to change background color for a component using sightly

  • October 18, 2016
  • 4 replies
  • 6756 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

    A
    Abhishek_jha65-
    New Participant
    December 28, 2017

    working fine. thanks!!

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

      kautuk_sahni
      kautuk_sahniAccepted solution
      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
        smacdonald2008
        smacdonald2008
        New Participant
        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

        Feike_Visser1
        Feike_Visser1
        Employee
        October 18, 2016

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

        Terms & ConditionsAccessibility statement

        Loading footer...