Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Andew Jardine
CSS Compression
May 7, 2012 8:41 PM
Answer

Andew Jardine

Rank: Expert

Posts: 289

Join Date: December 22, 2010

Recent Posts

Hi,

My question is actually realted to both CSS compression and JS compression. I've been doing some digging and have tried a few things out but so far no luck. Here is what I have.

I have a single portlet project with multiple portlet definitions. The structure is something like this (and cannot really be altered -- I inherrited this)
 1
 2MyPortlet/docroot
 3    custom-navigation
 4          view.jsp
 5    custom-breadcrumbs
 6          view.jsp
 7          edit.jsp
 8          help.jsp
 9    custom-bookmarks
10         view.jsp
11    css
12        common
13            common.css.jsp
14        custom-navigation
15            custom-nav-a.css.jsp
16            custom-nav-b.css
17        custom-breadcrumbs
18            a.css.jsp
19            b.css
20            c.css
21        custom-bookmarks
22            styles.css.jsp


I have added in the /MyProject/docroot/css a file called main.jsp. In it I have done placed the following --

 1
 2<%@ include file="/html/portlet/css_init.jsp" %>
 3<%@ include file="common/common.css" %>
 4<%@ include file="custom-navigation/custom-nav-a.css.jsp" %>
 5<%@ include file="custom-navigation/custom-nav-b.css" %>
 6<%@ include file="custom-breadcrumbs/a.css.jsp" %>
 7<%@ include file="custom-breadcrumbs/b.css" %>
 8<%@ include file="custom-breadcrumbs/c.css" %>
 9<%@ include file="custom-bookmarks/styles.css.jsp" %>


and then in my portal-ext.properties I have added the required --

1
2theme.fast.load.css=true


I clear the server cache and the browser cache. Fire everything up (firefox) and navigate to a page that has all three portlets on it. Using Firebug and selecting the NET tab with a CSS filter I am able to see the main.jsp line, but it is slightly grey as compared to all the other lines which are basically the individual CSS files listed above. I think that this means that it is not working right?

Can someone tell me what I am doing wrong?
Andew Jardine
RE: CSS Compression
May 8, 2012 10:30 AM
Answer

Andew Jardine

Rank: Expert

Posts: 289

Join Date: December 22, 2010

Recent Posts

bump.

Anyone out there?
Andew Jardine
RE: CSS Compression
May 9, 2012 9:13 AM
Answer

Andew Jardine

Rank: Expert

Posts: 289

Join Date: December 22, 2010

Recent Posts

I've solved my own problem. In the end, it was the morons that migrated the portlets for us and their moronic approach to doing it that was the problem. They had not included any style sheets in the liferay-portlet.xml file and instead were doing the classic <link type="..."/> in the JSP pages.

Fail.

How I managed to get it to work.

1. Create a file in the /my-portlet/docroot/css location called main.jsp (you can call it whatever you want -- that appears to be LR standard)

2. Copy ROOT/html/portlets/css_init.jsp to you css folder in your project. (I tried referencing it but got a 500 error at run time)

3. First line in the main.jsp should reference the css_init.jsp file using the <%@ include file="... %>

4. Include references to all other style sheets using the same <%@ include file="..." %> approach. The order you specify them is the order they will load so make sure your highest priority sheet is last in the list.

5. In the liferay-portlet.xml add a reference to /css/main.jsp in the <header-portlet-css /> section.

6. Set theme.fast.load.css=true in the portal-ext.properties file

7. Restart your server clearing all cache (server and browser).

Using firebug you should see a main.jsp CSS item on the NET tab. All your styles shouldstill work but you get all the data using one call instead of x.

Hope this helps save someone else some pain.