Editing Column Widths in CQ5

Hopefully, you would have read the entry "Creating Web Templates in CQ5" before reading this article. In that article, I mentioned the importance of getting the site structure and visual designs correct beforehand, otherwise extensive rework may be needed.

This article explains how to set and edit column widths in Adobe CQ5 CMS for your websites. This article assumes that you can edit the CSS and decide which grid or column framework to use for your website, dependent on the designs.

Set up the CSS for the columns

Once the templates have been identified, the developer can identify column widths and set up a grid framework for the column widths, keeping in mind if the website will be a fluid one or a fixed-width one. The developer will need to identify the acceptable widths available for each template and create the CSS classes for the columns. The CSS will be included in the file, and I suggest splitting the CSS into multiple manageable files as this is good practice. For example, layout-specific CSS should be put in a layout.css. The CSS files will be concatenated and minified in the build process.

Set up columns for the templates

The page information and column information for a page can be found in the file:

[PATH]/etc/designs/[PROJECT-NAME]/content.xml

This file's contents are split by the template, and below is an excerpt of this file showing one template. In the example below, the name of the template is "level1". This file is updated when the columns are edited in the CMS.

Notes:

The columns for this website (Mysite) are put into a group named Mysite.
Each section in the template is separated in this file. The following different sections, marking the parsys in the template, are described below:

main
secondary

For each parsys section, the "colctrl" is the column control area, and it defines the available layouts and the CSS style. For example, 3 Columns (25%, 25%, 50%)
3;grid-363 is the name of the column layout and the CSS class. (The column class is "grid-363", and the rest of the string above is the text that the content editor will see when they use the CMS to select a column.) The content editor will see the description for each column option to understand what column type to use in the parsys.

<main

jcr:lastModified="{Date}2013-01-06T10:45:25.586Z"

jcr:lastModifiedBy="admin"

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys"

components="[group:Columns,group:Mysite]">

<colctrl

jcr:lastModified="{Date}2013-01-06T10:39:03.337Z"

jcr:lastModifiedBy="admin"

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys/colctrl"

layouts="3;grid-333	3 Columns
4;grid-44	2 Columns
4;grid-2222	4 Columns"/>

<col_end13242935548710

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys/colctrl"

controlType="end"/>

</main>

<secondary

jcr:lastModified="{Date}2013-01-06T10:46:16.990Z"

jcr:lastModifiedBy="admin"

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys"

components="[/libs/foundation/components/flash,group:Columns,group:Mysite]">

<colctrl

jcr:lastModified="{Date}2013-01-06T10:38:52.144Z"

jcr:lastModifiedBy="admin"

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys/colctrl"

layouts="2;grid-66	2 Columns (50%,50%)
2;grid-93	2 Columns (75%, 15%)
2;grid-39	2 Columns (15%, 75%)
2;grid-48	2 Columns (40%, 60%)
2;grid-84	2 Columns (60%, 40%)
3;grid-633	3 Columns (50%, 25%, 25%)
3;grid-336	3 Columns (25%, 25%, 50%)
3;grid-363	3 Columns (25%, 50%, 25%)
3;grid-444	3 Columns (33%, 33%, 33%)
4;grid-3333	4 Columns (25%, 25%, 25%, 25%)"/>

<col_end13243732957980

jcr:primaryType="nt:unstructured"

sling:resourceType="foundation/components/parsys/colctrl"

controlType="end"/>

</secondary>

</level1>

Have fun

Make sure that the file above is saved each time so that the content editor can select the column that they wish to use for the area. Enjoy!

Editing Column Widths in CQ5

Categories:

Tags:

No TrackBacks

Leave a comment

Search

Editing Column Widths in CQ5

Categories:

Tags:

No TrackBacks

Leave a comment

Search

Archives

Tag Cloud