<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    posts - 19,  comments - 123,  trackbacks - 0
    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 韓淚 閱讀(5601) 評論(0)  編輯  收藏 所屬分類: Liferay學習

    虛其心,可解天下之問; 專其心,可治天下之學; 靜其心,可悟天下之理; 恒其心,可成天下之業。

    常用鏈接

    留言簿(12)

    隨筆分類(19)

    隨筆檔案(19)

    搜索

    •  

    最新評論

    閱讀排行榜

    主站蜘蛛池模板: 成年女人喷潮毛片免费播放| 大学生高清一级毛片免费| 中文字幕在线观看亚洲| 久久不见久久见中文字幕免费| 天天综合亚洲色在线精品| 亚洲综合色婷婷七月丁香| 无码人妻精品中文字幕免费| 亚洲欧洲免费无码| 精品国产香蕉伊思人在线在线亚洲一区二区 | 最近中文字幕无吗高清免费视频| 男男gvh肉在线观看免费| 久久久久亚洲精品美女| 日韩精品免费电影| 久操免费在线观看| 真正全免费视频a毛片| 久久精品国产亚洲av高清漫画 | 亚洲综合色丁香麻豆| 国产在线观看免费视频播放器| 免费一级毛片无毒不卡| 亚洲AV成人片无码网站| 日木av无码专区亚洲av毛片| 亚洲国产a级视频| 无码专区永久免费AV网站| 在线免费观看h片| 国产精品亚洲五月天高清| 97亚洲熟妇自偷自拍另类图片| 免费一级毛片在播放视频| 国产免费丝袜调教视频| 青青操免费在线视频| 国产区图片区小说区亚洲区| 亚洲免费一级视频| 久久精品国产精品亚洲艾草网| 免费va在线观看| 女人张开腿等男人桶免费视频| 无码人妻一区二区三区免费n鬼沢 无码人妻一区二区三区免费看 | 亚洲成AV人片久久| 亚洲女同成av人片在线观看 | 亚洲香蕉久久一区二区 | a在线视频免费观看在线视频三区| 在线观看亚洲AV日韩A∨| 亚洲网站视频在线观看|