Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Matt Lewis
Multiple Columns and fluid theme
February 3, 2012 8:58 AM
Answer

Matt Lewis

Rank: New Member

Posts: 6

Join Date: April 26, 2010

Recent Posts

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 Pires
RE: Multiple Columns and fluid theme
February 7, 2012 5:29 AM
Answer

Paulo Henrique Pires

Rank: Junior Member

Posts: 82

Join Date: February 23, 2011

Recent Posts

I use Media Queries to change behavior according to the device.
Matt Lewis
RE: Multiple Columns and fluid theme
February 7, 2012 6:15 AM
Answer

Matt Lewis

Rank: New Member

Posts: 6

Join Date: April 26, 2010

Recent Posts

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
RE: Multiple Columns and fluid theme
February 7, 2012 11:35 AM
Answer

Ruth Poapst

Rank: New Member

Posts: 3

Join Date: February 7, 2012

Recent Posts

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 emoticon
Paulo Henrique Pires
RE: Multiple Columns and fluid theme
February 9, 2012 4:51 AM
Answer

Paulo Henrique Pires

Rank: Junior Member

Posts: 82

Join Date: February 23, 2011

Recent Posts

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
RE: Multiple Columns and fluid theme
May 4, 2012 6:45 AM
Answer

Federico Cerminara

Rank: New Member

Posts: 1

Join Date: February 10, 2012

Recent Posts

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
RE: Multiple Columns and fluid theme
May 4, 2012 9:01 AM
Answer

Ruth Poapst

Rank: New Member

Posts: 3

Join Date: February 7, 2012

Recent Posts

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