liferay portal 制造一套主题

liferay portal4 制作一套主题
门户支持两种形式的风格开发，一种是直接做风格文件夹放入工程中，另一种是将风格做为一个应用与门户并行存在。在此我们只说明文件夹形式的风格制作。

目录分析：

风格包都放在/html/themes/ 下










主题目录：

css：该主题的样式文件
images：主题的图片文件
javascript：主题所需的javascript文件
templates：主题的velocity模版文件



主题样式文件
  
main.css：主样式文件
base.css：基础样式
custom.css：个性化样式
form.css：portlet中form样式
layout.css：布局样式
navigation.css：导航样式
portlet.css：portlet样式
tabs.css：表格样式
注：主题的样式要写在对应的样式文件里，这样维护方便。







主题图片：

注：主题的图片要放在对应的文件里，这样维护方便。

主题模版文件：





模版初始化在\html\themes\_unstyled\templates\init.vm

portal_normal.vm：是整体portal模板
它包括了：
--banner部分
    --logo徽标
    --dock管理工具
--navigation导航部分
--Portlet容器部分
--bottom部分
navigation.vm：导航模板
--当前portal的子页或子portal
--我的空间（当前用户能访问的空间或工作区）
dock.vm：管理工具模板
--首页
--我的账户
--登出
--登入
--添加内容
--风格
--页面设置
portlet.vm：portlet模版
--top
--body
--bottom
制作流程：
第一步：在\webapps\ROOT\html\themes拷贝一个已存在的风格文件改名为你的风格名：

第二步：在\WEB-INF\liferay-look-and-feel.xml文件元素间增加如下代码: 
 
  /html/themes/${theme-id} 
   
    
   

第三步
在/html/themes/genesis/images/
添加该风格的效果图，命名为thumbnail.png

第四步重启服务

住：默认LOGO 
\com\liferay\portal\dependencies中图片company_logo.png
第六章 制作一个布局
例如：我们要在portal里添加一个布局：

制作开始
第一步：创建布局模版文件
/layouttpl/custom/下添加三个文件：
2_3_columns.tpl       web布局模版文件
2_3_columns.wap.tpl   wap布局模版文件（不支持wap可以不添加）
2_3_columns.gif       布局模版效果图

2_3_columns.tpl内容如下：（css样式在/html/themes/风格包/css/layout.css中定义）

   
       
           
           
       
       
           
           
           
       
   

$processor.processColumn("column-1")	$processor.processColumn("column-2")
$processor.processColumn("column-3")	$processor.processColumn("column-4")		$processor.processColumn("column-5")

第二部 将做好的布局模版文件加入配置文件中
/WEB-INFO/liferay-layout-templates-ext.xml






/layouttpl/custom/3_2_3_columns.tpl
/layouttpl/custom/2_2_columns.wap.tpl
/layouttpl/custom/3_2_3_columns.gif


/layouttpl/custom/2_3_columns.tpl
    /layouttpl/custom/2_2_columns.wap.tpl
/layouttpl/custom/2_3_columns.gif



参数 id 定义该 template 的 ID 号， name 定义该 template 在 Add Content 中显示的名称， template-path 定义该 template 的路径名。
第三部：重启服务