吾自寐言
众口难调，网站尤为如此。譬如常去的 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 很难保持同样的高度，虽然有各种各样的解决方式，但是都十分繁琐，还是依赖浏览器的改进比较省事儿。
另外，刚刚出炉的主题已经发现了一个 bug，我的 mission statement 不见了，呵呵，今天先到这里吧，回头慢慢的捉虫子。这个主题同时也制作了 Drupal 5.0 版本的，Drupal 5.0 的主题与 4.7 的主题略有不同，以后再详细说。
继续关于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部分的示例：
以及相关的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;}
<
p>
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编程的知识；所谓简明，从这一句起我不再说废话：）使用本教程之前，请准备三样东西：
Style.css是空白的，方便你填补。<script type="text/javascript">
</script>第一步，把空白的Foundation Theme的zip文件解压，放在一个名字叫做example的文件夹中（文件夹可以任意命名），然后上传到你的Drupal的Themes目录下，用安装了Web Developer插件的Firefox浏览器打开你的网站（最好是测试网站），在管理-〉主题中启用这个叫做example的主题，如果是你的正式网站，那么在你的个人账户中把主题设置为example，这样并不影响访客正常访问的你的网站。保存设置后你可以看到下图：
这个主题是不是苍白得可爱？现在开始动手美化它。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摆顺（见下图）：
其实如果不显示div的信息，这个主题已经初具雏形了。再往下只需要再稍微改动一下，一个新鲜的主题就出炉了。至于改动的一般经验（譬如一些常用的CSS设置，将在后面的进阶教程中讲到，但是如果你熟悉CSS，到这里已经足够用了）最后要注意改完 style.css 以后一定要保存下来，替换你上传到 /themes/example/ 路径下的style.css 文件。