drupal主题

玩转Drupal主题(2):在mission statement中添加PHP脚本

Cartson 做了几个 Drupal China 的 brochure,非常的漂亮,所以想循环的在 Drupal China 的首页逐一显示,通常这个可以通过 javascript 来实现,但是为了网站的整体考虑,打算用 PHP 来实现,所以就写了一段最简单的显示代码:

$img = array();
$img[] = '';
$img[] = '';
$max = count($img);
$count = rand(0,$max);
print $img[$count];
?>

但是却遇到了一个问题,Drupal 的 Mission Statement 中自动滤掉了PHP代码,导致无法正常显示,但是好在 Drupal 异常的灵活,可以很方便的解决这个问题。下面是一个简单的解决方案。嗯,其实就一句话:把mission statement的内容放在一个新创建的 mission.tpl.php 文件中,然后将 page.tpl.php 中的 print $mission 修改为 include 'mission.tpl.php' 即可。这样做其实也有一个好处,可以更方便的编辑 Mission Statement,因为它现在有一个单独的模板文件控制,而无需再在 管理->设置 中的文本框中书写 Mission Statement 。效果见Drupal China的首页。

不过发现了一个小问题:用 rand() 函数生成的 random display 效果其实并不是很好,可能是因为只有两个brochure的缘故,每个的显示几率都是 50% ,连续两次显示同一个brochure的几率是 25% 还是挺大的,如果brochure多一些,那么每次刷新页面得到的图片重复的几率就小了。

Blog分类: 

Drupal的外观主题设计(3):Foundation Theme - Header部分的摆放

header_css.gif继续关于Drupal主题设计的讨论,讲一讲Drupal的Header部分的三个元素(Logo, Site-Name 和Site-Slogan)的摆放。如果你对CSS不是很熟悉,希望这对你有所帮助;如果你是CSS的高手,希望你能提出改进的意见:)

通常,我们会需要Logo, Site-Name 和 Site-Slogan 按照左图的结构摆放:把Logo放在最左边,然后Site-Name与Site-Slogan并列。在过去,这个通常使用table来实现,只要定义一个类似形状的table,把元素放进去就可以了,但是根据现在网站设计的标准,我们需要使用CSS来控制完成。首先需要将Logo图片放在左边,这个可以通过以下CSS定义实现:

.logo { display:inline; float:left}

当然你还可以放入其他的定义,譬如logo图片的长宽定义,以及border属性等等。对于SITE-NAME与SITE-SLOGAN,按照如下定义即可:

.site-name {position: abosolute; top: 20px}
.site-slogan {position:absolute; top: 50px}


通过绝对位置来控制site-name与site-slogan的显示,top 定义的px的多少可以根据你的具体主题来调整,另外在使用中,你还需要用 font-size 来定义它们的字体的大小。这样就完成了,Header部分三个元素的设置,其实很简单的。

同时Foundation Theme也为我们提供了模板文件的构造,可以按照它方便更改其他的模版文件,譬如我在 http://www.dogbreedsweb.com 使用的模版,默认是不显示logo的,参照Foundation Theme,可以很方便的加入Logo显示的支持,只需要加入插入 $logo 的那段语法即可。下图是一个按照上述方法完成的Header部分的示例:

dogbreedsheader.jpg

以及相关的CSS定义:

.site-name {position:absolute;top:15px;padding-left: 15px;display:inline;font-size: 2em;}
.site-slogan {position:absolute;top:55px;padding-left:15px;display:inline;font-size:1.2em;}
.site-logo{margin:0;display:inline;float:left;}

Blog分类: 

Drupal的外观主题设计(2):Foundation Theme - Header部分

<

p>

OK,我们继续研究Drupal的Theme。各位同学手上都有Foundation Theme了,现在我们要解剖这个Theme:把它的CSS Class的脉络搞清楚,这对主题的设计非常有用处,所以我们从page.tpl.phpHeader部分开始,page.tpl.php主要由三个div组成,下面是 Header部分的结构图(见下图),"."表示是class 名称,"#" 表示是ID 名称,你可能注意到了这个神秘的$layout变量,它对于纯粹的div 主题设计非常有用处,它的用处我们会在随后的几讲中阐述。

点击观看大图

Blog分类: 

Drupal外观主题设计(1):超级简明教程

本教程突出两个特点:1)超级;2)简明。所谓超级,就是说你不需要任何关于PHP或是Drupal编程的知识;所谓简明,从这一句起我不再说废话:)使用本教程之前,请准备三样东西:

  1. 空白的Drupal主题,也就是Foundation Theme,可以在这里下载zip文件。这个主题定义了所有的CSS式样,但是它Style.css是空白的,方便你填补。
  2. Firefox 浏览器;

    <script type="text/javascript">

    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>

  3. Firefox的Web Developer插件

第一步,把空白的Foundation Theme的zip文件解压,放在一个名字叫做example的文件夹中(文件夹可以任意命名),然后上传到你的Drupal的Themes目录下,用安装了Web Developer插件的Firefox浏览器打开你的网站(最好是测试网站),在管理-〉主题中启用这个叫做example的主题,如果是你的正式网站,那么在你的个人账户中把主题设置为example,这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图:

theme_tutorial_1.jpg

这个主题是不是苍白得可爱?现在开始动手美化它。ctrl+shift+e 打开Web Developer的CSS编辑侧边栏,选择编辑 style.css 文件,现在你可以任意的添加CSS属性并立即看到效果。使用Web Developer 工具栏(这个工具栏默认是显示的,如果没有显示,在Firefox的工具栏上点击右键选择显示)中Information中的 Display Div Order,可以清楚的看到各个Div的class与摆放,现通过float属性把 Header, Container(包括sidebar与page,利用float属性调整), Footer三个主要div摆顺(见下图):

theme_tutorial_2.jpg

其实如果不显示div的信息,这个主题已经初具雏形了。再往下只需要再稍微改动一下,一个新鲜的主题就出炉了。至于改动的一般经验(譬如一些常用的CSS设置,将在后面的进阶教程中讲到,但是如果你熟悉CSS,到这里已经足够用了)最后要注意改完 style.css 以后一定要保存下来,替换你上传到 /themes/example/ 路径下的style.css 文件。

Blog分类: 

一个不错的主题设计辅助工具:Color Schemer Studio

studio_screen_main.png制作与调整Drupal的外观主题,比较麻烦的是色彩的选配。艺术家们可能一眼就可以看出来完美的色彩搭配,可是对于我们这些业余玩家来说,找到合适的配色是一个难题,通常的做法只能是在网上看到比较好的配色方案之后,赶紧掏出个小本子记录下来,或者用一些大型工具的附带功能(譬如Dreamweaver),但是都比较受限制,今天发现了一个比较有用的工具:Color Schemer Studio,它可以方便的帮助你配色,告诉你哪些颜色搭配比较好看,同时它还有很多有用的工具,譬如Color Scheme Analyzer,告诉你用某个特定的颜色做背景时应该选举哪些颜色做文字;譬如Quick Preview Windows,可以方便的察看某个配色方案在网页中的现实效果;譬如Screen Color Picker,方便你选取屏幕上的颜色,非常的精确。呵呵,是一个不错外观主题的帮制作手,推荐一下。

Blog分类: 

玩转Drupal主题(1):解放 $links

在Drupal的主题中,控制一系列meta data显示的变量是$links,所谓的meta data也就是每篇post上面或是下面的“» read more | kzeng's blog | add new comment | 3 reads”这一行数据,有的时候,我们会希望把这个$links中的数据分开显示,譬如把“read more”放在一个比较显眼的地方,但是由于PHPTemplate并没有帮我们分别命名这些变量,所以无法直接来任意摆放这些它们。下面就介绍一个解放这些变量的方法,让使用者可以灵活的在主题中放置这些变量。

第一种方法是一种不彻底的解放,利用preg_match把$links中的每个一个数据都加上class,然后通过class来控制显示与位置(譬如用display:none;来隐去不必要的部分,用position来控制显示位置等等,但是这并不是彻底的解决方案。

第二种是修改Drupal的核心文件或是PHPTemplate Engine,一般最好避开这种方式,不然等到升级Drupal的时候就会比较麻烦,特别是如果隔的时间久了,你忘记了曾经做过哪些改动,升级时会出现意外,譬如我在升级到4.7的时候因为忘记了自己曾经patch过数据库中几个数据表的primary index的设置,导致升级时出现失败,还要在手动更改过来,所以一般来说修改显示最好的办法是修改主题文件,这样可以为将来省去不少麻烦,并且PHPTemplate的灵活性也使我们可以方便的修改Drupal的显示。

下面要介绍的这种方式是受到Drupal Handbook中关于提取“read more”的方法的启发,并主要来源于Nick的相关讨论。其最核心的部分是利用PHP中的preg_match来分离各个显示变量。在你的主题文件夹下新建一个Template.php文件,如果已经有这个文件则只需将下面的函数加在原文件的结尾。

Template.php 中新定义个显示变量的函数如下:
function _phptemplate_variables($hook, $vars) {
switch ($hook) {
case "node":
foreach ($vars['node']->links as $link) {
/*准备分离$links*/
preg_match("/]*).*?>(.*?)<\/a>/i",$link, $matches);
/*用preg_match替换,注意更改上一行的那个全角的?,因为我的codefilter错误分行才把它改成全角的,应该是半角的*/
$textparts = explode(" ", $matches[2]);
$urlparts = explode("/", $matches[1]);
$linkurl = $matches[1];
$default_title = $matches[2];
/*分离定义新的变量*/
switch (true) {
case in_array("blog", $urlparts):
$linktitle = $vars['node']->name."'s Blog";
$bloglink =
''.$linktitle.'';
$feedlink =
'
.'" class="feedlink">RSS
';
$vars['bloglink'] = $bloglink ." | ".$feedlink;
break;
case in_array("forward", $urlparts):
$stylecodename = "emaillink";
$linktitle = "email page";
$vars['emaillink'] =
'
.$linkurl.'" class="'
.$stylecodename.'">'
.$linktitle.'
';
break;
case in_array("comment", $textparts):
case in_array("comments", $textparts):
$stylecodename = "commentlink";
$vars['commentlink'] =
'
.$linkurl.'" class="'
.$stylecodename.'">'
.$default_title.'
';
break;
case in_array("read", $textparts):
$stylecodename = "readmorelink";
$vars['readmorelink'] = ''.$default_title.'';
break;
case in_array("printer", $textparts):
$vars['printlink'] =
'Print Page';
break;
default:
$vars['otherlinks'] .= ''.$default_title.'';
}
}
}
break;
}
return $vars;
}
?>

这样你就有 $readmorelink, $commentlink, $printlink 等多个变量可以使用了,在node.tpl.php中只需

即可。

注意:我在没有汉化的Drupal中使用这种方式成功,在汉化过的Drupal中,preg_match可能找到是汉语的string(我猜测),或者应该加上t()吧,呵呵,有空再研究一下:)

Blog分类: 

春天的新主题:春田花花

my new drupal theme 呵呵,为了庆祝春回大地,比划着Zen Garden的一个设计,为Drupal设计了一款新的主题,我称之为:春田花花。这个可与《春田花花同学会》无关,"春田"是我们这个塞北苦寒之地的首府(单于庭?^_^),借指俺这里;"花花"当然指的是春天了。按照老家的二十四节气,春分早已经过了,依历史传统,文人骚客们可以开始准备写诗哭春天了(贺方回哭着说:几许伤春春复暮),但是因为俺这里乃是弦歌毡乡之地,春天来得很迟,前几天还下了一场大雪,这两天才看到浅草吐绿,所以还是初春时节。第一次尝试完全用

制作主题,完全没有使用table,据说这样会更加的搜索引擎友好化

(SEO也不见得是一件好事情,以前刚夸完Drupal的SEO好,不到一个星期的时间,"冷饮"事件发生,俺的blog首当其冲的遭殃,事后搜索了一下那几个关键字,我的这里的搜索结果不管是在Google,还是百度上都排名在前5左右,sigh,怪不得殃及到俺呢)。另外,页面的设置也作了新的处理。Blog的页面摆放,几乎是前边一律的三种之一:无边栏(譬如,WordPress的一些经典主题),一个边栏(大多数Blog的主题),两个边栏(原先是一左一右,现在流行两个右边栏)。每种摆放都各有优劣。无边栏比较好保证了blog entry本身的整体性,但是罗列的信息较少;有边栏则有时又会影响到首页与单个blog entry的设置(特别是在有图片的情况下)。所以我这儿就做了一个折中,想读独立的主题与相对独立的边栏。这阵子正在研究Drupal的几个Ajax的应用,希望在以后的改进中可以更灵活的设置边栏。

另外,在这个新的主题中使用一些Drupal 4.7才的新特色。总的来说,Drupal 4.6的主题可以完美的用于Drupal 4.7,因为所有的升级工作都在PHPTemplate那里改进了,而PHPTemplate同时保证了大多数页面变量的一贯性。自Drupal 4.7 起,PHPTemplate的设置变得更为灵活,可以更方便的符合使用者的各种需要。另外这个也是对我还没有写完的drupal主题制作手册的一个暂时的交待,因为这个主题正是手册中做了一半丢在那里的那个:)

Free Tags: 
Blog分类: 

Drupal的一款新主题与开源网页设计(OSWD)

<

p>


Antique Modern今天Drupal有一款挺漂亮的新主题发布:Mondern Antiquity。比较流行的一些blog的外观主题的元素这里都包括了,譬如有立体感的圆边角的主题轮廓,圆边角的导航菜单(主链接),高亮的hover属性等等。(呵呵,其实我这里的外观主题这些要素也基本齐全了)。看上去还是挺不错的,苦于找不到好的Drupal主题的bloggers可以装上试一下效果。另外,这款主题与最近的一系列主题有一个共同点就是都利用了开源网页设计(Open Source Web Design)提供的外观主题模板。网站的介绍上说:Open Source Web Design is a place to download free web designs and share yours with others. We help make the internet a prettier place. 目前已经收录了1570款不同的主题。其中的绝大部分都是GNU GPL许可的,也就是说任何的设计者都可以自由的使用以及更改这些主题以适合自己的需要,因此可以为Drupal, Wordpress等blog程序的主题设计做一个借鉴。过阵子我也从那里找几个好主题转换到Drupal中去,为Drupal尽份力:)

Technorati : , ,

Blog分类: 

移除了 仿BlueBeach 主题

呵呵,昨天仿照了 BlueBeach 的主题,并放在了DrupalChina.ORG上测试,因为先前我一直以为 BlueBeach 是GNU GPL许可的主题,所以就放心的模仿了,并写信给Steven要求确认,但是没有回音。今天看到了一则来自比利时的留言,意识到这个BlueBeach主题许可可能还是有问题,所以又写信给了Drupal的作者 Dries ,Dries倒是很快就回信了,确认了 BlueBeach 不是GNU GPL许可的外观主题,所以已经在 DrupalChina.ORG 撤掉了这个主题,呵呵,看来需要自己全新做一个主题了,同时这也是一个很好的学习的机会,如果你对Drupal的主题设计感兴趣,一起到DrupalChina.org讨论这个问题吧:)

Blog分类: 

仿照 Drupal.ORG 为 DrupalChina 制作了外观主题

drupalchina

呵呵,晚上有些空闲,就给DrupalChina改了外观主题(上图是我的测试站点截取的),这样看起来更有些Drupal的味道了。这款名为BlueBeach的主题是Drupal的四位掌门人之一(原先两位掌门人之一)的Steven做的;我先写信给他问能否在中文Drupal社区使用这个主题,但是他没有答复,所以我就先作了一个,从外观上看大致做到了98%的模仿,不仔细看是看不出区别的。Steven的美工非常的好,如果还没有看过他的这个Drupal的象棋主题,不妨去看看,做得异常精美。所以在研究他的设计的时候也学到了不少东西。

drupal.org使用的是PHPTemplate,所以无法看到它的模板文件,也无从得知它的外观主题是如何书写的,唯一的参照就只有CSS式样表了。原汁原味的BlueBeach主题完全使用 div 来控制的,我原来也想完全用 div,虽然做到了Firefox下显示正常,但是在IE下边栏飘逸到正文的下面去了。所以我只好彻底改了结构,重新使用 table,虽然比较土:(,但是确保了跨浏览器的显示正常。

Steven原来的设计非常精准,很多想法值得学习,譬如在做三栏显示的时候,他通过 switch 函数来控制页面的布置;还有全部的CSS都是比较一致的用 em 来定义字体,呵呵,学到了很多东西。另外也发现了 drupal 外观主体的无比灵活之处,简直可以为所欲为的定义页面的显示,并且可以方便的在外观主题文件中加入 PHP 语法,细腻的定义不同条件下的显示,非常的方便,大大的赞一下:)。

Blog分类: