eXo Platform 4.1 Documentation > Developer Guide > Customizing Your Site > Managing features of a new site > Managing eXo Platform look and feel > Customizing a site skin
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.

  1. 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>
  2. Import my-portal-configuration.xml into custom-extension.war!/WEB-INF/conf/configuration.xml.

    
    <import>war:/conf/mysite-config/my-portal-configuration.xml</import>
  3. 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.

  4. Create a DefaultStylesheet.css file under custom-extension.war!/templates/skin with the following content:

    .RightTDContainer {
     width: 200px; 
    }
    
    .BodyTDContainer {
    
    }
    
    .LeftTDContainer {
     width: 200px;
    }
  5. 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>
  6. Restart the server. The position of MY SPACE portlet is now rearranged at the top right corner of Intranet site.

Note

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus