Skip navigation
Currently Being Moderated

CQ 5.4 - How to create a column layout?

Apr 10, 2012 11:00 AM

Tags: #website #crx #cq

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

 
Replies
  • Justin Edelson
    276 posts
    Nov 24, 2010
    Currently Being Moderated
    Apr 10, 2012 12:21 PM   in reply to MatheusOliveira

    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.   

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 12:26 PM   in reply to MatheusOliveira

    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.

     
    |
    Mark as:
  • Justin Edelson
    276 posts
    Nov 24, 2010
    Currently Being Moderated
    Apr 10, 2012 12:35 PM   in reply to MatheusOliveira

    This looks like you are missing the CSS definitions.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 2:24 PM   in reply to MatheusOliveira

    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}

     

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 11:06 AM   in reply to MatheusOliveira

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 12:36 PM   in reply to MatheusOliveira

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2012 10:24 AM   in reply to MatheusOliveira

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2013 8:58 AM   in reply to MatheusOliveira

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points