Liferay Portal学习笔记之(五):开发主题风格

系统 1458 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="&lt;%= Constants.TEXT_HTML_DIR + tilesContent %&gt;">定义的。所有的css样式信息是定义在css_cached.jsp文件中的。
2、liferay portal的页面定义大部分地方都采用了DIV+CSS的方式,下面将以classic的整个DIV定义框架给出,以说明classic风格的定义方法。
</liferay-util:include> </liferay-theme:box> </liferay-util:include>
< div id = " layout-outer-side-decoration " >
< div id = " layout-inner-side-decoration " >
< div id = " layout-box " >
    
<!---->
    
< 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 >
    
<!---->
    
< 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 >
    
<!---->
    
< 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 " >
                            
<!---->
                            
< 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 >
                            
<!---->
                            
< 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 ><!---->
                                    
<!----> div >
                                
<!----> div >
                            
<!----> div ><!---->
                            
<!---->
                            
< div  class = " portlet-bottom-decoration-2 " >< div >< div ><!----> div ><!----> div ><!----> div >
                        
<!----> div ><!---->
                    
<!----> div >

Liferay Portal学习笔记之(五):开发主题风格theme


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论