Customize portal's layout

Note

This section is related to the configuration. You can see a sample here. You can leave all the portlet's preferences as blank, that means the default value will be taken and you do not need to care about it at this time.

For example, you will have a layout like this:

In which:

Branding: A branding application
Top navigation: A top navigation application

A table column container with three nested containers:

Left Column and Right Column: Contain one application for each.
Main content: Contain the page body.

And here is the fragment of portal.xml located in this path: <myportal_path>/src/main/webapp/WEB-INF/conf/myportal/portal/portal/mysite/portal.xml.




<!-- ... -->



<portlet-application>

  <!-- Branding application. You can use WCM web content *exo:webContent* for the content and SCV portlet to display -->

</portlet-application>



<portlet-application>

  <!-- navigation application. You can use WCM web content *exo:webContent* for the content and SCV portlet to display -->

</portlet-application>



<container id="MySite" template="system:/groovy/portal/webui/container/UITableColumnContainer.gtmpl">

  <container id="LeftColumn" template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

    <!-- One or more application(s) here -->

    <portlet-application>

    </portlet-application>

  </container>



  <container template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

    <page-body>

    </page-body>

  </container>



  <container id="RightColumn" template="system:/groovy/portal/webui/container/UIContainer.gtmpl">

    <!-- One or more application(s) here -->

    <portlet-application>

    </portlet-application>

  </container>

</container>



<portlet-application>

  <!-- Footer application. You can use WCM web content *exo:webContent* for the content and SCV portlet to display -->

</portlet-application>



<!-- ... -->

As you see in the portal.xml file above, every container tag has an id attribute, for example "<container id = 'RightColumn'>". When you create a CSS file, the property applied for this container should have the following name manner:

${container_id}TDContainer

and the details of this container:

RightColumnTDContainer

The reason is, when you have a look in the file system: /groovy/portal/webui/container/UITableColumnContainer.gtmpl shown above, you will see this code fragment:

<table class="UITableColumnContainer"
  style="table-layout: fixed; margin: 0px auto;">
  <tr class="TRContainer">
    <% for(uiChild in uicomponent.getChildren()) {%>
    <td class="${uiChild.id}TDContainer TDContainer"><%
      uicomponent.renderUIComponent(uiChild) %></td> <% } %>
  </tr>
</table>

So, in the table element (which represents the outer container), there are many td elements, each of which has the class attribute that equals to the id of the corresponding child component plus the "TDContainer" string literal.