Liferay load a custom CSS file

(1) For particularly common files, such as the CSS files to be used by the EXT-JS library, you can have 2 choices:

Option 1: Put it in the root/html/common/themes/top_head.jsp:

.. 
<%--Portal CSS--%> 
<!--added by Charles to load the Ext-js CSS library--> 
<link "href= Html Util.escape (Portalutil.getstaticresourceurl (Request, Themedisplay.getcdnhost () + themedisplay.getpathcontext () + "/ Html/css/extjs/resources/css/ext-all.css "))%>" rel= "stylesheet" type= "Text/css"/> "<link href=" <%= " 
     
Htmlutil.escape (Portalutil.getstaticresourceurl (Request, Themedisplay.getcdnhost () + Themedisplay.getpathcontext ( ) + "/html/css/main.css")%> "rel=" stylesheet "type=" Text/css "/>" 
.

In this case, it will be the first CSS loaded on the entire server (because top_head.jsp is included in the PORTAL_NORMAL.VM):

Option 2: Put the root/html/css/main.css in the @import form:

@import URL (portal/aui.css); 
/* Add by Charles I to load the global CSS 
*
/@import URL (extjs/resources/css/ext-all.css); 
     
@import URL (portal_1.css); 
@import URL (portal_2.css); 
     
@import URL (taglib_1.css); 
@import URL (taglib_2.css); 
     
@import URL (portal/openid.css); 
@import URL (portal/accessibility.css);

In this case, the CSS file is loaded after all main.css of all applications, including the root application below all WebApps, but are loaded before the external CSS file that is included in the MAIN.CSS.

(2) for a theme use of CSS files, you can in this theme main.css in the form of @import

(3) for a portlet-specific CSS file, you can give the @import form in the main.css of the Portlet