Column Control Customization | Community
Skip to main content
P
Punith_Shetty
Level 2
October 16, 2015
Solved

Column Control Customization

  • October 16, 2015
  • 2 replies
  • 1162 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by PaulMcMahon

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. 

2 replies

P
PaulMcMahonAccepted solution
Level 8
October 16, 2015

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
smacdonald2008
Level 10
October 16, 2015

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. 

Terms & ConditionsAccessibility statement

Loading footer...