Liferay IDE 3.1 M2 has been released recently.
Download the Liferay IDE - https://web.liferay.com/downloads/liferay-projects/liferay-ide
Follow the below steps to create themes in Liferay 7 using IDE 3.1 M2.
1. Go to Liferay workspace and create "New Liferay Module Project".
Project Name : sample-theme
Build type : maven-module / gradle-module (your choice, i prefer maven-module)
Project Template Name : theme
Note: After creating theme module project. Project structure is created to develop custom theme.
2. Now build Theme using Maven.
- In Eclipse select "Run" -> "Run Configurations"
- Right click "Maven Build" -> New
- Name :: Build-Theme
- Base directory :: ${workspace_loc:/lfg-theme}
- Goal :: clean package
- Click Apply
- Click Run
- Check in Console if the Build is Successful
Building would have placed all the classic styled theme files under "sample-theme/target"
3. As we want to override the classic theme, we will place our files under "sample-theme/src/main/webapp" folder.
Let's override "portal_normal.ftl" file.
- Create folder named "templates" under "sample-theme/src/main/webapp/".
- Copy file "portal_normal.ftl" from "sample-theme/target/build-theme/templates"
- Paste file "portal_normal.ftl" to "sample-theme/src/main/webapp/templates"
- Make a change in the file, like add a few words with in the body tag.
4. Build Theme using Maven, using the "Run Configurations" created in Step 2.
5. Lets Deploy our Theme to Liferay
- Start up your Liferay7 instance, if not already running.
- Copy the "sample-theme-1.0.0-SNAPSHOT.war" from "D:\Workspace\Liferay7\lfg-theme\target".
- Paste "sample-theme-1.0.0-SNAPSHOT.war" to "D:\Liferay\Community Edition 7.0\liferay-ce-portal-7.0-ga3\deploy".
- See Liferay console / logs on the deployment of your portlet.
Note: Wait for the deployment of Theme to complete, till you see "1 theme sample-theme is available for use"
6. In Liferay configure the page to use your deployed theme and see the changes.
- Create a New Page
- "Configure Page" & go to "Look and Feel"
- Select radio button "Define a specific look and feel for this page."
- Scroll down, select "Change Current Theme"
- Chose our "Sample-Theme" and save
Download the Liferay IDE - https://web.liferay.com/downloads/liferay-projects/liferay-ide
Follow the below steps to create themes in Liferay 7 using IDE 3.1 M2.
1. Go to Liferay workspace and create "New Liferay Module Project".
Project Name : sample-theme
Build type : maven-module / gradle-module (your choice, i prefer maven-module)
Project Template Name : theme
Note: After creating theme module project. Project structure is created to develop custom theme.
2. Now build Theme using Maven.
- In Eclipse select "Run" -> "Run Configurations"
- Right click "Maven Build" -> New
- Name :: Build-Theme
- Base directory :: ${workspace_loc:/lfg-theme}
- Goal :: clean package
- Click Apply
- Click Run
- Check in Console if the Build is Successful
Building would have placed all the classic styled theme files under "sample-theme/target"
3. As we want to override the classic theme, we will place our files under "sample-theme/src/main/webapp" folder.
Let's override "portal_normal.ftl" file.
- Create folder named "templates" under "sample-theme/src/main/webapp/".
- Copy file "portal_normal.ftl" from "sample-theme/target/build-theme/templates"
- Paste file "portal_normal.ftl" to "sample-theme/src/main/webapp/templates"
- Make a change in the file, like add a few words with in the body tag.
4. Build Theme using Maven, using the "Run Configurations" created in Step 2.
5. Lets Deploy our Theme to Liferay
- Start up your Liferay7 instance, if not already running.
- Copy the "sample-theme-1.0.0-SNAPSHOT.war" from "D:\Workspace\Liferay7\lfg-theme\target".
- Paste "sample-theme-1.0.0-SNAPSHOT.war" to "D:\Liferay\Community Edition 7.0\liferay-ce-portal-7.0-ga3\deploy".
- See Liferay console / logs on the deployment of your portlet.
Note: Wait for the deployment of Theme to complete, till you see "1 theme sample-theme is available for use"
6. In Liferay configure the page to use your deployed theme and see the changes.
- Create a New Page
- "Configure Page" & go to "Look and Feel"
- Select radio button "Define a specific look and feel for this page."
- Scroll down, select "Change Current Theme"
- Chose our "Sample-Theme" and save
Comments
Post a Comment