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:;
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布局的更多相关文章
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- Android创建自定义dialog方法详解-样式去掉阴影效果
在自定义组件时,从已有组件源码中会很大收获.就拿progressDialog来说 间接父类是dialog,想了解dialog继承结构可以去百度,或者 从构造器来说ProgressDial ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
- 自定义 Collection View 布局
自定义 Collection View 布局 answer-huang 29 Mar 2014 分享文章 UICollectionView 在 iOS6 中第一次被引入,也是 UIKit 视图类中的一 ...
- iOS系列译文:自定义Collection View布局
原文出处: Ole Begemann 译文出处: 黄爱武(@answer-huang).欢迎加入技术翻译小组. UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一 ...
- Customize the View Items Layout 自定义视图项目布局
In this lesson, you will learn how to customize the default editor layout in a Detail View. For this ...
- C++ GUI Qt4编程-创建自定义窗口部件
C++ GUI Qt4编程-创建自定义窗口部件 Qtqt4 通过Qt窗口部件进行子类化或者直接对QWidget进行子类化,就可以创建自定义窗口部件,下面示范两种方式,并且也会说明如何把自定义窗口部 ...
- 自定义Collection View布局
转自answer-huang的博客 原文出自:Custom Collection View Layouts UICollectionView在iOS6中第一次被介绍,也是UIKit视图类中的一颗 ...
- 【WPF学习】第六十七章 创建自定义面板
前面两个章节分别介绍了两个自定义控件:自定义的ColorPicker和FlipPanel控件.接下来介绍派生自定义面板以及构建自定义绘图控件. 创建自定义面板是一种特殊但较常见的自定义控件开发子集.前 ...
随机推荐
- (转)关于python3中staticmethod(静态方法)classmethod(类方法)实例方法的联系和区别
原文:http://dmcoders.com/2017/08/30/pythonclass/ https://zhuanlan.zhihu.com/p/28010894------正确理解Python ...
- ERR only (P)SUBSCRIBE / (P)UNSUBSCRIBE / PING / QUIT allowed in this context
封装Redis发布订阅时,SUB时,又想探测具体Channel的状态,于是执行PUBSUB CHNNALES命令,报 ERR only (P)SUBSCRIBE / (P)UNSUBSCRIBE / ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- 对 Phantomjs / CasperJS 进行远程调试
CasperJS运行在PhantomJS之上,其实也是启用PhantomJS的远程调试功能 PhantomJS 是一个无图形界面的浏览器,它支持各种Web标准:DOM处理,CSS选择器,JSON,Ca ...
- 使用Java客户端对Redis进行操作
一.背景 上篇文章我们介绍了如何在centos7下面进行安装单机版redis以及redis集群.这篇文章,我们来聊一聊如何使用java客户端来进行操作redis.我们知道redis的java客户端有很 ...
- 使用node和express+mongodb实现数据增删改功能
2018即将过去,2019即将来临,前端技术不断在在更新,学的东西越来越多.我们只有不断的学习,才不能被淘汰.在前后端分离的一个时代,后端提供接口,前端调用接口,逻辑判断,每个都是独立的工作.如果自己 ...
- Linux MBR扇区误删恢复
目录 1. 引导记录误删恢复 1.1 备份引导记录 1.2 误删引导记录 1.3 恢复引导记录 2. 分区表误删恢复 2.1 备份分区表 2.2 误删分区表 2.3 恢复分区表 如果MBR分区表没了, ...
- Chapter 3 Phenomenon——19
His unfriendliness intimidated me. 他的不友好恐吓到了我. My words came out with less severity than I'd intende ...
- php 通过 strtr 方法来替换文本中指定的内容
通过在文本中指定待替换的内容,如: [{name}] [{age}] 格式可以自己定义, 大概过程: 在文本中定义需要替换的文本内容: 以键值对的方式 组织数据(数组): 用 file_get_con ...
- 深入出不来nodejs源码-V8引擎初探
原本打算是把node源码看得差不多了再去深入V8的,但是这两者基本上没办法分开讲. 与express是基于node的封装不同,node是基于V8的一个应用,源码内容已经渗透到V8层面,因此这章简述一下 ...