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