This blog post is a quick overview on packing your CQ components for distribution.
This is a follow up to our MAX session on creating custom components.
Thank you so much for these videos helped me a lot, if it is at all possible more CQ tutorials would be amazing
Glad that they helped. I was contemplating doing some simple tips and tricks posts.
What would you like to see?
Perhaps some handy extra properties that can be added to the default library components like resizing (e.g. how can a carousel fit bigger images), aligning (within the parsys), ability to remove border between components (e.g. if i have a bunch of image components in a column, how do i remove the border so there is no gap between them).
I’m fairly new to web development but the company I work for really wants to implement CQ, perhaps a demo with a simple HTML CSS website being turned into website that works with CQ; keeping its original design but also implementing the drag and drop aspect.
Honestly anything would be greatly appreciated, the more learnt about CQ the better.
I will post some more sessions soon. I did not have as many planned for the front end but I will add some in.
As for spacing issues I would inspect the DOM elements and see what is specifying the extra padding or margin that is unwanted. Then look at what style sheet its defined in. Then override that in your style sheet. If needed sometimes it can be helpful to turn off the AUTO inserted surrounding div for the component by adding this property to the component definition.
cq:noDecoration Boolean If true, the component is not rendered with automatically generated div and css classes.
There will cases where you will end up creating your own component that inherits from the stock component and just tweak a couple really small things. I am not sure if its super common but I know that I end up doing it a lot. I am picky.
Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Copyright © 2013 Adobe Systems Incorporated. All rights reserved.