Editing Column Widths in CQ5

| No Comments | No TrackBacks
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. 

<level1 jcr:primaryType="nt:unstructured">

            <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]">

                <section jcr:primaryType="nt:unstructured"/>

                <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&#x9;3 Columns&#xa;4;grid-44&#x9;2 Columns&#xa;4;grid-2222&#x9;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]">

                <section jcr:primaryType="nt:unstructured"/>

                <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&#x9;2 Columns (50%,50%)&#xa;2;grid-93&#x9;2 Columns (75%, 15%)&#xa;2;grid-39&#x9;2 Columns (15%, 75%)&#xa;2;grid-48&#x9;2 Columns (40%, 60%)&#xa;2;grid-84&#x9;2 Columns (60%, 40%)&#xa;3;grid-633&#x9;3 Columns (50%, 25%, 25%)&#xa;3;grid-336&#x9;3 Columns (25%, 25%, 50%)&#xa;3;grid-363&#x9;3 Columns (25%, 50%, 25%)&#xa;3;grid-444&#x9;3 Columns (33%, 33%, 33%)&#xa;4;grid-3333&#x9;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!

No TrackBacks

TrackBack URL: http://jenikya.com/cgi-bin/mt5/mt-tb.cgi/630

Leave a comment

Monthly Archives

Pages

OpenID accepted here Learn more about OpenID
Powered by Movable Type 5.2.3

About this Entry

This page contains a single entry by jenn published on January 24, 2013 10:33 PM.

Movie Posters of 2012 was the previous entry in this blog.

Days Out: Portmahomack, Scotland is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.