I am trying to build a layout with a row within another row, and the inner row contains two regions. Like this: Canvas>Column>Row>Column>Row>Region 1 and 2. The reason is that I want the outer row to be 100% wide and the inner row 70% wide and centered.

The problem I encountered is that in the HTML the inner rows and columns are omitted, and the HTML structure is Body>Row DIV>Region (1 and 2) DIV, no divs for inner rows and columns . Is there a way to have the full structure in the HTML?

CommentFileSizeAuthor
#2 panels_layout.png40.31 KBzualas

Comments

merlinofchaos’s picture

merlinofchaos commented
Status: Active » Postponed (maintainer needs more info)

You'll have to provide more detail. What method are you using to build the layout? Can you attach the code you're using? Please set back to active when information is provided.

zualas’s picture

zualas commented
StatusFileSize
new panels_layout.png40.31 KB

I create a flexible reusable layout through the layout designer. I don't know how to export a layout, so please let me know if there is a way. So far I have attached a picture of my layout.

Panels custom layout

zualas’s picture

zualas commented
Status: Postponed (maintainer needs more info) » Active
merlinofchaos’s picture

merlinofchaos commented
Status: Active » Fixed

I see. Exporting any panel that uses the layout should include all the code for the layout -- that would actually be very helpful to me in testing. (Try to have as little content in it as possible -- preferably no content at all).

Panels tries to omit the divs for columns and rows that it thinks are unnecessary to try and reduce the weight of the output.

If a row has only one column in it, for example, the column div is omitted.

I think, from the description of what you're trying to achieve, what you *really* want to do are provide empty regions of 15% on each side so that there is that buffer space so that the inner region(s) add up to 70% and are centered. Does that sound like it would achieve your goal?

I'm going to mark this fixed; if that doesn't achieve your goal, please mark this active and provide more information and I'll see if I can help.

zualas’s picture

zualas commented

Thanks for a valuable suggestion. I can probably manage with empty regions, but with this setup it is looks much harder to build semi-fluid pages (something like content at 70% of the screen, but min 600px and max 1200px).

If there is a way for you to fix this without much hassle that would be great, otherwise I'll try working with empty regions instead.

$page = new stdClass();
$page->disabled = FALSE; /* Edit this to true to make a default page disabled initially */
$page->api_version = 1;
$page->name = 'test';
$page->task = 'page';
$page->admin_title = 'test';
$page->admin_description = '';
$page->path = 'test';
$page->access = array();
$page->menu = array();
$page->arguments = array();
$page->conf = array(
'admin_paths' => FALSE,
);
$page->default_handlers = array();
$handler = new stdClass();
$handler->disabled = FALSE; /* Edit this to true to make a default handler disabled initially */
$handler->api_version = 1;
$handler->name = 'page_test_panel_context';
$handler->task = 'page';
$handler->subtask = 'test';
$handler->handler = 'panel_context';
$handler->weight = 0;
$handler->conf = array(
'title' => 'Panel',
'no_blocks' => 0,
'pipeline' => 'standard',
'body_classes_to_remove' => '',
'body_classes_to_add' => '',
'css_id' => '',
'css' => '',
'contexts' => array(),
'relationships' => array(),
);
$display = new panels_display();
$display->layout = 'flexible:2_col_flexible_template';
$display->layout_settings = array();
$display->panel_settings = array(
'style_settings' => array(
'default' => NULL,
'header' => NULL,
'header_sidebar' => NULL,
'ribbon' => NULL,
'ribbon_sidebar' => NULL,
'center' => NULL,
'center_sidebar' => NULL,
'footer' => NULL,
'footer_sidebar' => NULL,
),
);
$display->cache = array();
$display->title = '';
$display->content = array();
$display->panels = array();
$display->hide_title = PANELS_TITLE_FIXED;
$display->title_pane = '0';
$handler->conf['display'] = $display;
$page->default_handlers[$handler->name] = $handler;

zualas’s picture

zualas commented
Status: Fixed » Active
merlinofchaos’s picture

merlinofchaos commented

$display->layout = 'flexible:2_col_flexible_template'

You're using a reusable layout, so you will actually have to go to admin > structure > Panels > layouts and export the layout from there. Sorry about that, I wasn't sure which you were using and picked the wrong one.

What you ask to design is something I had never thought about in the layout designer -- I had never really thought about adding gaps.

For semi-fluid layouts, with min/max widths you would have to add that CSS yourself. It does not support that, but you can add additional CSS either in your theme or in a page you create with the layout.

I'm afraid you are reaching limitations the flexible layout builder wasn't designed to cope with and are having to work around them.

zualas’s picture

zualas commented

Alright, found that button at last, so please check my layout below. It's the same as on the picture in the previous post. Meanwhile I'll try to work around by adding empty regions and theming with CSS.

P.S. With my layout I would need custom CSS as well, but it would be fairly simple (margin:0 auto; max-width:1200px; min-width:600px) if these missing rows were present in the HTML.

Thanks for your support!

$layout = new stdClass();
$layout->disabled = FALSE; /* Edit this to true to make a default layout disabled initially */
$layout->api_version = 1;
$layout->name = '2c';
$layout->admin_title = '2-column flexible template';
$layout->admin_description = '';
$layout->category = '';
$layout->plugin = 'flexible';
$layout->settings = array(
'items' => array(
'canvas' => array(
'type' => 'row',
'contains' => 'column',
'children' => array(
0 => 'main',
),
'parent' => NULL,
'class' => '',
'column_class' => 'col',
'row_class' => 'row',
'region_class' => 'region',
'no_scale' => FALSE,
'fixed_width' => '',
'column_separation' => '',
'region_separation' => '',
'row_separation' => '',
),
'main' => array(
'type' => 'column',
'width' => 100,
'width_type' => '%',
'children' => array(
0 => 'main-row',
1 => 3,
2 => 6,
3 => 9,
),
'parent' => 'canvas',
),
'main-row' => array(
'type' => 'row',
'contains' => 'column',
'children' => array(
0 => 1,
),
'parent' => 'main',
'class' => 'header-row',
),
1 => array(
'type' => 'column',
'width' => 100,
'width_type' => '%',
'parent' => 'main-row',
'children' => array(
0 => 2,
),
'class' => '',
),
2 => array(
'type' => 'row',
'contains' => 'region',
'children' => array(
0 => 'header_sidebar',
1 => 'header',
),
'parent' => '1',
'class' => 'header',
),
'header' => array(
'type' => 'region',
'title' => 'Header',
'width' => '90.0160926476716',
'width_type' => '%',
'parent' => '2',
'class' => '',
),
'header_sidebar' => array(
'type' => 'region',
'title' => 'Header sidebar',
'width' => '9.983907352328401',
'width_type' => '%',
'parent' => '2',
'class' => '',
),
3 => array(
'type' => 'row',
'contains' => 'column',
'children' => array(
0 => 4,
),
'parent' => 'main',
'class' => 'ribbon-row',
),
4 => array(
'type' => 'column',
'width' => 100,
'width_type' => '%',
'parent' => '3',
'children' => array(
0 => 5,
),
'class' => '',
),
5 => array(
'type' => 'row',
'contains' => 'region',
'children' => array(
0 => 'ribbon_sidebar',
1 => 'ribbon',
),
'parent' => '4',
'class' => 'ribbon',
),
'ribbon' => array(
'type' => 'region',
'title' => 'Ribbon',
'width' => '90.0160926476716',
'width_type' => '%',
'parent' => '5',
'class' => '',
),
'ribbon_sidebar' => array(
'type' => 'region',
'title' => 'Ribbon sidebar',
'width' => '9.983907352328401',
'width_type' => '%',
'parent' => '5',
'class' => '',
),
6 => array(
'type' => 'row',
'contains' => 'column',
'children' => array(
0 => 7,
),
'parent' => 'main',
'class' => 'main-content-row',
),
7 => array(
'type' => 'column',
'width' => 100,
'width_type' => '%',
'parent' => '6',
'children' => array(
0 => 8,
),
'class' => '',
),
8 => array(
'type' => 'row',
'contains' => 'region',
'children' => array(
0 => 'center_sidebar',
1 => 'center',
),
'parent' => '7',
'class' => 'main-content',
),
'center' => array(
'type' => 'region',
'title' => 'Content',
'width' => '90.0160926476716',
'width_type' => '%',
'parent' => '8',
'class' => '',
),
'center_sidebar' => array(
'type' => 'region',
'title' => 'Content sidebar',
'width' => '9.983907352328401',
'width_type' => '%',
'parent' => '8',
'class' => '',
),
9 => array(
'type' => 'row',
'contains' => 'column',
'children' => array(
0 => 10,
),
'parent' => 'main',
'class' => 'footer-row',
),
10 => array(
'type' => 'column',
'width' => 100,
'width_type' => '%',
'parent' => '9',
'children' => array(
0 => 11,
),
'class' => '',
),
11 => array(
'type' => 'row',
'contains' => 'region',
'children' => array(
0 => 'footer_sidebar',
1 => 'footer',
),
'parent' => '10',
'class' => 'footer',
),
'footer' => array(
'type' => 'region',
'title' => 'Footer',
'width' => '90.0160926476716',
'width_type' => '%',
'parent' => '11',
'class' => '',
),
'footer_sidebar' => array(
'type' => 'region',
'title' => 'Footer sidebar',
'width' => '9.983907352328401',
'width_type' => '%',
'parent' => '11',
'class' => '',
),
),
);