4 Replies Latest reply on Mar 28, 2013 6:03 AM by jeff_tucker

    How does the parsys component inject styles into the design css file?

    jeff_tucker

      In Adobe AEM ( formerly CQ5 ) the foundation component parsys' design_dialog allows the user to set the "Cell Padding". Whatever value is entered into the text field will show up in the design css.

       

      For example:

       

      Given that the current page is using /etc/designs/my-design the page output will include reference to the /etc/designs/my-design.css stylesheet virtual path.

       

      If the user configured the parsys cell padding to be 30px then the my-design.css file will include the following:

       

      .page_full .par div.section {

        padding: 30px;

      }

       

      The string "30px" is stored in the jcr:content/page/par/section attribute called div.padding, however, I can't figure out how the parsys.jsp injects it into the my-design.css.

       

      The padding gets added dynamically based on the user input. I want to do a similar thing with my component, but I don't know how to write the setting into the main design.css file.

        • 1. Re: How does the parsys component inject styles into the design css file?
          rush_pawan Level 4

          Hello Jeff,

           

          Not sure how much it would help you but as you mentioned you want to control the component HTML design i thought to share some information. "cq:htmlTag" allows you to set and define the top level HTML tag which will apply to component while rendering. if you search in repository using this keyword you will find lot of examples related to this (for example - /apps/geometrixx/components/mobiletrader/parsys/cq:htmlTag).

           

          uses and features:

           

          1. you can use this "nt:unstructured" node to define the top level HTML tag which will be applying while rendering using cq:tagName property (for example "div" to apply div tag.

          2. now you can also setup other properties like

                a. "style" to apply custom style.

               b. "class" to apply existing class from custom css file etc...

           

          Let me know for more information.

           

          Thanks,

          Pawan

          1 person found this helpful
          • 2. Re: How does the parsys component inject styles into the design css file?
            jeff_tucker Level 1

            Hi Pawan,

             

            Thanks for the assistance.

             

            I did play around some with the cq:htmlTag, which is definitely one way to inject inline styles.  Would it be possible to create dialog inputs that save directly to the cq:htmlTag attributes? 

             

            Regardless, my interest in the design.css is partially academic as I am trying to figure out how all the pieces come together.  The cq:htmlTag will effect the rendered HTML tag and its attributes, whereas the parsys component is inserting CSS into the /etc/designs/my-design.css file.  The later is the part I haven't figured out.

             

            Thanks,

            Jeff

            • 3. Re: How does the parsys component inject styles into the design css file?
              rush_pawan Level 4

              Hi Jeff,

               

              I dont think you can achieve this suing "dialog" or "design_dialog" because in both way it will going to store as property of component either at page level or template level whereas the cq:htmlTag is actually component configuration not the instance.

               

              But

               

              i also found an example of "/etc/designs/geometrixx/jcr:content/contentpage/par/textimage" where will see the component node configuration at template level and not able to find where and how it has been done (tried for some time).

               

              Thanks,

              Pawan

              • 4. Re: How does the parsys component inject styles into the design css file?
                jeff_tucker Level 1

                Thanks, Pawan,

                 

                The design files are included when the currentDesign.writeCssIncludes(pageContext); method is executed.  It seems like the secret may be in that code, or there is a default servlet that handles that design.css request.

                 

                It is a mystery.  I guess I will keep poking around and maybe something will appear.

                Thanks, again,

                Jeff