Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Chris Lemler
Custom Theme Questions/Issues in Liferay 6.1
November 28, 2012 6:20 PM
Answer

Chris Lemler

Rank: New Member

Posts: 6

Join Date: January 20, 2012

Recent Posts

We are building a custom theme that must support IE8/9/10, Chrome, Safari and Firefox. Additionally, we are looking to integrate some of the styles provided by Twitter Bootstrap. With that background, our UX developer has raised the following questions/concerns:

1) Why are there errors, found when using w3c's CSS validation simulator (http://jigsaw.w3.org/css-validator/validator), with Liferay's CSS files "out of the box"?
See this list of all the errors found:
application.css - 7 errors,
base.css - no errors,
custom.css - no errors,
dockbar.css - 5 errors,
extras.css - 66 errors,
forms.css - 13 errors,
layout.css - 1 errors,
main.css - no errors,
navigation.css - 6 errors, and
portlet.css - 36 errors

2) How come Liferay's custom.css commented out styling, ( /* styling ... */ ), doesn't override another styling found in, for example, base.css, even though the styling on base.css isnt commented out? I am wanting to do turn off the SASS styling features by commenting them out and rewriting them in non-SASS styling syntax.

3) Is @compass, now featured in Liferay 6.1.20. IE8-9 browser compatible with little to no edits being made to make the SASS styling work?

Thank you in advance for any feedback. We are trying to gauge the best path to developing a custom theme with proper support of IE8/9.
Chris
Nate Cavanaugh
RE: Custom Theme Questions/Issues in Liferay 6.1
January 4, 2013 11:31 AM
Answer

Nate Cavanaugh

LIFERAY STAFF

Rank: Junior Member

Posts: 62

Join Date: November 27, 2006

Recent Posts

Hi Chris,
Thanks for asking. I'll go ahead and respond to each of your questions:

1) Why are there errors, found when using w3c's CSS validation simulator (http://jigsaw.w3.org/css-validator/validator), with Liferay's CSS files "out of the box"?


We don't recommend using the CSS Validator. It assumes that the browsers your deploying to do not have vendor prefixes for the CSS features you're requesting, which often times, that is only way to ensure that most people see your changes.
For instance, opacity. In order to do opacity in a cross browser way that works in IE and other browsers you need to do:
1filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
2opacity: 0.9;

However, while that's not valid CSS according to the spec, it is valid CSS for actual browsers, and all browsers ignore rules they don't understand.

Also, since the CSS3 spec has yet to be finalized, checking if something is "valid" is a constantly moving target.

There is a certain academic benefit to the validator, but not really a practical one.

2) How come Liferay's custom.css commented out styling, ( /* styling ... */ ), doesn't override another styling found in, for example, base.css, even though the styling on base.css isnt commented out? I am wanting to do turn off the SASS styling features by commenting them out and rewriting them in non-SASS styling syntax.


I'm not sure I fully understand this question. The custom.css file is imported after the other files, so you can override the styling defined by the other files, but commenting out code in custom.css will not comment out code any other file.
They're just plain CSS imports (or if in production mode, we combine it all into one file).

While we don't recommend editing the other files directly, if this is required, you have the ability to modify the base file as needed.

3) Is @compass, now featured in Liferay 6.1.20. IE8-9 browser compatible with little to no edits being made to make the SASS styling work?


Compass is a set of utilities and Sass mixins that help solve common problems in CSS. For instance, instead of having to write:
1filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
2opacity: 0.9;


Every time you want to have opacity, you can just write:
1@include opacity(0.9);


However, some features of Compass don't have any equivalent in IE. For instance, box-shadow.
What we've discovered is that most of those things are safe to use as an enhanced experience, while allowing inferior browsers to get a limited experience (similar to black & white televisions not being able to display in color).

Some design teams demand pixel perfect accuracy across browsers, but this is often going against the grain of the medium, and more often than not, introduces performance issues or complexity costs that cost much more in development time.

Since you mentioned Twitter Bootstrap, you can see this effect by viewing Bootstrap's site in Chrome or Firefox, and then viewing it in IE8.

I hope that answers your questions for you.

Thanks Chris,
Archi Madhu
RE: Custom Theme Questions/Issues in Liferay 6.1
September 22, 2013 5:20 PM
Answer

Archi Madhu

Rank: Regular Member

Posts: 232

Join Date: March 24, 2008

Recent Posts

Thanks for sharing it guys. It really helped!