PUBLIC - Liferay Portal Community Edition

CSS Incorrect when css_fast_load=true

Details

  • Type: Bug Bug
  • Status: Open Open
  • Priority: Minor Minor
  • Resolution: Unresolved
  • Affects Version/s: 6.1.1 CE GA2
  • Fix Version/s: None
  • Component/s: Theme Dev
  • Environment:
    Reproducable in multiple environments including standard tomcat bundle and WAR deployment under existing Tomcat installation.
  • Similar Issues:
    Show 5 results 

Description

Deploying custom theme in development environment works correctly. In production environment with theme.css.fast.load=true (by default), the CSS attributes are being calculated differently. Adding "?css_fast_load=0" to the URL in production resolves the issue temporarily.

The new theme is based on the "classic" theme and rather than copy and modify the entire "custom.css", we have modified "main.css" to include "theme.css" as the last import. This technique works fine and makes version control and upgrade much easier given the minimal changes we are making to the classic theme.

theme.css
@import url(color_schemes/manl.css);

#wrapper {
    background-image: url(../images/custom/wrapper_bg.png);
    background-repeat: no-repeat;
}

#sign-in {
	top: 0;
}

#banner {
    background-image: url(../images/custom/banner_bg.png);
    background-repeat: no-repeat;
    background-position: 90% top;
}

#heading {
    height: 131px;
}

The panels below show Firebug's capture of the CSS delivered in each of the two scenarios.

main.css with ?css_fast_load=1
#wrapper {
    background: none repeat scroll 0 center transparent;
    margin: 0 auto;
    max-width: 90%;
    min-width: 960px;
    position: relative;
main.css with ?css_fast_load=0
#wrapper {
    background: none repeat scroll 0 0 transparent;
    margin: 0 auto;
    max-width: 90%;
    min-width: 960px;
    position: relative;

Note the different interpretation for the "background" tag!!! It is the "center" vertical alignment that is causing our production issue.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Alberto Chaparro added a comment -

Hi Peter,

While we futher investigate this issue, could you try the following workaround?

  • Copy the file main.css located in {theme_path}/docroot/css/ to {theme_path}

    /docroot/_diffs/css and deploy the theme (in Linux you could need execute the touch command to change the modification date)

Please, let me know if this solves your problem.

Show
Alberto Chaparro added a comment - Hi Peter, While we futher investigate this issue, could you try the following workaround? Copy the file main.css located in {theme_path}/docroot/css/ to {theme_path} /docroot/_diffs/css and deploy the theme (in Linux you could need execute the touch command to change the modification date) Please, let me know if this solves your problem.
Hide
Permalink
Peter Hancox added a comment -

Hi Alberto,

They are already the same file. I modified the original "main.css" so it included my "theme.css". Because the file had been modified, it was already placed under "_diffs/css/".

If I explicitly set "background-position" then it works correctly.

#wrapper

{ background-image: url(../images/custom/wrapper_bg.png); background-repeat: no-repeat; background-position: left top; }

I've attached the theme WAR file if that helps.

Show
Peter Hancox added a comment - Hi Alberto, They are already the same file. I modified the original "main.css" so it included my "theme.css". Because the file had been modified, it was already placed under "_diffs/css/". If I explicitly set "background-position" then it works correctly. #wrapper { background-image: url(../images/custom/wrapper_bg.png); background-repeat: no-repeat; background-position: left top; } I've attached the theme WAR file if that helps.
Hide
Permalink
Peter Hancox added a comment -

Hi Alberto,

Didn't upload the theme WAR as I just noticed your comment that this problem was caused by LPS-25342.

However, LPS-25342 says it was fixed in version 6.1.1 GA2 which is what I'm running?

Show
Peter Hancox added a comment - Hi Alberto, Didn't upload the theme WAR as I just noticed your comment that this problem was caused by LPS-25342 . However, LPS-25342 says it was fixed in version 6.1.1 GA2 which is what I'm running?
Hide
Permalink
Alberto Chaparro added a comment -

Hi Peter,

Sorry, I didn't notice you had modified main.css file, however it could also be caused by the LPS-25342, could you take a look at the main.css file included in the directory [theme_folder}\docroot\css\.sass-cache and verify that background tag?

Thanks.

Show
Alberto Chaparro added a comment - Hi Peter, Sorry, I didn't notice you had modified main.css file, however it could also be caused by the LPS-25342 , could you take a look at the main.css file included in the directory [theme_folder}\docroot\css\.sass-cache and verify that background tag? Thanks.
Hide
Permalink
Peter Hancox added a comment -

Hi Alberto,

Here is entry from main.css in the cache:

#wrapper {
  background: none;
  margin: 0 auto;
  max-width: 90%;
  min-width: 960px;
  position: relative; }

And WAR file attached

Show
Peter Hancox added a comment - Hi Alberto, Here is entry from main.css in the cache: #wrapper { background: none; margin: 0 auto; max-width: 90%; min-width: 960px; position: relative; } And WAR file attached
Hide
Permalink
Alberto Chaparro added a comment -

Hi Peter,

I have just created a new ticket LPS-29690 related to a problem found in SDK 6.1.20 but I'm not sure if it's the same problem than yours yet. We are going to work on it.

Regards

Show
Alberto Chaparro added a comment - Hi Peter, I have just created a new ticket LPS-29690 related to a problem found in SDK 6.1.20 but I'm not sure if it's the same problem than yours yet. We are going to work on it. Regards
Hide
Permalink
Ivano Carrara added a comment -

I confirm that with theme.css.fast.load=true the CSS changes are not considered in 6.1.1.

Try to create a new Theme based on the Classic Theme - then copy the content of the custom.css file from the Liferay bundle 6.1.1 to the _diff/css/custom.css file and do some changes.

If you deploy the new Theme with theme.css.fast.load=true the changes have no effect.
If you change the property to theme.css.fast.load=false you get the changes.

Show
Ivano Carrara added a comment - I confirm that with theme.css.fast.load=true the CSS changes are not considered in 6.1.1. Try to create a new Theme based on the Classic Theme - then copy the content of the custom.css file from the Liferay bundle 6.1.1 to the _diff/css/custom.css file and do some changes. If you deploy the new Theme with theme.css.fast.load=true the changes have no effect. If you change the property to theme.css.fast.load=false you get the changes.
Hide
Permalink
Aniceto P Madrid added a comment -

Peter, Ivano
Can you tell me if this issue is stillin 6.2.0m4? Here you can download bundles http://sourceforge.net/projects/lportal/files/Liferay%20Portal/6.2.0%20M4/
Thanks

Show
Aniceto P Madrid added a comment - Peter, Ivano Can you tell me if this issue is stillin 6.2.0m4? Here you can download bundles http://sourceforge.net/projects/lportal/files/Liferay%20Portal/6.2.0%20M4/ Thanks
Hide
Permalink
Peter Hancox added a comment -

Hi Aniceto,

I'm out of the office until next week and not actively working on Liferay at the moment. I'll try and check for you but as yet haven't set up an environment for milestone installs so it'd be a couple of weeks at best before I can verify for you.

Apologies
Peter

Show
Peter Hancox added a comment - Hi Aniceto, I'm out of the office until next week and not actively working on Liferay at the moment. I'll try and check for you but as yet haven't set up an environment for milestone installs so it'd be a couple of weeks at best before I can verify for you. Apologies Peter
Hide
Permalink
Aniceto P Madrid added a comment -

I'll wait.
Thanks

Show
Aniceto P Madrid added a comment - I'll wait. Thanks
Hide
Permalink
Edward Gonzales added a comment -

Hello everyone! We are in the process of moving component "Theme" to "Theme > Dev" in LPS. Please make the necessary adjustments to your filters. Thanks!

Show
Edward Gonzales added a comment - Hello everyone! We are in the process of moving component "Theme" to "Theme > Dev" in LPS. Please make the necessary adjustments to your filters. Thanks!

People

Vote (0)
Watch (5)

Dates

  • Created:
    Updated:
    Days since last comment:
    4 weeks, 5 days ago