模板定制,开发一个新式(1)

第一部：

Ø         Liferay的theme 存放在／html/themes/下，每一个文件夹都是一个样式．我们先COPY一个文件夹，并改为你想要起的名字，这里叫zxtclass.

Ø         修改／WEB-INF/liferay-look-and-feel.xml,找到刚才复制的文件夹名称（文件夹名称也就是模版的名称），对应的是theme 的ID.在复制一个这个配置．把相应的跟径和名称改成要使用的名称．之后我就可以在页面中显示．

第二部：分析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 />标签定义的（portal_normal.jsp），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>

注: 这里面的资料大部分是网上搜集的,在下篇文章我会详细介绍我们所能用到的CSS样式.及修改方法.