Column Control Customization

[Punith_Shetty]

Hi

I need to customize the default Column Control Component. say some thing like i need to change the div naming structure or add a new div b/w c0 and c1 div's

Ex

default component generates div in the following way

<div class="mainDiv">

<div class="mainDiv-c0">

</div>

<div class="mainDiv-c1">

</div>

</div>

suppose i need to customize the column control and make it generate a new div b/w c0 and c1, then how can it be achieved.

ex

<div class="mainDiv">

<div class="mainDiv-c0">

</div>

<div class="separatorBorder"></div>

<div class="mainDiv-c1">

</div>

</div>

[Paul_McMahon · Accepted solution]

The column control is a some what unique component in that the markup you want to change is actually in the Paragraph System component. The column control component's JSPs only impact the authoring display. You can control the CSS class names to a certain extent through the configuration of the column control component, however to change the mark up that is printed out beyond controlling the class names you need to extend the paragraph system component (foundation/components/parsys/parsys.jsp). 

While this will achieve your goals it puts you in the position of customizing a core component of the system that is often updated in product upgrades. If at all possible I'd encourage you explore whether or not you can achieve your layout requirements within the context of the HTML markup elements that Paragraph system provides by default. You may end up with more complex CSS, but if possible that is perhaps a better option than extending the paragraph system component. 

[smacdonald2008]

This is supported. Like all CQ widgets, you can extend the  Column Control Component. For information about extending widgets, see:

http://dev.day.com/docs/en/cq/current/developing/widgets.html

All CQ components are just JavaScript, CSS, and HTML.