This content has been marked as final.
Show 3 replies
-
1. Re: Custom layout for a portal page
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.
-
2. Re: Custom layout for a portal page
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) -
3. Re: Custom layout for a portal page
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.