Liferay Portal為我們提供了非常靈活的主題風格定制功能,自身帶了四種風格的theme,在官方網站上提供了很多風格theme的下載,這無疑大大增強了主題風格定制的功能。但是,我們完全可以開發具有自己風格的theme,這里,我們將討論怎樣來開發個性的theme。
第一步:我們將以現有風格classic為模板文件創建新的theme,我們將新theme命名為coldtear
1、將liferay/html/themes目錄下的classic文件夾copy一份副本,并修改副本的文件夾名為coldtea
2、在liferay/web-inf目錄下新建liferay-look-and-feel-ext.xml文件,文件liferay-look-and-feel.xml是定義主題風格theme的配置文件,為了加以區分,我們在這里新建了該文件的擴展文件liferay-look-and-feel-ext.xml,該文件內容如下:
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.0
.
0
<!---->
version
>
????
<!---->
compatibility
>
????
<
company
-
limit
>
????????
<
company
-
includes?
/>
????????
<
company
-
excludes?
/>
????
<!---->
company
-
limit
>
????
<
theme?id
=
"coldtear
"
?name
=
"ColdTear
"
>
????????
<
root
-
path
>/
html
/
themes
/
coldtear
<!---->
root
-
path
>
????????
<
templates
-
path
>/
html
/
themes
/
coldtear
/
templates
<!---->
templates
-
path
>
????????
<
images
-
path
>/
html
/
themes
/
coldtear
/
images
<!---->
images
-
path
>
????????
<
template
-
extension
>
jsp
<!---->
template
-
extension
>
????????
<
color
-
scheme?id
=
"
01
"
?name
=
"
Blue
"
>
????????????
<!---->
[CDATA[
????????????????body
-
bg
=
#FFFFFF
????????????????
????????????????layout
-
bg
=
#FFFFFF
????????????????layout
-
text
=
#
000000
????????????????layout
-
tab
-
bg
=
#E0E0E0
????????????????layout
-
tab
-
text
=
#
000000
????????????????layout
-
tab
-
selected
-
bg
=
#6699CC
????????????????layout
-
tab
-
selected
-
text
=
#4A517D
????????????????portlet
-
title
-
bg
=
#6699CC
????????????????portlet
-
title
-
text
=
#4A517D
????????????????portlet
-
menu
-
bg
=
#B6CBEB
????????????????portlet
-
menu
-
text
=
#
000000
????????????????portlet
-
bg
=
#FFFFFF
????????????????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
=
#
094170
????????????????portlet
-
section
-
header
-
bg
=
#ADBDFB
????????????????portlet
-
section
-
subheader
=
#
405278
????????????????portlet
-
section
-
subheader
-
bg
=
#91AEE8
????????????????portlet
-
section
-
body
=
#000000
????????????????portlet
-
section
-
body
-
bg
=
#E2E7FA
????????????????portlet
-
section
-
body
-
hover
=
#FFFFFF
????????????????portlet
-
section
-
body
-
hover
-
bg
=
#AC6CFA
????????????????portlet
-
section
-
alternate
=
#
000000
????????????????portlet
-
section
-
alternate
-
bg
=
#CFD7FB
????????????????portlet
-
section
-
alternate
-
hover
=
#FFFFFF
????????????????portlet
-
section
-
alternate
-
hover
-
bg
=
#AC6CFA
????????????????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
>
這里,注意的是修改theme的id和name,以及root-path、templates-path和images-path的路徑,這樣,我們就可以在主題風格頁面看到我們新的theme了。
第二步、分析classic的主題布局的劃分
1、打開liferay/html/theme/coldtear/templates目錄,該目錄下存放著很多jsp文件,打開portal_normal.jsp文件可以看到,該文件是整個頁面的主體,通過 <liferay-util:include>標簽和<%@ include>方法包含了很多jsp文件,其中top.jsp文件定義了頭部信息,navigation.jsp定義了導航菜單,bottom.jsp定義了底部語言標簽信息,而頁面的主體信息是由 <liferay-theme:box>標簽定義的,top="portlet_top.jsp"定義了portlet的標題欄信息,bottom="portlet_bottom.jsp"定義了portlet下面的陰影線,portlet的內容則是由 <liferay-util:include page="<%= Constants.TEXT_HTML_DIR + tilesContent %>">定義的。所有的css樣式信息是定義在css_cached.jsp文件中的。
2、liferay portal的頁面定義大部分地方都采用了DIV+CSS的方式,下面將以classic的整個DIV定義框架給出,以說明classic風格的定義方法。
</liferay-util:include> </liferay-theme:box> </liferay-util:include>
<
div?id
=
"
layout-outer-side-decoration
"
>
<
div?id
=
"
layout-inner-side-decoration
"
>
<
div?id
=
"
layout-box
"
>
????
<!---->
????
<
div?id
=
"
layout-top-banner
"
>
????????
<
div?id
=
"
layout-user-menu
"
?style
=
"
text-align:?right;
"
>
????????????
<
div?
class
=
"
font-small
"
?style
=
"
margin-top:?5px;
"
>
????????????????
<
div?id
=
"
layout-my-places
"
>
????????????????????
<
div?id
=
"
p_p_id_49_
"
?
class
=
"
portlet-boundary
"
>
????????????????????????
<
div?
class
=
"
portlet-borderless-container
"
>
????????????????????????
<!---->
div
>
????????????????????
<!---->
div
>
????????????????
<!---->
div
>
????????????
<!---->
div
>
????????
<!---->
div
>
????
<!---->
div
>
????
<!---->
????
<
div?id
=
"
layout-nav-container
"
>
????????
<
div?
class
=
"
layout-nav-tabs-box
"
>
????????????
<
div?
class
=
"
layout-tab
"
><!---->
div
>
????????????
<
div?
class
=
"
layout-tab
"
><!---->
div
>
????????????
<
div?
class
=
"
layout-tab-selected
"
><!---->
div
>
????????????
<
div?
class
=
"
layout-tab
"
><!---->
div
>
????????
<!---->
div
>
????????
<
div?id
=
"
layout-global-search
"
><!---->
div
>
????
<!---->
div
>
????
<
div?
class
=
"
portlet-bottom-decoration-2
"
><
div
><
div
><!---->
div
><!---->
div
><!---->
div
>
????
<!---->
????
<
div?id
=
"
layout-content-outer-decoration
"
>
????????
<
div?id
=
"
layout-content-inner-decoration
"
>
????????????
<
div?id
=
"
layout-content-container
"
>
????????????????
<
div?id
=
"
layout-column_column-1
"
>
????????????????????
<
div?id
=
"
p_p_id_73_INSTANCE_9Q28_
"
?
class
=
"
portlet-boundary
"
>
????????????????????????
<
div?
class
=
"
portlet-container
"
>
????????????????????????????
<!---->
????????????????????????????
<
div?
class
=
"
portlet-header-bar
"
?id
=
"
portlet-header-bar_73_INSTANCE_9Q28
"
?onmouseover
=
"
PortletHeaderBar.show(this.id)
"
?onmouseout
=
"
PortletHeaderBar.hide(this.id)
"
>
????????????????????????????????
<
div?
class
=
"
portlet-wrap-title
"
>
????????????????????????????????
<!---->
div
>
????????????????????????????????
<
div?
class
=
"
portlet-small-icon-bar
"
?style
=
"
display:?none;
"
>
????????????????????????????????
<!---->
div
>
????????????????????????????
<!---->
div
>
????????????????????????????
<!---->
????????????????????????????
<
div?
class
=
"
portlet-box
"
>
????????????????????????????????
<
div?
class
=
"
portlet-minimum-height
"
>
????????????????????????????????????
<
div?id
=
"
p_p_body_73_INSTANCE_9Q28
"
?
>
????????????????????????????????????????
<
div?
class
=
"
slide-maximize-reference
"
>
????????????????????????????????????????????
<
div?id
=
"
p_p_content_73_INSTANCE_9Q28_
"
?style
=
"
margin-top:?0;?margin-bottom:?0;
"
>
????????????????????????????????????????????
<!---->
div
>
????????????????????????????????????????
<!---->
div
><!---->
????????????????????????????????????
<!---->
div
>
????????????????????????????????
<!---->
div
>
????????????????????????????
<!---->
div
><!---->
????????????????????????????
<!---->
????????????????????????????
<
div?
class
=
"
portlet-bottom-decoration-2
"
><
div
><
div
><!---->
div
><!---->
div
><!---->
div
>
????????????????????????
<!---->
div
><!---->
????????????????????
<!---->
div
>
第一步:我們將以現有風格classic為模板文件創建新的theme,我們將新theme命名為coldtear
1、將liferay/html/themes目錄下的classic文件夾copy一份副本,并修改副本的文件夾名為coldtea
2、在liferay/web-inf目錄下新建liferay-look-and-feel-ext.xml文件,文件liferay-look-and-feel.xml是定義主題風格theme的配置文件,為了加以區分,我們在這里新建了該文件的擴展文件liferay-look-and-feel-ext.xml,該文件內容如下:









































































第二步、分析classic的主題布局的劃分
1、打開liferay/html/theme/coldtear/templates目錄,該目錄下存放著很多jsp文件,打開portal_normal.jsp文件可以看到,該文件是整個頁面的主體,通過 <liferay-util:include>標簽和<%@ include>方法包含了很多jsp文件,其中top.jsp文件定義了頭部信息,navigation.jsp定義了導航菜單,bottom.jsp定義了底部語言標簽信息,而頁面的主體信息是由 <liferay-theme:box>標簽定義的,top="portlet_top.jsp"定義了portlet的標題欄信息,bottom="portlet_bottom.jsp"定義了portlet下面的陰影線,portlet的內容則是由 <liferay-util:include page="<%= Constants.TEXT_HTML_DIR + tilesContent %>">定義的。所有的css樣式信息是定義在css_cached.jsp文件中的。
2、liferay portal的頁面定義大部分地方都采用了DIV+CSS的方式,下面將以classic的整個DIV定義框架給出,以說明classic風格的定義方法。
</liferay-util:include> </liferay-theme:box> </liferay-util:include>
























































更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
