如何在liferay中创建一个主意theme(二)转

lyn1984

在 上一篇博文中，提到了怎么创作 theme ，其实那只是一个壳。
现在才是编辑。
先解释下它里面的 各种文件 的含义。
--------------------------------------
门户支持两种形式的风格开发，一种是直接做风格文件夹放入工程中，另一种是将风格做为一个应用与门户并行存在。在此我们只说明文件夹形式的风格制作。
目录分析：
风格包都放在/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
结合上一篇博文，修改完毕，改好相应的look-and-feel.xml 文件，就可以直接 install 进去。
（注：不能自己压缩成 *.zip 或 *.war 文件，那是没有经过 ant编译的，导入去是错误的。）
-----------------------------------------------
另外方法：
制作流程：
A- 可以直接在 D:\gavin.wang\Java\jar\Liferay\liferay-portal-5.2.3\tomcat-6.0.18\webapps\JEDI  
    JEDI为theme 的显示名称（也就文件夹名），可以直接在该文件夹下的子文件夹中，修改各个CSS和VM文件等。
-------------------
B- 如下：

第一步：在\webapps\ROOT\html\themes拷贝一个已存在的风格文件改名为你的风格名：
第二步：在\WEB-INF\liferay-look-and-feel.xml文件<custom></custom>元素间增加如下代码:
<theme id="文件夹名" name="自定义">
  <root-path>/html/themes/${theme-id}</root-path>
  <settings>
   <setting key="bullet-style-options" value="1,2" />
  </settings>
</theme>

第三步
在/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中定义）
<div class="columns-2-3" id="content-wrapper">
    <table id="layout-grid">
        <tr>
            <td class="lfr-column twentyfive" id="column-1" valign="top">
                $processor.processColumn("column-1")
            </td>
            <td class="lfr-column seventyfive" id="column-2" colSpan="3" valign="top">
                $processor.processColumn("column-2")
            </td>
        </tr>
        <tr>
            <td class="lfr-column twentyfive" id="column-3" valign="top">
                $processor.processColumn("column-3")
            </td>
            <td class="lfr-column fifty" id="column-4" colSpan="2" valign="top">
                $processor.processColumn("column-4")
            </td>
            <td class="lfr-column twentyfive" id="column-5" valign="top">
                $processor.processColumn("column-5")
            </td>
        </tr>
    </table>
</div>

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

view plaincopy to clipboardprint?
<?xml version="1.0"?>  
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 4.3.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_4_3_0.dtd">  
<layout-templates>  
<custom>  
<layout-template id="3_2_3_columns" name="3_2_3_columns">  
<template-path>/layouttpl/custom/3_2_3_columns.tpl</template-path>  
<wap-template-path>/layouttpl/custom/2_2_columns.wap.tpl</wap-template-path>  
<thumbnail-path>/layouttpl/custom/3_2_3_columns.gif</thumbnail-path>  
</layout-template>  
<layout-template id="2_3_columns" name="2列-3列">  
<template-path>/layouttpl/custom/2_3_columns.tpl</template-path>  
    <wap-template-path>/layouttpl/custom/2_2_columns.wap.tpl</wap-template-path>  
<thumbnail-path>/layouttpl/custom/2_3_columns.gif</thumbnail-path>  
</layout-template>  
</custom>  
</layout-templates>   
<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 4.3.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_4_3_0.dtd">
<layout-templates>
<custom>
<layout-template id="3_2_3_columns" name="3_2_3_columns">
<template-path>/layouttpl/custom/3_2_3_columns.tpl</template-path>
<wap-template-path>/layouttpl/custom/2_2_columns.wap.tpl</wap-template-path>
<thumbnail-path>/layouttpl/custom/3_2_3_columns.gif</thumbnail-path>
</layout-template>
<layout-template id="2_3_columns" name="2列-3列">
<template-path>/layouttpl/custom/2_3_columns.tpl</template-path>
    <wap-template-path>/layouttpl/custom/2_2_columns.wap.tpl</wap-template-path>
<thumbnail-path>/layouttpl/custom/2_3_columns.gif</thumbnail-path>
</layout-template>
</custom>
</layout-templates>  
参数 id 定义该 template 的 ID 号， name 定义该 template 在 Add Content 中显示的名称， template-path 定义该 template 的路径名。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wgy2750/archive/2010/01/28/5264267.aspx

lyn1984

遨豪一直专注于Liferay门户本地化服务,致力于为中国用户提供最佳的Liferay门户解决方案，其主要服务包括：
1. Liferay门户二次开发服务（基于客户需求）
2. Liferay门户技术支持服务 （现场+远程）
3. Liferay门户定制培训服务 （现场+远程）
4. Liferay门户企业版服务  （专业技术支持）
--------------------------------------------------------------------------------------------------
遨豪(大连)科技有限公司
Liferay 中国合作伙伴
-------------------------------------
市场部: Mr.Luo
-------------------------------------
电话:411-8405-2127
传真:411-8489-8263
MSN: liferayjw@hotmail.com
QQ:  1209462980
-------------------------------------
地址：大连高新技术产业园区
-------------------------------------