Liferay 加载自定义css 文件

简介:

 (1) 对于特别通用的文件,比如是ext-js库要使用到的css文件,你可以有2个选择:

选择1:放在ROOT/html/common/themes/top_head.jsp中:

 
 
  1. .. 
  2. <%-- Portal CSS --%> 
  3. <!--added by charles to load the ext-js css library--> 
  4. <link href="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNHost() + themeDisplay.getPathContext() + "/html/css/extjs/resources/css/ext-all.css")) %>rel="stylesheet" type="text/css" /> 
  5.  
  6. <link href="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNHost() + themeDisplay.getPathContext() + "/html/css/main.css")) %>rel="stylesheet" type="text/css" /> 
  7. .. 

这种情况下,它将是整个服务器中第一个被加载的css(因为top_head.jsp被portal_normal.vm中包含):

 

选择2:放在ROOT/html/css/main.css以@import形式给出:

 
 
  1. @import url(portal/aui.css); 
  2.  
  3. /* 
  4. * add by charles here to load the global css 
  5. */ 
  6. @import url(extjs/resources/css/ext-all.css); 
  7.  
  8. @import url(portal_1.css); 
  9. @import url(portal_2.css); 
  10.  
  11. @import url(taglib_1.css); 
  12. @import url(taglib_2.css); 
  13.  
  14. @import url(portal/openid.css); 
  15. @import url(portal/accessibility.css); 

这种情况下, 这个css文件在所有的webapps下面的包含ROOT应用在内的所有应用的main.css加载之后,但是深入main.css中被包含的外部css文件之前被加载。

 

(2) 对于某个theme用到的css文件,你可以在这个theme的main.css中以@import形式给出

(3)对于某个portlet所特有的css文件,你可以在这个portlet的main.css中以@import形式给出





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/915887,如需转载请自行联系原作者

目录
相关文章
|
6月前
|
前端开发 UED
关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法
关于 Web 应用的内联 css 和 scss 文件里的 var 关键字用法
75 0
|
6月前
|
XML 前端开发 JavaScript
使用代码给 SAP UI5 XML 视图添加自定义 CSS
使用代码给 SAP UI5 XML 视图添加自定义 CSS
42 0
使用代码给 SAP UI5 XML 视图添加自定义 CSS
|
4月前
|
前端开发
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题
解决VScode在保存less文件时,自动生成对应的css文件以及安装Easy less之后,计算式子不显示结果的问题
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
53 0
|
3月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
56 0
|
1月前
|
存储 缓存 前端开发
link 与 @import:CSS 样式表的加载策略(下)
link 与 @import:CSS 样式表的加载策略(下)
|
1月前
|
存储 前端开发 JavaScript
link 与 @import:CSS 样式表的加载策略(上)
link 与 @import:CSS 样式表的加载策略(上)
|
3月前
|
前端开发 程序员 容器
CSS样式文件和class类名命名规范参考
CSS样式文件和class类名命名规范参考
28 0
|
3月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
26 0
|
3月前
|
存储 缓存 前端开发
【面试题】浅谈css加载是否会造成阻塞
【面试题】浅谈css加载是否会造成阻塞