Customize column control in CQ5 (Adding background color which is configured in dialog)

1.   Create a folder structure like apps/foundation/components.

2.   Copy the parsys component from the(/libs/foundation/components) to  /apps/foundation/components.

3.   In the column control dialog add following configurations
       (/apps/foundation/components/parsys/colctrl/dialog/items)

.           jcr:primaryType ="cq:Widget"
            fieldDescription ="eg : #f7f7f7"
            fieldLabel = "Background color"
            name = "./bgColor"
            xtype = "textfield"

            jcr:primaryType="cq:Widget"
            fieldLabel="Apply linear gradient"
            name="./linearGradient"
            type="checkbox"
            xtype="selection"

4.    Add the following snippet of code in parsys.jsp at line number 50.

                 //ading styles for  background color to column
                Node parNode = par.adaptTo(Node.class);
                String bgColorStyle = "";
                String bgColor = "";
                String linearGradient = "";
                if(parNode.hasProperty("bgColor")){
                 bgColor = parNode.getProperty("bgColor").getString();
                 bgColorStyle = "background: "+bgColor;
                }
                if(parNode.hasProperty("linearGradient") &&
                  parNode.getProperty("linearGradient").getString().equalsIgnoreCase("true") ){
                 
                bgColorStyle = "background-image: linear-gradient( "+bgColor + " 0%, #fff 45%,"+bgColor +
                                          " 75%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="
                                         +bgColor+", endColorstr="+bgColor+" GradientType=0)";
                }
         
                // open outer div
                %><div class="parsys_column <%= par.getBaseCssClass()%>" style="<%=bgColorStyle%>">