Ability to nest a panel inside a column in a new panel

Hi, I had the same issue, and I found a trick to solve this using panels:

1.- I created a 3-column panel, this would be the front page.

2.- I created a 2-column panel, this would be the embedded panel. When you save this panel be sure to get the panel-ID ($did), you can get this id on the URL path by editing the panel. You can also get this ID by accessing de panels table on your drupal database (I can't remember the panels table's name right now, I think it was called panels-info or so, anyway it's easy to find)

3.- Add some content on your new 2-column panel using views or whatever you want.

4.- Next, create a new block. Write the following php code on body block:

<?php panels_panels_page([panel id from new 2-column panel we created on step 2]) ?>

Note that panels_panels_page is included on panels.module file.

4.- Edit the 3-columns panel and then insert the block you created on step 4 inside your preferred column.

5.- Save the block and check the output. That worked for me ;)

Hope this help.

Hi noborders, I forgot to write the "print" sentence on code, sorry!!! :p

About your problem in your top column... Maybe there is some panel css class which is limiting the width of columns.

For example:
If you are using the 2 column panel layout, you can see the following class on /drupal/modules/panels/layouts/twocol.css file:

.panel-2col .panel-col-first { 
  float: left; 
  width: 50%; 
}
.panel-2col .panel-col-last { 
  float: left; 
  width: 50%; 
}

Try to remove the "width" attribute from these classes.

If the solution above doesn't work, perhaps another parent css class need to be fixed.

I tried the same but I'm not having that problem with 3 colums stacked layout. Perhaps the problem is on the template styles defined for node content on styles.css file of your drupal theme. Maybe one of them have some "width:" attribute defined. I'll keep investigating.

I'm using a very customized bluemarine theme. But I tried to use a 3 colums stacked layout (threecol_33_34_33_stacked) and a 2 columns layout with the original bluemarine theme and finally I got it!!. Just add the following classes to styles.css file:

.panel-3col-33-stacked .panel-col-top .panel-2col .panel-col-last, .panel-3col-33-stacked .panel-col-top .panel-2col .panel-col-first{
	float: left;
	width: 50%;
}

This is working for me right now using the original bluemarine theme.

Ok, the main problem here is about style names on 2 cols and 3 cols layouts, they share the same css class name (panel-col-first and panel-col-last). I'm not an expert on CSS and I don't know how to solve this without a drastic solution, let's try this:

1.- Open the file "twocol.inc", it contains the following function:

function theme_panels_twocol($id, $content) {
  if ($id) {
    $idstr = " id='$id'";
  }

  $output = <<<EOT
<div class="panel-2col" $idstr>
  <div class="panel-col-first">
    <div>$content[left]</div>
  </div>

  <div class="panel-col-last">
    <div>$content[right]</div>
  </div>
</div>
<br class="panel-clearer" />
EOT;
  return $output;
}

2.- Change the css class name for <div class="panel-col-first"> and <div class="panel-col-last">.

3.- Open "twocol.css" file and modify the corresponding css class names as you did on step 2.

4.- IT SHOULD WORK NOW!!! ;)

This is not an "elegant" solution, but is quick.

You almost have it. I had the same problem with truncated columns too. I found which css classes was used for node content and I found they had some "margin" and "padding" attributes which I removed because that pixels was truncating the columns. Try to modify ".node" and ".content" css classes to remove margin and padding attributes.

To locate this kind of problems I use Firefox Web Developer Toolbar (https://addons.mozilla.org/es-ES/firefox/downloads/file/237/web_develope...). It has a tool to highlight page elements and can show you their associated css classes with their attributes. It will help you a lot.

All views I use inside panels provides blocks instead pages but I don't know if this is important for this issue.

Take a look to my test web server. I'm developing a front page with same layout as you want to get. I hope you find it useful.

You almost have it. I had the same problem with truncated columns too. I found which css classes was used for node content and I found they had some "margin" and "padding" attributes which I removed because that pixels was truncating the columns. Try to modify ".node" and ".content" css classes to remove margin and padding attributes.

To locate this kind of problems I use Firefox Web Developer Toolbar (https://addons.mozilla.org/es-ES/firefox/downloads/file/237/web_develope...). It has a tool to highlight page elements and can show you their associated css classes with their attributes. It will help you a lot.

All views I use inside panels provides blocks instead pages but I don't know if this is important for this issue.

Take a look to my test web server. I'm developing a front page with same layout as you want to get. I hope you find it useful.

http://www.javier-pulido.com/drupal/portada_3columnas

With the flexible layout, none of this self-embedding stuff should be necessary.

I know it's been awhile, but now that you have four columns, how do you make those four columns even in width. What I got after this is two columns at the left that are half the size of the two columns at the right.

you can add a new mini panel(with 2 columns) as a block, and embed it into the column as you wanted.

Can somebody share a set of instructions on how to embed a 2 column mini panel inside a 3 column panel page to accomplish a 4 column homepage like a newspaper homepage? (Drupal 6)

I think the flexible layout is already doing this. From Canvas you can add as many columns as you want. Cool! I will see if I can add views or blocks into these columns.