Grouping components in a wrapper div?
Greetings,
I would like to create a container div in the page hierarchy of several pages in order to group and style the main components of that page. For example, a typical forum page contains several components (menu-bar, Page Information, reply-filter, message-list, paging) seen here:
The menu-bar, paging, and other components work in the context of the message-list, which is why we want them grouped. The problem is, these components all share the same parent DIV, one with the classes "lia-quilt-column-alley lia-quilt-column-alley-single". Targeting any of these classes with CSS would be too general, causing styling where not desired.
Another issue, if we later want to add another component outside of the group (say, 'Users Online' for example) then this new component would be included in the grouping, since it shares the same parent DIV, rather than below the grouping as we would want as its not part of the message-list controls.
I tried creating a custom component for a forum page to encapsulate the related components, referencing the component names I see in the XML, such as:
<div class="forum-components-wrapper">
<@component id="menu-bar"/>
<@component id="common.widget.page-information"/>
<@component id="reply-filter"/>
<@component id="message-list"/>
<@component id="paging"/>
</div>
...but this did not work, giving component errors for all EXCEPT for common.widget.page-information. Are these built-in components restricted from custom component usage, or is there another way to reference these components in a package hierarchy like the page-information widget? Calling "common.widget.menu-bar" (for example) did not work either.
I also tried creating a nested component, built from the same Lithium standard components, then include that component in a page, but that did not work either. It would not render the page.
Has anybody ever done anything like this before? I've searched the discussions and KB for something similar to no avail. Is there a way to accomplished this with Lithium studio?
Thanks.
Rob
(acer.stage.lithium.com)
The first step should work for you. You can add these components to a custom component, then add that custom component to the Forum Page. Unfortunately, because these components (menu-bar, reply-filter etc) are scoped to only work on the Forum Page, you will get an error when you save the custom component, because the app will be unable to render the custom component for preview. Don't let that deter you though, add the custom component to the Forum Page and it should work. Let me know if you have any issues and I can debug your stage site.
