冷裂
性格決定命運,態度決定一切
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)
主站蜘蛛池模板:
中文字幕免费在线看线人
|
乱人伦中文视频在线观看免费
|
国内精品久久久久影院免费
|
亚洲综合久久夜AV
|
国产免费内射又粗又爽密桃视频
|
男女作爱免费网站
|
国产精品成人无码免费
|
在线观看亚洲网站
|
亚洲综合精品网站在线观看
|
中文字幕不卡免费高清视频
|
亚洲成av人在线视
|
2019中文字幕在线电影免费
|
亚洲日本国产精华液
|
最新猫咪www免费人成
|
亚洲AV永久无码精品一福利
|
亚洲国产日韩成人综合天堂
|
今天免费中文字幕视频
|
亚洲第一网站免费视频
|
成年人在线免费看视频
|
美女黄色免费网站
|
亚洲AV永久纯肉无码精品动漫
|
亚洲人成网站免费播放
|
国产精品久久亚洲一区二区
|
亚洲综合色在线观看亚洲
|
国产猛男猛女超爽免费视频
|
亚洲一区中文字幕在线电影网
|
日韩免费一区二区三区
|
精品国产免费一区二区三区
|
亚洲黄色免费网站
|
国产高清在线免费
|
99久久国产精品免费一区二区
|
亚洲国产精品日韩在线观看
|
日韩高清免费在线观看
|
黄色网址免费在线观看
|
亚洲性一级理论片在线观看
|
四虎永久成人免费影院域名
|
日韩免费无码一区二区三区
|
亚洲中文字幕无码av
|
久久精品国产精品亚洲精品
|
午夜男人一级毛片免费
|
99在线热播精品免费99热
|