冷裂
性格决定命运,态度决定一切
BlogJava
首页
新文章
联系
聚合
管理
posts - 19, comments - 110, 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
韩泪
阅读(2876)
评论(0)
编辑
收藏
所属分类:
Liferay学习
IT新闻
新用户注册
刷新评论列表
标题
姓名
主页
验证码
*
内容(请不要发表任何与政治相关的内容)
Remember Me?
登录
使用高级评论
新用户注册
返回页首
恢复上次提交
[使用Ctrl+Enter键可以直接提交]
该文被作者在 2006-09-04 23:23 编辑过
相关文章:
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学习笔记(一):安装
虚其心,可解天下之问; 专其心,可治天下之学; 静其心,可悟天下之理; 恒其心,可成天下之业。
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(10)
给我留言
查看公开留言
查看私人留言
随笔分类
(19)
Liferay学习(9)
开发工具(4)
心情随笔(1)
系统集成
读书笔记(2)
项目管理(3)
随笔档案
(19)
2006年12月 (1)
2006年11月 (1)
2006年9月 (5)
2006年8月 (12)
搜索
最新评论
1. re: 【原创】在Eclipse中使用Subversion
评论内容较长,点击标题查看
--Daniel Hu
2. re: 【原创】Liferay Portal学习笔记(一):安装[未登录]
liferay-portal-4.0.0.war 部署成功,进入登陆页面后
登陆的用户名和密码是多少?
email:yangtonggan@126.com
QQ:894126116
--yang
3. re: 【原创】Liferay Portal学习笔记(一):安装[未登录]
熟悉Liferay Portal的高手请与我联系,qchen_sh@hotmail.com,因项目需要,我正准备高薪聘请有创业精神的Java高手
--qq
4. re: Liferay Portal学习资料共享[未登录]
好东西,多谢楼主!
--beyond
5. re: 【原创】Liferay Portal学习笔记(一):安装
没有设置java_home环境变量
--lao6
6. re: Liferay Portal学习资料共享
请问我打开localhost的时候为什么总说我You do not have permission to view this page. 啊,谢谢楼主
--zhuandiqiu
7. re: Liferay Portal学习资料共享
评论内容较长,点击标题查看
--Beijing_M
8. re: Liferay Portal学习资料共享
qq
--Beijing_M
9. re: 【原创】Liferay Portal学习笔记(一):安装
评论内容较长,点击标题查看
--xx
10. re: 【原创】在Eclipse中使用Subversion
thank you
--hu
阅读排行榜
1. 【原创】Liferay Portal学习笔记(一):安装(12719)
2. 【原创】在Eclipse中使用Subversion(9874)
3. 【转贴】Subversion权限详解(6330)
4. Liferay Portal学习资料共享(4444)
5. 【原创】版本控制软件Subversion的使用笔记(3844)