寱语 kzeng's blog

众口难调，网站尤为如此。譬如常去的 BBS，它的 textarea 没有任何的 CSS 修饰，就是 plain text，大大降低的灌水的乐趣，所以自己写了 style ，把默认值改为 1.8 倍行距，使用蓝色的 Calibri 字体等等，但是以前必须更改 firefox 的 UserContents.css 非常的麻烦，刚才无意间发现了一个不错的 Firefox 插件：Stylish，可以方便的管理自己写的 style，并且有一些便捷的 code 插入方式，譬如可以通过按钮插入 @-moz-document domain()  来选择 style 应用的 domain，省了不少的事情，可以随心所欲的更改自己常去的网站的设计，符合自己的习惯（另一个最不习惯的就是 Gmail 的在线输入，所以也改了行间距和字体，还有文字大小）。很不错的插件，推荐一下，这个插件的网站也有一些已经写好的 style，譬如 Gmail 的，不过不如自己写的舒服：）

这里罗列了最新的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，这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图：