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