Theme Development for Marketplace

Bradley Wood spoke at Liferay North America Symposium in San Francisco, CA
http://liferay.com/northamerica2012

Transcript

1. Theme Development for Marketplace Bradley Wood Software Engineer Global Services
2. - Graduated from Taylor University B.S. in Computer Science / New Media / Systems - Joined Liferay in 2010 About Me
3. - Demo marketplace theme - What is the resources importer? - How to build a theme for marketplace - Tips and Hints - Q & A Overview
4. - Zoe Brochure - Zoe Healthcare - Zoe Resort - Zoe Tech Currently Available Marketplace Themes http://www.liferay.com/marketplace
5. - Building Themes for 6.1 before 6.1 existed - Demo Theme with Web Content Why was the Resources Importer Needed?
6. What does the Resources Importer do? Liferay Portal Resources Importer Site Template Theme Resources
7. How to create site using the theme’s site template Step 1: Step 2: Step 3:
8. How to build a marketplace theme (using resources importer)
9. - Available for download on Liferay.com Plugins SDK (6.1.x) Build your theme
10. Create a theme using Resources Importer or create folder structure manually
11. Create a theme using Resources Importer
12. Create a theme using Resources Importer Sign-in Portlet Hello World Portlet Default Layout Template
13. Adding Web Content Main Carousel
14. Adding Web Content Web Content images Matches Structure Name Matches Template Name
15. Adding Web Content Add Carousel Images to documents folder
16. Adding Web Content Edit Web Content
17. Adding Web Content Download Web Content
18. Adding Web Content make this change
19. Adding Web Content replace image src with [$FILE=carousel_1.jpg$]
20. Adding Web Content Save file as “Main Carousel.xml”
21. Adding Web Content - Click Edit Template Icon - Click “Carousel” under Structure - Click Download and save file as “Carousel.xml” Download Web Content Structure
22. Adding Web Content - Click Edit Template Icon - Click “Download” under Script and save file as “Carousel.vm” Download Web Content Template This folder connects this template to the Carousel.xml structure
23. Adding Web Content Placing the Main Carousel The default layout is 1 column
24. Resources Importer - Set Global Page Layout - Place and configure portlets, web content in a site template - Store images and documents
25. Tips and Hints
26. Add a language hook to your theme if keys are not default Theme Settings
27. Theme without language key hook Theme Language Key
28. Theme with language key hook Theme Language Key
29. The Files Added Theme Language Key Language.properties liferay-hook.xml
30. init_custom.vm Change Liferay Logo portal_normal.vm
31. Q & A
32. Bradley Wood Email: bradley.wood@liferay.com Blog: http://www.liferay.com/web/bradley.wood/blog Twitter: @randombrad Contact Me