Creating your own layout in your theme

In our case we wanted something a bit unusual. 2 main columns and then within the first a brick effect. Like this:-

We could do it by creating a 'mini-panel' for the text and blog list in the middle, but we chose the other way. Creating our own.

Panels allows you to easily create your own layouts inside your theme. In order to do this, it's best to copy an example over from the Panels code. Here's what is needed:-

Step by step, this is what we did

We went to layouts and copied the twocol layout folder to our theme

We then renamed all of the files to twocol-left-twocol (or whatever name you want), and we changed the image file to reflect our layout. That image file is shown in the layout dialogs in Panels.

The *.inc file is used to define this layout. You simply need to put in your relevant values:-

<?php

// Plugin definition

$plugin = array(

'title' => t('Two column with first column two column'),

'category' => t('Columns: 2'),

'icon' => 'twocol-left-twocol.png',

'theme' => 'twocol-left-twocol',

'css' => 'twocol-left-twocol.css',

'panels' => array(

'left-top' => t('Left side top'),

'left-middle-left' => t('Left side middle left'),

'left-middle-right' => t('Left side middle right'),

'left-bottom' => t('Left side bottom'),

'right' => t('Right side')

),

);

The $plugin definition (I think) is standard of Chaos Tools and allows you to define the necessary information for this layout. It's just a simple PHP array. You can change the title, icon, theme and css to reflect your layout and layout files.

The 'panels' array defines each of the regions/areas within the panel. Here we added left-top, left-middle-left, left-middle-right and left-bottom. These become variables (inside $content) used in your *.tpl.php file which is shown next.

We then edit the layout file which is the twocol-left-twocol.tpl.php file. It looks like this:-

<div class="panel-display panel-2col clear-block" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>

<div class="panel-panel panel-col-first">

<div class="inside">

<div class="panel-first-col-top"><?php print $content['left-top']; ?></div>

<div class="panel-first-col-middle">

<div class="left"><?php print $content['left-middle-left']; ?></div>

<div class="right"><?php print $content['left-middle-right']; ?></div>

</div>

<div class="panel-first-col-bottom"><?php print $content['left-bottom']; ?></div>

</div>

</div>

<div class="panel-panel panel-col-last">

<div class="inside"><?php print $content['right']; ?></div>

</div>

</div>

This is just the HTML layout of the panel. You can see the variables for left-top, left-middle-left etc. coming in as values inside $content (e.g. $content['left-top']). So using HTML floating DIVs you can create a layout of your choosing with the content coming from the panels.

To help you along this is what it looks like visually (with the CSS classes shown in the DIVs above)

Once you're done, update your MY_THEME.info file to tell panels where to find the layouts

Flush your cache, and you'll see your template right there inside 'layouts' (inside the panel variant tabs as described above):-

You can select it and click continue. Panels will take all your current content (which was in Two column) and ask you where you want it in your new layout:-

You can always go into Content afterwards and move it around – dragging and dropping from any content area to any other content area.