Adobe Community: CQ 5.4 - How to create a column layout?

249 posts
Nov 24, 2010

Currently Being Moderated

1. Justin Edelson,

Apr 10, 2012 12:21 PM in reply to MatheusOliveira

Report

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

2. Ron @ SFU,

Apr 10, 2012 12:26 PM in reply to MatheusOliveira

Report

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:

Currently Being Moderated

3. MatheusOliveira,

Apr 10, 2012 12:30 PM in reply to Justin Edelson

Report

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:

Rows, not columns :s

Where can I change this?

Thanks again.

|

Mark as:

249 posts
Nov 24, 2010

Currently Being Moderated

4. Justin Edelson,

Apr 10, 2012 12:35 PM in reply to MatheusOliveira

Report

This looks like you are missing the CSS definitions.

|

Mark as:

Currently Being Moderated

5. MatheusOliveira,

Apr 10, 2012 12:35 PM in reply to Ron @ SFU

Report

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.

|

Mark as:

Currently Being Moderated

6. MatheusOliveira,

Apr 10, 2012 12:38 PM in reply to Justin Edelson

Report

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?

|

Mark as:

Currently Being Moderated

7. cjantoli,

Apr 10, 2012 2:24 PM in reply to MatheusOliveira

Report

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

8. MatheusOliveira,

Apr 11, 2012 10:03 AM in reply to cjantoli

Report

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:

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

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.

|

Mark as:

Currently Being Moderated

9. cjantoli,

Apr 11, 2012 11:06 AM in reply to MatheusOliveira

Report

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

10. MatheusOliveira,

Apr 11, 2012 12:12 PM in reply to cjantoli

Report

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.

|

Mark as:

Currently Being Moderated

11. cjantoli,

Apr 11, 2012 12:36 PM in reply to MatheusOliveira

Report

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

12. MatheusOliveira,

Apr 11, 2012 12:50 PM in reply to cjantoli

Report

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.

|

Mark as:

Currently Being Moderated

13. aparna a,

CQ5

CQ 5.4 - How to create a column layout?

Apr 10, 2012 11:00 AM

More Like This

Bookmarked By (0)

Answers + Points = Status