冷裂
性格決定命運,態度決定一切
BlogJava
首頁
新文章
聯系
聚合
管理
posts - 19, comments - 123, trackbacks - 0
【原創】Liferay Portal學習筆記之(五):開發主題風格theme
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風格的定義方法。
<
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內容信息??
-->
????????????????????????????
<
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區域?
-->
????????????????????
<
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定義框架,注釋部分對每個部分的定義都做了區分。
第三步、根據這樣一個結構,我們可以設計自定義theme風格的結構,然后將各個區域細化到各個jsp文件中,并配以特定的圖片和樣式就可以實現自定義theme,為了達到更好的顯示效果,需要教好的掌握CSS的各個屬性和使用方法。
posted on 2006-09-04 22:26
韓淚
閱讀(5601)
評論(0)
編輯
收藏
所屬分類:
Liferay學習
新用戶注冊
刷新評論列表
只有注冊用戶
登錄
后才能發表評論。
網站導航:
博客園
IT新聞
Chat2DB
C++博客
博問
管理
相關文章:
Liferay Portal 4.2版本發布了
Liferay Portal 4.1.3版本發布了
【原創】Liferay Portal學習筆記之(五):開發主題風格theme
Liferay Portal學習資料共享
【原創】Liferay Portal學習筆記(四):搭建開發環境
Liferay Portal 4.1.0版本發布了
【原創】Liferay Portal學習筆記(三):自定義頁面布局Template
【原創】Liferay Portal學習筆記(二):使用CMS
【原創】Liferay Portal學習筆記(一):安裝
Copyright ©2025 韓淚 Powered by:
博客園
模板提供:
滬江博客
虛其心,可解天下之問; 專其心,可治天下之學; 靜其心,可悟天下之理; 恒其心,可成天下之業。
常用鏈接
我的隨筆
我的評論
我的參與
最新評論
留言簿
(12)
給我留言
查看公開留言
查看私人留言
隨筆分類
(19)
Liferay學習(9)
開發工具(4)
心情隨筆(1)
系統集成
讀書筆記(2)
項目管理(3)
隨筆檔案
(19)
2006年12月 (1)
2006年11月 (1)
2006年9月 (5)
2006年8月 (12)
搜索
最新評論
1.?re: 【轉貼】Subversion權限詳解[未登錄]
很詳細,好理解!
--Allen
2.?re: 【原創】Liferay Portal學習筆記(二):使用CMS[未登錄]
我急需您的幫助,能加我Q嗎??
--jane
3.?re: Liferay Portal學習資料共享
原來我找了半天的各個資料都在這兒啊!!
不過還是非常感謝主人哦。 哈
--licyh
4.?re: 【原創】Liferay Portal學習筆記(四):搭建開發環境
評論內容較長,點擊標題查看
--liferay_portal
5.?re: 【原創】Liferay Portal學習筆記(一):安裝
評論內容較長,點擊標題查看
--liferay_portal
6.?re: 【原創】Liferay Portal學習筆記(四):搭建開發環境
評論內容較長,點擊標題查看
--劉波
7.?re: Liferay Portal學習資料共享
謝謝發表!
--地二
8.?re: 【原創】Liferay Portal學習筆記(一):安裝
評論內容較長,點擊標題查看
--hmf0786
9.?re: 【原創】Liferay Portal學習筆記(一):安裝
Liferay 中國服務 QQ群 :49845872
--于989
10.?re: 【原創】在Eclipse中使用Subversion
下載插件并安裝 fdf
--淘寶網女裝皇冠店
閱讀排行榜
1.?【原創】Liferay Portal學習筆記(一):安裝(28057)
2.?【原創】在Eclipse中使用Subversion(18740)
3.?【轉貼】Subversion權限詳解(12502)
4.?Liferay Portal學習資料共享(6895)
5.?【原創】Liferay Portal學習筆記(二):使用CMS(6084)
主站蜘蛛池模板:
成年女人喷潮毛片免费播放
|
大学生高清一级毛片免费
|
中文字幕在线观看亚洲
|
久久不见久久见中文字幕免费
|
天天综合亚洲色在线精品
|
亚洲综合色婷婷七月丁香
|
无码人妻精品中文字幕免费
|
亚洲欧洲免费无码
|
精品国产香蕉伊思人在线在线亚洲一区二区
|
最近中文字幕无吗高清免费视频
|
男男gvh肉在线观看免费
|
久久久久亚洲精品美女
|
日韩精品免费电影
|
久操免费在线观看
|
真正全免费视频a毛片
|
久久精品国产亚洲av高清漫画
|
亚洲综合色丁香麻豆
|
国产在线观看免费视频播放器
|
免费一级毛片无毒不卡
|
亚洲AV成人片无码网站
|
日木av无码专区亚洲av毛片
|
亚洲国产a级视频
|
无码专区永久免费AV网站
|
在线免费观看h片
|
国产精品亚洲五月天高清
|
97亚洲熟妇自偷自拍另类图片
|
免费一级毛片在播放视频
|
国产免费丝袜调教视频
|
青青操免费在线视频
|
国产区图片区小说区亚洲区
|
亚洲免费一级视频
|
久久精品国产精品亚洲艾草网
|
免费va在线观看
|
女人张开腿等男人桶免费视频
|
无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看
|
亚洲成AV人片久久
|
亚洲女同成av人片在线观看
|
亚洲香蕉久久一区二区
|
a在线视频免费观看在线视频三区
|
在线观看亚洲AV日韩A∨
|
亚洲网站视频在线观看
|