More Related Content
Viewers also liked (20)
Similar to Themes and layouts (20)
Recently uploaded (20)
Themes and layouts
- 1. Themes & Layout Tutorial Copyright ? 2000-2006 Liferay, Inc. All Rights Reserved. No material may be reproduced electronically or in print without written permission from Liferay, Inc.
- 2. Objectives 1. Customize your own Liferay Theme a. Introduction to Liferay Themes b. Deploy a Liferay Theme c. Modify example theme 2. Customize your own Liferay Layout a. Create a custom 2-3 layout - (2-3 = 2 column row on top of a 3 column row) a. Select different layout templates
- 3. Introduction to Liferay Themes With themes, you can quickly & completely redesign a website layout with a single war file. Lets see some examples: - Themes from Liferay Website: - Liferay.com -> downloads -> community themes
- 8. Exercise 1 Change the Liferay Theme a. Startup Tomcat b. On the Liferay website ¡°Page Settings¡± -> ¡°Look and Feel¡± -> Select Theme
- 9. Portal ? Creating a theme can be a very time consuming process, depending on what exactly needs to be done. ? Step 1: Identify the major components Most themes contain the following elements: ? Banner ? Navigation ? Portlet area ? Some themes that are more graphically intensive also have a top, bottom, and left and right sides.
- 10. Identify the major components
- 11. Identify the major components
- 12. Identify the major components
- 13. Portlets ? Step 2: Identify the portlet areas ¨C The next step is to identify your portlet areas. All portlets are composed of 12 pieces.
- 14. ? Look for all 12 pieces / images of the portlet ? Notice that some portlets have wide borders and some have thin, it all depends on how your portlet is supposed to look ? If there are shadows you need to incorporate the entire shadow in your image.
- 15. Exercise 2 Deploy your own ¡°example.war¡± theme and change Liferay¡¯s homepage to use that theme. This theme will help distinguish each of the pieces of the theme to give you practice in editing themes. Deploying your theme: 1. Startup Tomcat (if not already) 2. Copy ¡°example.war¡± to your themes folder: C:ProjectsTrainingextthemesexample.war 3. ¡°ant deploy¡± from your themes folder 4. Reload the page and select this theme
- 16. Step 3: Putting it all together Portlet Area You will need to cut your portlets up into 12 images like shown above, then populate the 12 portlet areas based on the images you cut up (set the height, width, and file name of each images) Hint: look for these lines css_cached.vm: extthemesexample.warhtmlthemesexampletemplatescss_cached.vm ¨C .portlet-header-bar-middle ¨C .portlet-header-bar-right ¨C .portlet-header-bar-left ¨C .portlet-corner-ul ¨C .portlet-corner-ur ¨C .portlet-corner-br ¨C .portlet-corner-bl ¨C .portlet-border-top ¨C .portlet-border-left ¨C .portlet-border-right ¨C .portlet-border-bottom
- 17. Banner To build the banner you need to edit: css_cached.vm: extthemesexample.warhtmlthemesexampletemplatescss_cached.vm ? .layout-banner-left ? .layout-banner-middle ? .layout-banner-right Usually only the middle is required, but if the theme needs to stretch along the x axis you will need left and right as well.
- 18. Top, Bottom, Left, Right Top and Bottom Decorations css_cached.vm: extthemesexample.warhtmlthemesexampletemplatescss_cached.vm ¨C #layout-top-decoration ¨C #layout-corner-ul ¨C #layout-corner-ur ¨C #layout-bottom-decoration ¨C #layout-corner-bl ¨C #layout-corner-br Use these to build your top and bottom decorations Left and Right Sides css_cached.vm: extthemesexample.warhtmlthemesexampletemplatescss_cached.vm ¨C #layout-box-left ¨C #layout-box-right Look for these to edit the sides
- 19. Exercise 3 Modify the example.war theme to look like the one below
- 20. ? Helpful Notes: ¨C border-left: 1px dotted black; ¨C In Firefox¡¯s web developer extensions press (CTRL-SHFT-F) for helpful HTML info ? Files to modify: ¨C extthemesexample.warhtmlthemesexampletemplates ? css_cached.vm (css) ? portal_normal.vm (layout) ¨C extthemesexample.warWEB-INF ? liferay-look-and-feel.xml ($colorScheme)
- 21. Content and Layout ? Why new layouts? ¨C Variety is good ¨C Not all sites are the same ¨C Sometimes the defaults just don¡¯t work for your needs ? How do we do it? ¨C Layouttpl (Layout Template) ? 4.0.0 makes this process so much easier!
- 22. Prepare the layouts folder ? In the EXT directory navigate to the layouttpl folder ? Create a folder called sample.war here > extlayouttplsample.war ? In sample.war, create two folders: WEB-INF and html > extlayouttplsample.warWEB-INF > extlayouttplsample.warhtml ? We have now setup the basic folder structure for layouts. This is the process that must always be followed for new layouts
- 23. Preparing supporting files ? Inside the WEB-INF folder that was just created, create a file and name it liferay-layout-templates.xml > extlayouttplsample.warWEB-INF liferay-layout-templates.xml ? Now create one more file here, and call it web.xml > extlayouttplsample.warWEB-INF web.xml
- 24. liferay-layout-templates.xml liferay-layout-templates.xml extlayouttplsample.warWEB-INFliferay-layout-templates.xml <?xml version="1.0"?> <!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 4.0.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_4_0_0.dtd"> <layout-templates> <custom> <layout-template id="training" name="training"> <template-path>/html/layouttpl/custom/training.tpl</template-path> </layout-template> </custom> </layout-templates>
- 25. What did that do? ? Layout-templates is our root element, it tells Liferay that we are defining new layouts ? Custom tells Liferay that this is not a built in template, but something new ? Layout-template-id and name let Liferay know what to ¨C Display in add content ¨C Set as the unique id for this template ? Template-path tells Liferay where to find the template structure (tpl) file
- 26. web.xml web.xml extlayouttplsample.warWEB-INFweb.xml <?xml version="1.0"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <display-name>sample</display-name> <listener> <listener- class>com.liferay.portal.kernel.servlet.LayoutTemplateContextListener</listener -class> </listener> </web-app>
- 27. Preparing the tpl file ? In extlayouttplsample.warhtml, ¨C create a ¡°layouttpl¡± folder: ? Inside layouttpl, ¨C create a ¡°custom¡± folder: ? Inside custom, ¨C create the file ¡°training.tpl¡± ? extlayouttplsample.warhtmllayouttplcustomtraining.tpl
- 28. 2-3 column layout code <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" width="45%">$processor.processColumn("column-1")</td> <td width="10%"> </td> <td valign="top" width="45%">$processor.processColumn("column-2")</td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" width="30%">$processor.processColumn("column-3")</td> <td width="5%"> </td> <td valign="top" width="30%">$processor.processColumn("column-4")</td> <td width="5%"> </td> <td valign="top" width="30%">$processor.processColumn("column-5")</td> </tr> </table>
- 29. Deploy Layouts ? Navigate to ext/layouttpl ? Run ant deploy ? Open a web browser to http://localhost ? Login ? For this example, let¡¯s create a new page
- 30. Let¡¯s add content! ? Click Add Content ? Select your Layout Template ? Click test and add (portlets with small width): ? Hello Laszlo ? Hello Velocity ? Hello World ? Your sample portlet
- 31. Finish it ? Refresh your page ? Drag all the portlets around to fill the five columns
- 32. Summary ? You should now know: ¨C How to create a basic theme ¨C How to create custom layouts ¨C How to add new content pages ¨C How to use change the layout template ? Things to practice ¨C The more CSS and HTML you know, the better off you will be ¨C Getting a theme just right takes time. Don¡¯t lose faith, it is possible!
- 33. Congratulations! Congratulations! You¡¯ve just modified your own theme! Login: test@liferay.com Password: test To hot deploy JSR-168 compliant portlets, Liferay layout templates, or Liferay themes just drop your *.war files in C:/home/liferay/deploy Sample portlets can be found here: http://www.liferay.com/web/guest/downloads/samples For more information on hot deploy, click here: http://content.liferay.com/4.0.0/docs/developers/ch06s01.html
- 34. Revision History Scott Lee 11/2/2006 - Created & Updated slides from Brett¡¯s Theme Docs & Layout Ppt Scott Lee 11/10/2006 - Fixed typos (Liferay-layout-templates.xml, tpl filepath) - added ¡°helpful notes¡± for excercise
Editor's Notes
- #16: Its recommeded to build a theme by editing an existing one instead of creating every file from scratch.