CSS Incorrect when css_fast_load=true

• Type: Bug
• Status: Open
• Resolution: Unresolved
• Affects Version/s: 6.1.1 CE GA2
• Fix Version/s: None
• Component/s: UI Infrastructure, UI Infrastructure > Themes Infrastructure
• Labels:
  • community-verifier
  • theme.css.fast.load
• Environment: Reproducable in multiple environments including standard tomcat bundle and WAR deployment under existing Tomcat installation.
• Similar Issues: Show 5 results ; ;

  LPS-21417	controls-visible css class incorrectly present when user logged out
  LPS-30150	CSS minification when using @import statements with media type or media query rules is broken
  LPS-42779	Advanced Styling incorrectly escapes CSS code
  LPS-15989	ComboServlet tries to minify CSS as Javascript
  LPS-38558	HTML markup in portlet search bar is incorrect

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.

[Alberto Chaparro]

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.

[Peter Hancox]

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.

[Peter Hancox]

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?

[Alberto Chaparro]

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.

[Peter Hancox]

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

[Alberto Chaparro]

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

[Ivano Carrara]

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.

[Aniceto P Madrid]

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

[Peter Hancox]

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

[Aniceto P Madrid]

I'll wait.
Thanks

[Edward Gonzales]

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!