Tạo một theme cho riêng bạn - Create your own theme

Có hai yếu tố làm ảnh hưởng đến giao diện của Page: Theme và Layout.

Theme có liên quan đến color+image+template
Layout có liên quan đến bố cục trang, phân chia trang thành từng cell như trong một table.

Bài viết này tôi xin giới thiệu cách viết một theme trong Liferay Extension Environment.

Ghi chú:Trong bài viết này tôi sử dụng Liferay Portal Professional 4.2

Có hai cách:
Cách 1: Viết theme như một web application
Trong phương pháp này, theme là một web application. Khi deploy, theme sẽ nằm ngang hàng với ROOT (trong trường hợp bạn dùng Tomcat server).
Giả sử đối với theme breeze-themes-4.2.0 , cấu trúc thư mục sẽ như sau

Để viết theme dạng này, cách nhanh nhất là bạn download một theme mẫu (ví dụ breeze-themes-4.2.0). Sau đó bạn extract theme này vào thư mục ext\themes như sau:

Bây giờ bạn hãy vào chỉnh sửa tên của theme trong file web.xml và liferay-look-and-feel.xml, chỉnh sửa color + image + template theo ý bạn.

Sau đó bạn vào thư mục ext\themes và chạy: ant deploy

Kiểm tra trong thư mục webapps của Tomcat, bạn sẽ thấy như hình dưới đây:

Cách 2: Viết theme như một phần của portal

Tôi thích cách này hơn, vì thấy sự gọn gàng và đơn giản. Theme không phải là một web application mà là một phần của portal, tương đương như các default theme.

Để lấy ví dụ, chúng ta hãy tạo một theme khác tên là estyle

Đầu tiên, bạn hãy tạo thư mục: liferay\ext\ext-web\docroot\html\themes\estyle.

Sau đó, bạn hãy copy nội dung của theme mẫu Brochure trong thư mục \liferay\portal\portal-web\docroot\html\themes\brochure vào thư mục estyle vừa tạo.

Kết quả sẽ trông như thế này:

Khai báo theme mới:
Bạn tạo file \ext\ext-web\docroot\WEB-INF\liferay-look-and-feel-ext.xml
(xin lỗi vì trong bản viết đầu tiên mình ghi sai là \ext\ext-web\docroot\html\liferay-look-and-feel-ext.xml)
với nội dung như sau:
-------------------------------
<?xml version="1.0"?>

<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 4.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_4_0_0.dtd">



<look-and-feel>

<compatibility>

<version>4.2.0</version>

</compatibility>

<company-limit>

<company-includes />

<company-excludes />

</company-limit>

<theme id="estyle" name="estyle">

<root-path>/html/themes/estyle</root-path>

<templates-path>/html/themes/estyle/templates</templates-path>

<images-path>/html/themes/estyle/images</images-path>

<template-extension>jsp</template-extension>

<color-scheme id="01" name="Default">

<![CDATA[

body-bg=#FFFFFF



layout-bg=#F2F2F2

layout-text=#000000



layout-tab-bg=#E0E0E0

layout-tab-text=#000000



layout-tab-selected-bg=#6699CC

layout-tab-selected-text=#4A517D



portlet-title-bg=#132b47

portlet-title-text=#FFFFFF



portlet-menu-bg=#B6CBEB

portlet-menu-text=#000000



portlet-bg=#F2F2F2



portlet-font=#000000

portlet-font-dim=#C4C4C4



portlet-msg-status=#000000

portlet-msg-info=#000000

portlet-msg-error=#FF0000

portlet-msg-alert=#FF0000

portlet-msg-success=#007F00



portlet-section-header=#596171

portlet-section-header-bg=#AFBEDA



portlet-section-subheader=#405278

portlet-section-subheader-bg=#91AEE8



portlet-section-body=#3F3F3F

portlet-section-body-bg=#EAF2FF



portlet-section-body-hover=#FFFFFF

portlet-section-body-hover-bg=#5274AE



portlet-section-alternate=#3F3F3F

portlet-section-alternate-bg=#DBE1ED



portlet-section-alternate-hover=#FFFFFF

portlet-section-alternate-hover-bg=#5274AE



portlet-section-selected=#7AA0EC

portlet-section-selected-bg=#FAFCFE



portlet-section-selected-hover=#00329A

portlet-section-selected-hover-bg=#C0D2F7

]]>

</color-scheme>

</theme>

</look-and-feel>
-------------------------------

Chỉnh sửa theme này theo ý bạn. Sau đó deploy bằng lệnh:

-------------------------------------
Kiểm tra: Bây giờ bạn hãy khởi động lại tomcat, login (username=test@liferay.com, password=test). Nhấn vào mục Page Setting, chọn theme estyle !



Chúc bạn tạo được những theme theo ý muốn.

See also: Cách tạo layout (đang cật nhập)

______________________________________________________