Responsive Layout

[Manish Jha, modificado hace 10 años.]

Hi


I tried to create a responsive theme based on _style. It is responsive but without any images and customization.

I like to create a responsive layout. I copied the example "1-2-1-columns-layouttpl" avaialble with Liferay 6.2.

Will this work with the theme ?

[David H Nebinger, modificado hace 10 años.]

no. a layout plugin is not a theme plugin.

[Manish Jha, modificado hace 10 años.]

is there any way to create a responsive layout ? Could you provide an example.

[Prakash Khanchandani, modificado hace 10 años.]

Check this out: http://blogs.xtivia.com/home/-/blogs/building-responsive-layouts-in-liferay-with-twitter-bootstrap

[Daniel Tyger, modificado hace 10 años.]

I have created 5 additional custom responsive layouts to augment the Liferay stack that ships with 6.2. I am happy to share examples but not sure if this is the right place to post / share such things. Here is a "3_2_columns" example our users wanted... this file would be saved as "3_2_columns.tpl and placed in the /webapps/ROOT/layouttpl/custom folder along with the correctly sized graphic .png (also attached, here) and add an entry for this layout in the /webapps/ROOT/WEB-INF/liferay-layout-templates.xml file and restart tomcat to see your new layouts. Others we have created include 2_2_columns_ii | 2_3_2_columns | 2_3_columns | 2_columns_iv ... btw - if you use "Classic theme as the parent theme, you will have a more complete responsive theme to start tweaking.... hope this helps. -daniel

<div class="columns-3-2" id="main-content" role="main">
	<div class="portlet-layout row-fluid">
        <div class="portlet-column portlet-column-first span3" id="column-1">
        			$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
        </div>
        <div class="portlet-column span9">
            <div class="portlet-layout row-fluid">
                <div class="portlet-column span6" id="column-2">
                	$processor.processColumn("column-2", "portlet-column-content")
                </div>
                <div class="portlet-column span6" id="column-3">
                    $processor.processColumn("column-3", "portlet-column-content")
                </div>
            </div>
            <div class="portlet-layout row-fluid">
                <div class="portlet-column span12" id="column-4">
                    $processor.processColumn("column-4", "portlet-column-content")
                </div>
            </div>
		</div>
	</div>
</div>

[David H Nebinger, modificado hace 10 años.]

You can push them out through the marketplace as free plugins...