zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    快速幂精讲+代码实现
    基数排序
    Java学习-常见排序算法
    C++中不清楚的函数用法汇总
    C++中的堆及常见题目汇总
    django+nginx+uwsgi+vue部署服务器
    nginx+WSGI+uwisgi+uWISI详解及nginx/uwisgi/django交互流程
    C++中的哈希表及常见题目汇总
    C++中的二叉树及相关题目汇总
    C++中的队列及常见题目汇总
  • 原文地址:https://www.cnblogs.com/zjfblog/p/9560728.html
Copyright © 2011-2022 走看看