Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Chris Lemler
Custom Theme Questions/Issues in Liferay 6.1
28. November 2012 18:20
Antwort

Chris Lemler

Rang: New Member

Nachrichten: 6

Eintrittsdatum: 20. Januar 2012

Neue Beiträge

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
4. Januar 2013 11:31
Antwort

Nate Cavanaugh

LIFERAY STAFF

Rang: Junior Member

Nachrichten: 67

Eintrittsdatum: 27. November 2006

Neue Beiträge

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
22. September 2013 17:20
Antwort

Archi Madhu

Rang: Regular Member

Nachrichten: 240

Eintrittsdatum: 24. März 2008

Neue Beiträge

Thanks for sharing it guys. It really helped!