冷裂
性格决定命运,态度决定一切
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
韩泪
阅读(5591)
评论(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学习笔记(一):安装
虚其心,可解天下之问; 专其心,可治天下之学; 静其心,可悟天下之理; 恒其心,可成天下之业。
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(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学习笔记(一):安装(28040)
2. 【原创】在Eclipse中使用Subversion(18730)
3. 【转贴】Subversion权限详解(12491)
4. Liferay Portal学习资料共享(6884)
5. 【原创】Liferay Portal学习笔记(二):使用CMS(6076)