Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Sunday, March 31, 2013

Liferay 6.1: Creating A Theme



This tutorial uses Eclipse Liferay IDE 1.5.2 .

1) Run Eclipse Liferay IDE 1.5.2.

2) Go to File/New/Liferay Project.

Fill in my-theme-1 for the Project name and My Theme 1 for the Display name.
Select the Liferay Plugins SDK and Portal Runtime you’ve configured.
Select Theme for your Plugin type.
Click Finish.


3) A new project is created.


4) Open build.xml
Notice that by default the theme is inheriting properties from _styled template.



4.1) Change "_styled" to "classic".


5) Open liferay-plug-in-package.properties
Notice that the file contains the information about the theme.


6) Adding custom.css.
6.1) Locate _diffs folder.


6.2) Add a new folder, name it as css.


6.3) Notice that few other folders are automatically generated soon after css folder is created.

6.4) Copy custom.css from docroot/css to docroot/_diffs/css.



7) Edit custom.css
7.1) Open docroot/_diffs/custom.css.
7.2) Edit the background property as follows: #ffffff (white color)


8) Save.
8.1) Deploy.
8.2) If the Theme plugin doesnt appear in webapps folder, you can try installing the war file through the Control Panel. If this method doesn't work, try to hot deploy the war file.

9) Apply the theme.
9.1) In the Control Panel, go to Site Pages.
9.2) The Look and Feel section should display the new theme.


9.3) Click My Theme 1 radio button.

9.4) In the Look and Feel control box, click Save.


9.5) Get success message.


10) Browse the Liferay Portal front page. (http://localhost:8080/web/guest/home)
Notice that the background color of the portal has changed to white.



No comments:

Post a Comment