drupal7创建自定义的panels布局

很简单,在主题的 *.info文件中添加一句代码:

  这一句很简单,但也很重要,没有这一句,就没在panels的配置界面去显示自定义的布局

plugins[panels][layouts] = layouts

然后再主题文件夹下建立一个layouts文件夹,然后把自己要建立的布局建立即可。

举个例子,我们建立一个名为Front的布局

文件目录结构如下:

1.文件front.inc

复制代码
$plugin = array(
  'title' => t('Front'),
  'category' => t('Columns: 2'),
  'icon' => 'front.png',
  'theme' => 'panels_front',
  'css' => 'front.css',
  'regions' => array(
    'top_left' => t('Top left'),
    'top_right' => t('Top right'),
    'left' => t('Left side'),
    'right' => t('Right side'),
  ),
);
复制代码

2.文件panels-front.tpl.php

复制代码
<div class="panel-front clearfix panel-display" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
  <?php if ($content['top_left']): ?>
    <div class="panel-col-top-left panel-panel">
      <div class="inside"><?php print $content['top_left']; ?></div>
    </div>
  <?php endif; ?>
  <?php if ($content['top_right']): ?>
    <div class="panel-col-top-right panel-panel">
      <div class="inside"><?php print $content['top_right']; ?></div>
    </div>
  <?php endif; ?>
  <div class="center-wrapper">
    <div class="panel-col-first panel-panel">
      <div class="inside"><?php print $content['left']; ?></div>
    </div>
    <div class="panel-col-last panel-panel">
      <div class="inside"><?php print $content['right']; ?></div>
    </div>
  </div>
</div>
复制代码

3.文件front.css

复制代码
.panel-front { 
/*  overflow: hidden;  */
  margin-top: 0;
  padding-top: 0;
}
.panel-front .panel-col-top-left{ 
  float: left;  
  width: 70%;
}
* html .panel-front .panel-col-top-left {
  width: 69.9%;
}
.panel-front .panel-col-top-left .inside {
  margin: 0 0em 0 em 0;
}
.panel-front .panel-col-top-right{ 
  float: left;  
  width: 29.9%;

}
.panel-front .panel-col-top-right .inside {
  margin: 0 0em 0em 0;
}
.panel-front .panel-col-first { 
  float: left; 
  width: 25%; 
}
* html .panel-front .panel-col-first {
  width: 24.9%;
}
.panel-front .panel-col-first .inside { 
  margin: 0 .5em 1em 0;
}
.panel-front .panel-col-last { 
  float: left; 
  width: 74.9%; 
}
.panel-front .panel-col-last .inside { 
  margin: 0 0 1em .5em;
}
.panel-front .panel-separator {
  margin: 0 0 1em 0;
}
.panel-front  .center-wrapper{
  clear:both;
}
复制代码

4.文件front.png

 

posted @   jiafeng  阅读(189)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示