寱语

这两天又折腾了一下 drupal 主题。N. Design Studio 有一款很不错的 wordpress 主题 koi，abthemes把它移植到了 drupal上，用了几天，找到了一些 bug，陆陆续续修正了，然后又做了一些我需要的更改，总算稳定下来。又安装了一些新的模块，譬如 Tagadelic，可以提供一个 tag 云 block （右下角）和一个tag 云的页面，这样blog里用的 tag 马上就多了一个维度出来，可以直观的看到各个话题所占的比重，譬如和历史相关的话题中，原来我这里关于三国，秦国，汉朝和清朝的 blog 数目最多，在数量上差不多和生活相关的话题里的酒与旅行一样多了。这倒正是一句古话：“一壶浊酒喜相逢。古今多少事，都付笑谈中。”

因为使用 Tagadelic block 的缘故，非常需要一款比较窄的字体，blog 的默认字体 Georgia 太宽大，使得 tag 云看起来很别扭，但是HTML普遍支持的字体中并没有窄字体，开始的时候想到了 Drupal 的Dynamic Rendering 模块（前阵子用它来生成 blog 标题所用的“华康丽黑”字体），它的原理是利用服务器端的字体生成 Flash 来替换原有的字体，但是这种方法的效率不高，也会拖慢网站的速度，正巧想起了 Google 前阵子推出的 Font API，试了一下，不仅效果很好，速度也很快。

晚饭啃“赛百味”的时候，看到了一些矢量水墨国画，在 photoshop 里拼摆了一下，想创建一个新的 Drupal 主题风格，其实除了三只鸟以外，似乎也就是单纯的文本文字，这样也好，很清爽。 Read more »

春天的周末，抽空重新作了一个 Drupal 的主题。很久没有亲自操刀了，图省事，用了不少官方网站直接提供的主题，但是实际上，也没有省多少事情，因为每一款主题安装后都要不断地修正。比如为英文网站设计的主题在显示中文的时候普遍文字过小，12px 的字体看上去很吃力，所以必须调整，还有各个组件的摆放，自己订制的 block 的显示等等。所以又重新装了 Adobe Master Suite CS4，自己动手。

设计非我所长，所以主要是参照了一款 Wordpress 的主题：Marine。有些不错的地方，很喜欢这个颜色的搭配，春天了；也有些我不需要的地方，所以还是按照习惯，在 Firework 里画了草图：

图画完，做起来就快了，base theme 用的是 zen，这是一款空白的 theme，只需要按照设计图写入 CSS 即可，不过因为主题的需要，我还是改动了 page.tpl.php 和 node.tpl.php，主要是圆边角的显示，为了以后更改的方便，所以没有采用一张背景图片的方法，而是使用了三个 div 拼接；也写了一小点儿的 PHP  code，因为我需要用到标题上那样的日期显示，Drupal 默认的日期是不行了，所以重新用 date() 函数format了 $created 变量。

这里罗列了最新的53不可或缺的 CSS 技术。其中包括如何用 CSS 生成图片的阴影，生成圆边角；如何用 CSS 制作调色器（就像 Drupal 5.0 Garland一样），还有如何利用 CSS 制作缩略图，如果生成个性化的 radio 和 checkbox 等等，非常的使用。如果你打算自己设计 blog 的主题，这是一份难得的资料。

重新设计了 blog 的外观主题，除了新年新气象，辞旧迎新以外，主要是为了让 blog 使用的主题更加像一个 blog 的主题，上一个“春田花花”主题是 port Zen Garden 的 Lonely Flower 的，Zen Garden 类似于 CSS 设计的概念网站，虽然很多主题很漂亮，但是并不是为 blog 专门设计的，所以分离式的主体与边栏看起来有些怪异。而这款新的主题（还没有想好叫什么名字）则是按照 blog 主题的“窠臼”：窄幅，一个边栏，圆边角，阴影投射。。。该有的都有了。

保留了原来“春天花花”的主色调，绿色和橙色，这两种颜色看起来比较喜庆（土！），同时该了一下灰色的色调，看起来不至于太费眼睛。另外，融入了一些中国的元素，譬如梅花，莲藕与竹叶。呵呵，毕竟不是搞设计的，所以只能凑合着看自娱自乐了。另外，恢复了 site name 的链接，不再使用图片，这样以来这个主题就可以很容易的供别人使用了。一点小感叹：IE 终于支持 min-height 了。没有 min-height 的支持，基于 div 的 column 很难保持同样的高度，虽然有各种各样的解决方式，但是都十分繁琐，还是依赖浏览器的改进比较省事儿。

继续关于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定义实现：

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

本教程突出两个特点：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，这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图：