冷裂
性格決定命運,態(tài)度決定一切
BlogJava
首頁
新文章
聯(lián)系
聚合
管理
posts - 19, comments - 123, trackbacks - 0
【原創(chuàng)】Liferay Portal學習筆記之(五):開發(fā)主題風格theme
Liferay Portal為我們提供了非常靈活的主題風格定制功能,自身帶了四種風格的theme,在官方網(wǎng)站上提供了很多風格theme的下載,這無疑大大增強了主題風格定制的功能。但是,我們完全可以開發(fā)具有自己風格的theme,這里,我們將討論怎樣來開發(fā)個性的theme。
第一步:我們將以現(xiàn)有風格classic為模板文件創(chuàng)建新的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的配置文件,為了加以區(qū)分,我們在這里新建了該文件的擴展文件liferay-look-and-feel-ext.xml,該文件內(nèi)容如下:
<?
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的內(nèi)容則是由<liferay-util:include page="<%= Constants.TEXT_HTML_DIR + tilesContent %>" />定義的。所有的css樣式信息是定義在css_cached.jsp文件中的。
2、liferay portal的頁面定義大部分地方都采用了DIV+CSS的方式,下面將以classic的整個DIV定義框架給出,以說明classic風格的定義方法。
<
div?id
=
"
layout-outer-side-decoration
"
>
<
div?id
=
"
layout-inner-side-decoration
"
>
<
div?id
=
"
layout-box
"
>
????
<!--
?定義頭部信息?top.jsp?
-->
????
<
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
>
????
<!--
?定義導航菜單?navigation.jsp?
-->
????
<
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
>
????
<!--
?定義主體portlet信息部分??
-->
????
<
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
"
>
????????????????????????????
<!--
?定義portlet標題欄信息?portlet
-
top.jsp?
-->
????????????????????????????
<
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
>
????????????????????????????
<!--
?定義portlet內(nèi)容信息??
-->
????????????????????????????
<
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
><!--
?slide
-
maximize
-
reference?
-->
????????????????????????????????????
</
div
>
????????????????????????????????
</
div
>
????????????????????????????
</
div
><!--
?end?portlet
-
box?
-->
????????????????????????????
<!--
?定義portlet底部陰影線?portlet
-
bottom.jsp?
-->
????????????????????????????
<
div?
class
=
"
portlet-bottom-decoration-2
"
><
div
><
div
></
div
></
div
></
div
>
????????????????????????
</
div
><!--
?End?portlet
-
container?
-->
????????????????????
</
div
>
????????????????????
<!--
?定義一個空的portlet區(qū)域?
-->
????????????????????
<
div?
class
=
"
layout-blank-portlet
"
></
div
>
????????????????
</
div
>
????????????
</
div
>
????????
</
div
>
????
</
div
>
????
<!--
?定義底部信息?bottom.jsp?
-->
????
<
div?id
=
"
layout-bottom-container
"
></
div
>
</
div
><!--
?End?layout
-
box?
-->
</
div
>
</
div
><!--
?End?layout
-
outer
-
side
-
decoration?
-->
這里我們可以看到classic的整體DIV定義框架,注釋部分對每個部分的定義都做了區(qū)分。
第三步、根據(jù)這樣一個結(jié)構(gòu),我們可以設計自定義theme風格的結(jié)構(gòu),然后將各個區(qū)域細化到各個jsp文件中,并配以特定的圖片和樣式就可以實現(xiàn)自定義theme,為了達到更好的顯示效果,需要教好的掌握CSS的各個屬性和使用方法。
posted on 2006-09-04 22:26
韓淚
閱讀(5603)
評論(0)
編輯
收藏
所屬分類:
Liferay學習
新用戶注冊
刷新評論列表
只有注冊用戶
登錄
后才能發(fā)表評論。
網(wǎng)站導航:
博客園
IT新聞
Chat2DB
C++博客
博問
管理
相關(guān)文章:
Liferay Portal 4.2版本發(fā)布了
Liferay Portal 4.1.3版本發(fā)布了
【原創(chuàng)】Liferay Portal學習筆記之(五):開發(fā)主題風格theme
Liferay Portal學習資料共享
【原創(chuàng)】Liferay Portal學習筆記(四):搭建開發(fā)環(huán)境
Liferay Portal 4.1.0版本發(fā)布了
【原創(chuàng)】Liferay Portal學習筆記(三):自定義頁面布局Template
【原創(chuàng)】Liferay Portal學習筆記(二):使用CMS
【原創(chuàng)】Liferay Portal學習筆記(一):安裝
Copyright ©2025 韓淚 Powered by:
博客園
模板提供:
滬江博客
虛其心,可解天下之問; 專其心,可治天下之學; 靜其心,可悟天下之理; 恒其心,可成天下之業(yè)。
常用鏈接
我的隨筆
我的評論
我的參與
最新評論
留言簿
(12)
給我留言
查看公開留言
查看私人留言
隨筆分類
(19)
Liferay學習(9)
開發(fā)工具(4)
心情隨筆(1)
系統(tǒng)集成
讀書筆記(2)
項目管理(3)
隨筆檔案
(19)
2006年12月 (1)
2006年11月 (1)
2006年9月 (5)
2006年8月 (12)
搜索
最新評論
1.?re: 【轉(zhuǎn)貼】Subversion權(quán)限詳解[未登錄]
很詳細,好理解!
--Allen
2.?re: 【原創(chuàng)】Liferay Portal學習筆記(二):使用CMS[未登錄]
我急需您的幫助,能加我Q嗎??
--jane
3.?re: Liferay Portal學習資料共享
原來我找了半天的各個資料都在這兒啊!!
不過還是非常感謝主人哦。 哈
--licyh
4.?re: 【原創(chuàng)】Liferay Portal學習筆記(四):搭建開發(fā)環(huán)境
評論內(nèi)容較長,點擊標題查看
--liferay_portal
5.?re: 【原創(chuàng)】Liferay Portal學習筆記(一):安裝
評論內(nèi)容較長,點擊標題查看
--liferay_portal
6.?re: 【原創(chuàng)】Liferay Portal學習筆記(四):搭建開發(fā)環(huán)境
評論內(nèi)容較長,點擊標題查看
--劉波
7.?re: Liferay Portal學習資料共享
謝謝發(fā)表!
--地二
8.?re: 【原創(chuàng)】Liferay Portal學習筆記(一):安裝
評論內(nèi)容較長,點擊標題查看
--hmf0786
9.?re: 【原創(chuàng)】Liferay Portal學習筆記(一):安裝
Liferay 中國服務 QQ群 :49845872
--于989
10.?re: 【原創(chuàng)】在Eclipse中使用Subversion
下載插件并安裝 fdf
--淘寶網(wǎng)女裝皇冠店
閱讀排行榜
1.?【原創(chuàng)】Liferay Portal學習筆記(一):安裝(28059)
2.?【原創(chuàng)】在Eclipse中使用Subversion(18742)
3.?【轉(zhuǎn)貼】Subversion權(quán)限詳解(12505)
4.?Liferay Portal學習資料共享(6898)
5.?【原創(chuàng)】Liferay Portal學習筆記(二):使用CMS(6086)
主站蜘蛛池模板:
四虎www免费人成
|
亚洲色大成网站WWW久久九九
|
免费一级毛片在线观看
|
亚洲成年网站在线观看
|
四虎永久在线精品免费影视
|
亚洲精品无码少妇30P
|
亚洲视频免费一区
|
亚洲一卡2卡三卡4卡有限公司
|
免费99精品国产自在现线
|
免费播放美女一级毛片
|
亚洲av日韩av激情亚洲
|
久久免费精品一区二区
|
亚洲中文精品久久久久久不卡
|
色窝窝免费一区二区三区
|
国产成人精品日本亚洲专一区
|
亚洲精品视频免费观看
|
成在线人视频免费视频
|
337p日本欧洲亚洲大胆裸体艺术
|
亚洲精品免费在线视频
|
又黄又大的激情视频在线观看免费视频社区在线
|
久久久久亚洲精品日久生情
|
日韩在线免费看网站
|
美女在线视频观看影院免费天天看
|
亚洲精品狼友在线播放
|
爽爽爽爽爽爽爽成人免费观看
|
亚洲youjizz
|
亚洲av无码成h人动漫无遮挡
|
亚洲黄色网址大全
|
亚洲国产精品视频
|
成全视频在线观看免费高清动漫视频下载
|
成人黄动漫画免费网站视频
|
精品亚洲永久免费精品
|
视频一区在线免费观看
|
亚洲人成人一区二区三区
|
国产色婷婷精品免费视频
|
1000部夫妻午夜免费
|
成人精品一区二区三区不卡免费看
|
亚洲av无码专区首页
|
亚洲精品第一国产综合野
|
亚洲视频在线视频
|
亚洲午夜久久久久妓女影院
|