Fórum

CSS Compression

thumbnail
Andew Jardine, modificado 11 Anos atrás.

CSS Compression

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
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)

MyPortlet/docroot 
    custom-navigation
          view.jsp
    custom-breadcrumbs
          view.jsp
          edit.jsp
          help.jsp
    custom-bookmarks
         view.jsp
    css
        common
            common.css.jsp
        custom-navigation
            custom-nav-a.css.jsp
            custom-nav-b.css
        custom-breadcrumbs
            a.css.jsp
            b.css
            c.css
        custom-bookmarks
            styles.css.jsp


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


<%@ include file="/html/portlet/css_init.jsp" %>
<%@ include file="common/common.css" %>
<%@ include file="custom-navigation/custom-nav-a.css.jsp" %>
<%@ include file="custom-navigation/custom-nav-b.css" %>
<%@ include file="custom-breadcrumbs/a.css.jsp" %>
<%@ include file="custom-breadcrumbs/b.css" %>
<%@ include file="custom-breadcrumbs/c.css" %>
<%@ include file="custom-bookmarks/styles.css.jsp" %>


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


theme.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?
thumbnail
Andew Jardine, modificado 11 Anos atrás.

RE: CSS Compression

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
bump.

Anyone out there?
thumbnail
Andew Jardine, modificado 11 Anos atrás.

RE: CSS Compression

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
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.