Added a customized theme to Panelizer in Drupal 7

  1. Put in your module file MODULE_NAME.module
/**
 * Implements hook_ctools_plugin_directory().
 */
function MODULE_NAME_ctools_plugin_directory($module, $plugin) {
  return 'plugins/' . $plugin;
}
  1. Create a folder plugins/layouts inside your module folder MODULE_NAME

  2. Inside plugins/layout create your customized layout, for example twocol21

Create the following files inside the folder twocol21

panels-twocol21.tpl.php

<?php
/**
 * @file
 * Template for a 2 column panel layout.
 *
 * This template provides a two column panel display layout, with
 * each column roughly equal in width.
 *
 * Variables:
 * - $id: An optional CSS id to use for the layout.
 * - $content: An array of content, each item in the array is keyed to one
 *   panel of the layout. This layout supports the following sections:
 *   - $content['left']: Content in the left column.
 *   - $content['right']: Content in the right column.
 */
?>
<div class="panel-display panel-2col clearfix" <?php if (!empty($css_id)) {print "id=\"$css_id\"";} ?>>
  <div class="panel-panel two-thirds">
    <div class="inside"><?php print $content['left']; ?></div>
  </div>

  <div class="panel-panel one-third column-last">
    <div class="inside"><?php print $content['right']; ?></div>
  </div>
</div>

````

***twocol21.css***

.panel-2col { /* overflow: hidden; */ }

.panel-2col .panel-col-first { float: left; width: 50%; } * html .panel-2col .panel-col-first { width: 49.9%; }

.panel-2col .panel-col-first .inside { margin: 0 .5em 1em 0; }

.panel-2col .panel-col-last { float: left; width: 50%; } * html .panel-2col .panel-col-last { width: 49.9%; }

.panel-2col .panel-col-last .inside { margin: 0 0 1em .5em; }

panels-edit-display .panel-pane,

panels-edit-display .helperclass {

margin: .5em; }

.panel-2col .panel-separator { margin: 0 0 1em 0; }


***twocol21.inc***

<?php

/** * @file * Plugin definition. */ $plugin = array( 'title' => t('Two column 21 (Susy-based)'), 'category' => t('Columns: 2'), 'icon' => 'twocol21.png', 'theme' => 'panels_twocol21', 'css' => 'twocol21.css', 'regions' => array( 'left' => t('Left side'), 'right' => t('Right side'), ), );

``` twocol21.png

This is just an image showing two columns

Note

The classes one-third and two-thirds (panels-twocol21.tpl.php) come from the Susy framework but you can use your own (Bootstrap for example)

Etiquetas