3.3.8.2.2. Customizing a site layout

Skins define the color scheme and other appearance aspects of the layout, such as graphics, fonts, or font size. Thus, the way you customize your site layout will require you to impact your skin's CSS code.

In this section, instructions are related to the configuration, for example you can see a sample of Intranet site 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.

The Intranet site is decorated with the default layout as below:

As an example, here are steps to alter the layout of Intranet site by moving the MY SPACES portlet from left to the right corner.

Register a NewPortalConfigListener into UserPortalConfigService under the custom-extension.war!/WEB-INF/conf/myintranet-conf/my-portal-configuration.xml file.


<configuration

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"

   xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

 

 <external-component-plugins>

  <!-- The full qualified name of the UserPortalConfigService -->

  <target-component>org.exoplatform.portal.config.UserPortalConfigService</target-component>

  <component-plugin>

   <!-- The name of the plugin -->

   <name>new.portal.config.user.listener</name>

   <!-- The name of the method to call on the UserPortalConfigService in order to register the NewPortalConfigs -->

   <set-method>initListener</set-method>

   <!-- The full qualified name of the NewPortalConfigListener -->

   <type>org.exoplatform.portal.config.NewPortalConfigListener</type>

   <description>this listener init the portal configuration</description>

   <init-params>

    <object-param>

     <name>portal.configuration</name>

     <description>description</description>

     <object type="org.exoplatform.portal.config.NewPortalConfig">

      <field name="predefinedOwner">

       <collection type="java.util.HashSet">

        <value>

         <string>intranet</string>

        </value>

       </collection>

      </field>

      <field name="ownerType">

       <string>portal</string>

      </field>

      <field name="templateLocation">

       <string>war:/conf/myintranet-conf</string>

      </field>

      <field name="importMode"><string>merge</string></field>

     </object>

    </object-param>

   </init-params>

  </component-plugin>

 </external-component-plugins>

</configuration>

Import my-portal-configuration.xml into custom-extension.war!/WEB-INF/conf/configuration.xml.
```
<import>war:/conf/mysite-config/my-portal-configuration.xml</import>
```

Create portal.xml to override configuration of the Intranet site under custom-extension.war!/WEB-INF/myintranet-conf/portal/intranet.


<portal-config>

    <portal-name>intranet</portal-name>

    <locale>en</locale>

    <access-permissions>*:/platform/users</access-permissions>

    <edit-permission>*:/platform/administrators</edit-permission>

    <properties>

        <entry key="sessionAlive">onDemand</entry>

        <entry key="showPortletInfo">0</entry>

    </properties>



    <portal-layout>

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

          <access-permissions>Everyone</access-permissions>

          

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

            <access-permissions>Everyone</access-permissions>

            <portlet-application>

                <portlet>

                    <application-ref>platformNavigation</application-ref>

                    <portlet-ref>UICompanyNavigationPortlet</portlet-ref>

                </portlet>

                <access-permissions>*:/platform/users</access-permissions>

                <show-info-bar>false</show-info-bar>

            </portlet-application>

          </container>

          

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

            <access-permissions>Everyone</access-permissions>

            <page-body> </page-body>

          </container>

          

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

            <access-permissions>Everyone</access-permissions>

            <portlet-application>

                <portlet>

                    <application-ref>platformNavigation</application-ref>

                    <portlet-ref>UISpaceNavigationPortlet</portlet-ref>

                </portlet>

                <access-permissions>*:/platform/users</access-permissions>

                <show-info-bar>false</show-info-bar>

            </portlet-application>

          </container>      

        </container>

    </portal-layout>

</portal-config>

As you see in the portal.xml file above, every <container> tag has an id attribute, for example "<container id = 'Right'>". The UISpaceNavigationPortlet is registered in this container that specifies the new position (right) of Space portlet. 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:

RightTDContainer

The reason is, when you have a look at 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.

Create a DefaultStylesheet.css file under custom-extension.war!/templates/skin with the following content:
```
.RightTDContainer {
 width: 200px; 
}

.BodyTDContainer {

}

.LeftTDContainer {
 width: 200px;
}
```

Register the newly created CSS in the above step for the Default skin which is currently used by the Intranet site under the gatein-resources.xml.


<gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                  xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"

                  xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

  <portal-skin>

    <skin-name>Default</skin-name>

    <skin-module>myintranet-css</skin-module>

    <css-path>/templates/skin/DefaultStylesheet.css</css-path>

  </portal-skin>

</gatein-resources>

Restart the server. The position of MY SPACE portlet is now rearranged at the top right corner of Intranet site.

Note

For customizing the top navigation bar and branding, see Customizing a shared layout.
For customizing the right body of a site, see Customizing a page layout.