很简单,在主题的 *.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:;
padding-top:;
}
.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

drupal7创建自定义的panels布局的更多相关文章

  1. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  2. Android创建自定义dialog方法详解-样式去掉阴影效果

    在自定义组件时,从已有组件源码中会很大收获.就拿progressDialog来说     间接父类是dialog,想了解dialog继承结构可以去百度,或者    从构造器来说ProgressDial ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  4. 自定义 Collection View 布局

    自定义 Collection View 布局 answer-huang 29 Mar 2014 分享文章 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一 ...

  5. iOS系列译文:自定义Collection View布局

    原文出处: Ole Begemann   译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...

  6. Customize the View Items Layout 自定义视图项目布局

    In this lesson, you will learn how to customize the default editor layout in a Detail View. For this ...

  7. C++ GUI Qt4编程-创建自定义窗口部件

    C++ GUI Qt4编程-创建自定义窗口部件   Qtqt4 通过Qt窗口部件进行子类化或者直接对QWidget进行子类化,就可以创建自定义窗口部件,下面示范两种方式,并且也会说明如何把自定义窗口部 ...

  8. 自定义Collection View布局

    转自answer-huang的博客 原文出自:Custom Collection View Layouts    UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...

  9. 【WPF学习】第六十七章 创建自定义面板

    前面两个章节分别介绍了两个自定义控件:自定义的ColorPicker和FlipPanel控件.接下来介绍派生自定义面板以及构建自定义绘图控件. 创建自定义面板是一种特殊但较常见的自定义控件开发子集.前 ...

随机推荐

  1. iOS---代理、协议、通知 详解

    一.代理 1.代理的介绍 代理是一种通用的设计模式 代理使用方式:A 让 B 做件事,空口无凭,签个协议. 所以代理有三部分组成: 委托方: 定义协议 协议   : 用来规定代理方可以做什么,必须做什 ...

  2. Odoo 学习地址

    Odoo官文文档: https://www.odoo.com/zh_cn/page/docs http://www.odoo.com/documentation/8.0/ Odoo中文文档推荐: ht ...

  3. 浏览器内核、渲染引擎、JS引擎简介

    一.定义 浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核 就倾向于 单指 渲染引擎.  渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具.(说白了,就是按照 ...

  4. CDH 版本子节点启动问题

    今天下午整整为了启动一个节点瞎忙活一下午,惨痛的教训还是记录下来吧,毕竟付出了代价.事情原委,一个同事在一台机器上占用了大量内存训练CTR点击率模型,而这台机器上部署了分布式Hadoop的一个data ...

  5. JavaScript事件模型

    1.什么是事件? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为 ...

  6. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  7. MyCat配置文件详解--server.xml

    server.xml包含mycat的系统配置信息,它有两个标签,分别是user和system,掌握system标签的各项配置属性是mycat调优的关键. <?xml version=" ...

  8. Linux-(watch,at,crontab)

    watch命令 1.命令格式: watch  [参数]  [命令] 2.命令功能: 可以将命令的输出结果输出到标准输出设备,多用于周期性执行命令/定时执行命令. watch可以帮你监测一个命令的运行结 ...

  9. switch-case最容易忽视的一点

    switch语句是常用的一种java语法,但是往往最基本的,总是最容易被人们忽略. 首先,看下switch语句的基本结构: switch(表达式){ case 常量1: 语句1; break; cas ...

  10. 偏流角为什么是arcsin(w/V)

    偏流角为什么是arcsin(w/V) 2015-10-22 风螺旋线   回答这个问题要从速度三角形说起(需要了解一点三角函数,但很基础,不用担心). 传统的速度三角形如下图所示: (背一段书) DA ...