14 Replies Latest reply: Jul 17, 2013 8:58 AM by msplant RSS

    CQ 5.4 - How to create a column layout?

    MatheusOliveira Community Member

      Greetings everyone;

       

       

        I'm trying to create a website with some components that I get from a imported site... So far, so good, but when I try to drop a "column" component in my website from the components little window (even when I select the 2 columns or the 3 columns), the is no one column layout and the "columns" doesn't exist

       

        In Geometrixx samples, the columns got layouts like "2 columns, 50 x 50 x" and others, but none is listed on my Column Layout dialog (editing the component). I try to find the source-code of the component, but without success. Can someone tell me how to get real "columns" structures on my site?

       

        Some images:

       

       

          No Columns 1.jpg

       

           No columns 2.jpg

        • 1. Re: CQ 5.4 - How to create a column layout?
          justin_at_adobe Adobe Employee

          You need to specify the possible column layouts in the design dialog. If you go to the Geometrixx page and switch into Design mode, you'll see how this is done.   

          • 2. Re: CQ 5.4 - How to create a column layout?
            Ron @ SFU Community Member

            You can also edit this in CRXDE Lite/CRX Explorer (for example; /etc/designs/geometrixx/jcr:content/widepage/par/colctrl).  I find this easier and faster when having to update this for mutliple page designs.

            • 3. Re: CQ 5.4 - How to create a column layout?
              MatheusOliveira Community Member

              Justin,

               

                 Indeed, in the design view of the Geometrixx webpage, I discovered how to get "Column layouts". Thank you for this.

                 But, even when I configured my Column control with these data, there is no columns, only rows, like in the images above:

               

              CQ Columns 3.jpg

               

              CQ Columns 2.jpg

               

              CQ Columns 1.jpg

               

                 Rows, not columns :s

                 Where can I change this?

               

               

              Thanks again.

              • 4. Re: CQ 5.4 - How to create a column layout?
                justin_at_adobe Adobe Employee

                This looks like you are missing the CSS definitions.

                • 5. Re: CQ 5.4 - How to create a column layout?
                  MatheusOliveira Community Member

                  Ron,

                   

                    The problem is that I need to show to my clients how easy is to build a page in CQ. So, I can't change source-codes

                    I think this is the fast way too, I can simple open the html file for this site and build a div structure, but the plan is to do

                  in the CQ drag and drop system, so...

                   

                    Anyway, thanks for the reply.

                  • 6. Re: CQ 5.4 - How to create a column layout?
                    MatheusOliveira Community Member

                    Justin,

                     

                       And, what do I need to do now? Look for the Geometrixx CSS file that includes the css style code for this component and copy in my page?

                    • 7. Re: CQ 5.4 - How to create a column layout?
                      cjantoli

                      Copy classes from the CSS from the geometrixx site to your designs/<app>/static.css

                       

                      /etc/designs/geometrixx/static.css

                       

                      line 814 to 864

                       

                      /* column control layouts */

                      div.cq-colctrl-cols {width: 100%; float: left; }

                       

                      div.cq-colctrl-default { width: 100%;}

                       

                      /* layout 0 : 50% 50% ( grid6 + grid6 ) */

                      div.cq-colctrl-lt0 { }

                      div.cq-colctrl-lt0-c0 { width: 340px; margin-right:10px}

                      div.cq-colctrl-lt0-c1 { width: 340px; margin-left: 10px}

                       

                      /* layout 1 : 33% 33% 33%( grid4 + grid4 + grid4 ) */

                      div.cq-colctrl-lt1 { }

                      div.cq-colctrl-lt1-c0 { width: 220px; margin-right: 10px;}

                      div.cq-colctrl-lt1-c1 { width: 220px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt1-c2 { width: 220px; margin-left: 10px; }

                       

                      /* layout 2: 16% 16% 16% 33% ( grid2.6 + grid2.6 + grid2.6 + grid4 ) */

                      div.cq-colctrl-lt2 { }

                      div.cq-colctrl-lt2-c0 { width: 140px; margin-right: 10px;}

                      div.cq-colctrl-lt2-c1 { width: 140px; margin-left: 10px; margin-right: 10px}

                      div.cq-colctrl-lt2-c2 { width: 140px; margin-left: 10px; margin-right: 10px}

                      div.cq-colctrl-lt2-c3 { width: 220px; margin-left: 10px }

                       

                      /* layout 3: 4 x 25% ( grid3 + grid3 + grid3 + grid3 ) */

                      div.cq-colctrl-lt3 { }

                      div.cq-colctrl-lt3-c0 { width: 160px; margin-right: 10px;}

                      div.cq-colctrl-lt3-c1 { width: 160px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt3-c2 { width: 160px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt3-c3 { width: 160px; margin-left: 10px; }

                       

                      /* layout 4: 5 x 20% ( grid2.5 + grid2.5 + grid2.5 + grid2.5 + grid2.5 ) */

                      div.cq-colctrl-lt4 { }

                      div.cq-colctrl-lt4-c0 { width: 124px; margin-right: 10px;}

                      div.cq-colctrl-lt4-c1 { width: 124px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt4-c2 { width: 124px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt4-c3 { width: 124px; margin-left: 10px; margin-right: 10px;}

                      div.cq-colctrl-lt4-c4 { width: 124px; margin-left: 10px; }

                       

                      /* widepage layouts */

                       

                      /* layout 5 : 50% 50% ( grid8 + grid8 ) */

                      div.cq-colctrl-lt5 { }

                      div.cq-colctrl-lt5-c0 { width: 460px; margin-right:10px}

                      div.cq-colctrl-lt5-c1 { width: 460px; margin-left: 10px}

                       

                      /* layout 6 : 25% 25% ( grid4 + grid4 + grid4 + grid4) */

                      div.cq-colctrl-lt6 { }

                      div.cq-colctrl-lt6-c0 { width: 220px; margin-right:10px}

                      div.cq-colctrl-lt6-c1 { width: 220px; margin-left: 10px; margin-right:10px}

                      div.cq-colctrl-lt6-c2 { width: 220px; margin-left: 10px; margin-right:10px}

                      div.cq-colctrl-lt6-c3 { width: 220px; margin-left: 10px}

                       

                      • 8. Re: CQ 5.4 - How to create a column layout?
                        MatheusOliveira Community Member

                        I think that this is probably the reason, but just copying the file doesn't work

                         

                        Heres where do I copy the static.css, and the link on my jsp page:

                         

                          CQ CSS file.jpg

                         

                        And heres, the two lines (should be columns) columns component, same as before even with the css file:

                         

                        CQ Columns.jpg

                         

                        There is something that I can try to fix this? Maybe the static.css of the Geometrixx project indentifies the components with a given id or class name, and I need to change to matches my page?

                         

                        Anyway, thanks guys for the try and the attention so far.

                        • 9. Re: CQ 5.4 - How to create a column layout?
                          cjantoli Community Member

                          Your static.css should live under /etc/designs/Projeto Stefanini/static.css

                           

                          Then you can tell your page to get it from <link rel="stylesheet" href="/etc/designs/Projeto Stefanini/static.css">

                           

                          You can define other CSS pages in the etc/designs/<application>/ folder and point to them in your <head> section.

                           

                          I would also recomend keeping spaces out of the names of your folders and files, though it looks like it's working, I would be afraid it would cause issues down the road. You should consider a camelCase convention (no spaces) or all lowercase. Just avoid spaces as a convention and the server will be case sensitive.

                           

                          Best of luck.

                          • 10. Re: CQ 5.4 - How to create a column layout?
                            MatheusOliveira Community Member

                            cjantoli,

                             

                               The weird thing is that I don't get a designs folder to my site. I believe that this is automatically created, but in this case, I don't know why, there is no folder in design folder to my project. I created this project just like the ones in the developers training, I don't know what to do now.

                             

                              Try to put the css file in "content" structure, because there is where my html pages are found, but nothing changed... There is something else I can do to get the "columns" components working?

                             

                            Thank you.

                            • 11. Re: CQ 5.4 - How to create a column layout?
                              cjantoli Community Member

                              You will have to create the "Projeto Stefanini" directory. The only time it would automatically create a folder is if you used the Build>Create Project

                               

                              I hate to sound like a jerk, but most of this is covered in the documentation.

                               

                              This one will give you the best overview. When it comes to CQ5 the devil is in the details and remember that "naming" matters:
                              http://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/website.html

                               

                              This section talks about the "Designer"
                              http://wem.help.adobe.com/enterprise/en_US/10-0/wem/howto/website.html#Setting up the Designer

                              • 12. Re: CQ 5.4 - How to create a column layout?
                                MatheusOliveira Community Member

                                I just come here to talk that I found and try to save you some time, but i'm late.

                                Indeed, this part is covered in documentation and I already build the design folder.

                                 

                                You're not sounding like a jerk, on the contrary, I understand that if this exists on the documentation, I should first read and understand what I can.

                                 

                                Even building the design folder and applying the css, the columns showing with the  wrong display. Anyway, i'm pretty sure that I can find the reason 

                                or the place to solve this, it will only get some time.

                                 

                                Thank you very much for the help until here.

                                • 13. Re: CQ 5.4 - How to create a column layout?
                                  aparna a Community Member

                                  Did you find the solution for this? I am having the same problem.

                                  • 14. Re: CQ 5.4 - How to create a column layout?
                                    msplant

                                    For anyone who is looking for the location of the Column Control or Column 2/3 components. These are located under the parsys component: /libs/foundation/components/parsys/colctrl