【原创】Liferay Portal学习笔记之(五):开发主题风格theme
来源:百度文库 编辑:神马文学网 时间:2024/04/27 21:12:07
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,该文件内容如下:
4.0.0
/html/themes/coldtear
/html/themes/coldtear/templates
/html/themes/coldtear/images
jsp
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
]]>
这里,注意的是修改theme的id和name,以及root-path、templates-path和images-path的路径,这样,我们就可以在主题风格页面看到我们新的theme了。
第二步、分析classic的主题布局的划分
1、打开liferay/html/theme/coldtear/templates目录,该目录下存放着很多jsp文件,打开portal_normal.jsp文件可以看到,该文件是整个页面的主体,通过 标签和<%@ include>方法包含了很多jsp文件,其中top.jsp文件定义了头部信息,navigation.jsp定义了导航菜单,bottom.jsp定义了底部语言标签信息,而页面的主体信息是由 标签定义的,top="portlet_top.jsp"定义了portlet的标题栏信息,bottom="portlet_bottom.jsp"定义了portlet下面的阴影线,portlet的内容则是由 定义的。所有的css样式信息是定义在css_cached.jsp文件中的。
2、liferay portal的页面定义大部分地方都采用了DIV+CSS的方式,下面将以classic的整个DIV定义框架给出,以说明classic风格的定义方法。
这里我们可以看到classic的整体DIV定义框架,注释部分对每个部分的定义都做了区分。
第三步、根据这样一个结构,我们可以设计自定义theme风格的结构,然后将各个区域细化到各个jsp文件中,并配以特定的图片和样式就可以实现自定义theme,为了达到更好的显示效果,需要教好的掌握CSS的各个属性和使用方法。
第一步:我们将以现有风格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,该文件内容如下:
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
]]>
第二步、分析classic的主题布局的划分
1、打开liferay/html/theme/coldtear/templates目录,该目录下存放着很多jsp文件,打开portal_normal.jsp文件可以看到,该文件是整个页面的主体,通过
2、liferay portal的页面定义大部分地方都采用了DIV+CSS的方式,下面将以classic的整个DIV定义框架给出,以说明classic风格的定义方法。
这里我们可以看到classic的整体DIV定义框架,注释部分对每个部分的定义都做了区分。
第三步、根据这样一个结构,我们可以设计自定义theme风格的结构,然后将各个区域细化到各个jsp文件中,并配以特定的图片和样式就可以实现自定义theme,为了达到更好的显示效果,需要教好的掌握CSS的各个属性和使用方法。
【原创】Liferay Portal学习笔记之(五):开发主题风格theme
【原创】Liferay Portal学习笔记(四):搭建开发环境
Liferay Portal中开发主题风格
【原创】Liferay Portal学习笔记(一):安装
【原创】Liferay Portal学习笔记(二):使用CMS
【原创】Liferay Portal学习笔记(三):自定义页面布局Template - 冷...
【原创】Liferay Portal学习笔记(三):自定义页面布局Template
Liferay Portal学习笔记(二):使用CMS
一步一步开发liferay笔记
Liferay Portal应用之配置
Liferay Portal应用之配置
Liferay 学习笔记
liferay学习笔记
Liferay 学习笔记2
Liferay 学习笔记32
Liferay系列文章(七)Liferay应用之开发2
Liferay系列文章(七)Liferay应用之开发的
Liferay系列文章(七)Liferay应用之开发额
Liferay系列文章(五)Liferay应用之安装
Liferay Portal额外研究(二):对Liferay进行瘦身
一步一步开发liferay笔记2连接数据库
Liferay Portal二次开发指南
Liferay Portal二次开发
Liferay Portal评估报告