3 Replies Latest reply on Aug 27, 2007 12:38 PM by aerostra

    Custom layout for a portal page

    webhunter
    webhunter Aug 21, 2007 10:30 AM

      I have a jboss portal page with 4 portlets and was wondering if it is possible to arrange them as below.

      Portlet1
      P2 | P3
      Portlet4

      To put in a Html perspective, 1st portlet occupying the entire first row and second and thrid sharing 50% each of the second row, and finally the third portlet occupying 100% of the third row.

      Any ideas/workarounds are greatly appreciated. Thanks..

      • 4602 Views
      • Tags:
        • 1. Re: Custom layout for a portal page
          webhunter
          webhunter Aug 24, 2007 10:52 AM (in response to webhunter)

          just bringing it up to the top of the queue. Any ideas as to how one can achieve the above requirement. Thanks.

            • Actions
          • 2. Re: Custom layout for a portal page
            bvogt
            bvogt Aug 24, 2007 11:55 AM (in response to webhunter)

            We have done something similar, i.e. used for whole portals:

            1. Define a custom theme
            2. Define additional regions in the theme's index.jsp according to your needs.
            3. Provide styles in the theme's css files to match your layout (div-renderer?)
            4. Assign the custom theme to your page(s)

              • Actions
            • 3. Re: Custom layout for a portal page
              aerostra
              aerostra Aug 27, 2007 12:38 PM (in response to webhunter)

               

              "webhunter" wrote:
              just bringing it up to the top of the queue. Any ideas as to how one can achieve the above requirement. Thanks.



              As I had nothing to do I had a quick go at this and I have based the following on the generic layout with the renaissance theme. It is "work in progress" and works almost as it should look in JBP 2.4.1 with Firefox 1.5 and Opera 9.2 at around 1024 pixels in width. It gives strange results in IE6 & 7 hence I state again this is a work in progress and purely a demo. The following just modifies the generic layout to this:

              Logo
              Navigation
              Top
              Left|Right
              Bottom
              Footer

              Top & Bottom rows are full width, Left/Right are 50% each.


              In the first instance, make sure you have changed your admin layout to something that does not rely on the generic layout
              e.g. phalanx then stop the server after logging out. You will have problems trying to change the layout afterwards as
              the regions have been modified. Obviously, don't do this in a live environment!

              1) In portal-layout.xml (server/default/deploy/jboss-portal.sar/portal-core.war/WEB-INF/portal-layout.xml)

              Replace the current generic layout tags with the following: 
              <layout>
 <name>generic</name>
 <uri>/layouts/generic/index.jsp</uri>
 <uri state="maximized">/layouts/generic/maximized.jsp</uri>
 <regions>
 <region name="left"/>
 <region name="right"/>
 <region name="top"/>
 <region name="bottom"/>
 <region name="navigation"/>
 </regions>
 </layout>


              Save file.

              2) Edit portal_style.css
              (server/default/deploy/jboss-portal.sar/portal-core.war/themes/renaissance/portal_styles.css)

              Replace regionA, regionB and regionC with the following and add regionD as below: 

              /* portlet regions within content-container. this includes footer-container. */
#regionA {

/*50%: Left*/
 width: 50%;
 float: left;
 min-width: 250px;
 height: 300px;
}

#regionB {
 /* 50% right*/
 width: 50%;
 float: left;
 min-width: 250px;
 height: 300px;
}

#regionC {
/* 100%: TOP row */
 padding: 0px;
 margin: 0px;
 width: 100%;

}

#regionD {
/* 100% BOTTOM row, set 300px from top to avoid overlap for Region A + B. Adjust accordingly */
 padding: 300px 0 0 0;
 margin: 0px;
 width: 100%;

}


              save file.

              3) Edit index.jsp
              (server/default/deploy/jboss-portal.sar/portal-core.war/themes/layouts/generic/index.jsp)

              Replace from the body tag with: 
              <body id="body">
<div id="portal-container">
 <div id="sizer">
 <div id="expander">
 <div id="logoName"></div>
 <p:region regionName='navigation' regionID='navigation'/>
 <div id="spacer"></div>
 <div id="content-container">
 <!--top row, assigned as css id: regionC -->
 <p:region regionName='top' regionID='regionC'/>
 <!-- insert the content of the 'left' region of the page, and assign the css selector id 'regionA' -->
 <p:region regionName='left' regionID='regionA'/>
 <!-- insert the content of the 'right' region of the page, and assign the css selector id 'regionB' -->
 <p:region regionName='right' regionID='regionB'/>
 <!-- bottom row,assigned as css id: regionD -->
 <hr class="cleaner"/>
 <p:region regionName='bottom' regionID='regionD'/>
 <div id="footer-container" class="portal-copyright">Powered by <a class="portal-copyright"
 href="http://www.jboss.com/products/jbossportal">JBoss
 Portal</a><br/>
 <span id="ThemeBy"></span>
 </div>
 </div>
 </div>
 </div>
</div>
</body>

              Save the file.

              Restart the server and it will pick up the new layout for renaissance. Create a new page with the generic layout/renaissance theme and assign portlets accordingly into the right regions.


                • Actions