Multiple Columns and fluid theme

[Matt Lewis, módosítva 12 év-val korábban]

I am trying to reduce my 2-column layout to 1 column and stack my portlets when going to the 320 resolution. I see that liferay.com is doing something similar but are they using the 1 column layout and style everything in nested portlets and web content displays or is actually reducing from 2 to 1?

Any help is appreciated.

matt

[Paulo Henrique Araujo, módosítva 12 év-val korábban]

I use Media Queries to change behavior according to the device.

[Matt Lewis, módosítva 12 év-val korábban]

Paulo Henrique Pires:

I use Media Queries to change behavior according to the device.

okay, cool. But when you have a portlet layout of 70/30 selected for your portlets and you get to the smaller resolutions how do you tell the second column to stack under the first so the user doesn't have to scroll over?

I have come up with a work around but I don't like it. I basically used the 1 column layout and then embedded custom portlets into web content displays and styled the web content portlets to use viewport AUI on rescale of the browser. It works fine but could become very confusing for more complicated designs.

Is there something that will automatically stack the layouts when the resolution gets too small? How does liferay.com do it?
Thanks for you help.
matt

[Ruth Poapst, módosítva 12 év-val korábban]

I'm new but think it's ..

Liferay 6.1 uses SaSS, which helps the code be simpler for mobile site design.

@import "compass";

@mixin mobile($selector, $width) {
.#{$selector}{
#wrapper,
.portlet-column,
#wrapper #content {
width: $width !important;
}
}
}

$mobile-s: 300px;
$mobile-m: 460px;
$mobile-l: 700px;

@include mobile("touch.aui-view-320, .touch.aui-view-4", $mobile-s);
@include mobile("touch.aui-view-480", $mobile-m);
@include mobile("touch.aui-view-720", $mobile-l);

What it does is it stacks all the columns on top of each other and sets the width for the different views.

I just grabbed it from another post .. cause I'm just getting into upgrading my themes from 6.0 to 6.1 .. hope this helps

Ruthie

[Paulo Henrique Pires, módosítva 12 év-val korábban]

Wonder, the tip of Ruth was excelent, an easy way to do even in large projects. Matt, test and respond to and it worked well for you.

[Federico Cerminara, módosítva 11 év-val korábban]

Hello, I’m quite new in using Liferay. I’m trying to understand how to use media queries to make my pages have a web responsive approach. I’m able to create a web responsive theme (something simple with a div containing a changing background according to size screen). But now I’d like to understand something more. Not only making responsive the html in a web content display, but making responsive the whole portlet. Something like moving a portlet somewhere else or having a theme change. Paulo, I’d like to understand how effectively you use media queries to obtain this kind of berhaviuour. Or if you can show me how the liferay.com works. Can you share me something more clear? Thanks, Federico

[Ruth Poapst, módosítva 11 év-val korábban]

New to Liferay then you should review the following URLs to help understand Liferay and theme development .. also I use Google.ca with search .i.e, "Liferay SASS" to find what others have already asked Qs about and found As for .. basic overview of Liferay http://attuneuniversity.wordpress.com/2012/03/07/overview-of-liferay-development-and-liferay-theme-development/ ; how to create your own theme http://attuneuniversity.wordpress.com/tag/liferay-theme-development/ ; uTube Liferay 101 http://www.youtube.com/watch?v=0TSKPlmSuyY ; Liferay.com, mobile sites and responsive layouts http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/liferay-com-mobile-sites-and-responsive-layouts ; Liferay 6.1 and SASS http://www.liferay.com/web/bavithra.rajendran/blog/-/blogs/12120953 ; review all code in Liferay's 6.1 7Cogs theme .. download .war then change to .zip and export to folder on your hard drive to review all code (and/or use this as your starting theme in Elipse SDK with Ant) ; Compass and SASS on Bradley Wood's Liferay Tips (good resource) http://liferaytips.tumblr.com/post/11616403588/liferay-6-1-compass-and-sass .. that should get you started .. FYI, I setup my main CSS at top of file then used .aui-view-lt960 {} (applied to all less than 960) and .aui-view-lt720 {} (applied to all less than 720 so ipad) and .aui-view-480 {} (specifically for mobile/iPhone landscape) and .aui-view-4, .aui-view-320 {} (specifically for min 150px to max 320px mobile/iPhone portrait) .. hope this helps .. Ruth