Time8网络信息网

创建新的样式表，第一步是回答一个问题——这个主题的样式与父主题的样式差别究竟有多大？

我们的 Descartes 主题是基于 Bluemarine 主题的。但是元素样式有多少相似之处呢？我们采用同样的字体吗？同样的色彩吗？同样的补白、边界和边距吗？样式偏离父主题的程度决定了我们如何创建样式表。

现在我们大概看看我们的站点使用 Bluemarine 风格的样子：

插图 3-5

我们的新样式与这个有多少差别呢？

如果我们的新样式与 Bluemarine 样式有根本上的差别，那么我们应该编写一个新的 style.css 文件（或者从 Bluemarine 那里拷贝一份 style.css 开始大改特改）。

但是，我们要做的风格修改是微小的。我们将改变左边栏的观感，开启右边栏（默认它是关闭的），并修改一些色彩。

因为这些修改只要十几行 CSS 代码即可完成，我们采用一种不同的做法。我们不是从 Bluemarine 那里拷贝整个 style.css 文件，而是创建一个新的样式表覆写 Bluemarine 的某些设置。

目前，这些辅助的样式表还没有命名规范，因此我们用个一般般的名字：new.css。下面就是这个CSS文件的内容：

/*
 ** Styles to override the styles.css in
 ** bluemarine.css
 ** $Id$
 */
/*
 * Plain white right nav.
 */
#sidebar-right {
    border-left: 1px solid #ea940c;
    background-color: white;
}
/*
 * Add background image.
 */
#sidebar-left {
    background: url(leMonde_sidebar.png) no-repeat top left;
    border-right: 1px solid #ea940c;
}
/*
 * Set the background for the mission.
 */
#mission {
    background-color: #ea940c;
    padding: 5px 15px 5px 15px;
    text-align: center;
}

这里我们为 HTML 中的三个特定 ID 添加了风格：sidebar-right 指明右边栏；sidebar-left 指明左边栏；mission 指明包含站点使命("All philosophy is a footnote to Plato")的方框。

在 Bluemarine 主题中，右边栏的默认颜色是战舰灰。我们想让它成为带有橙色p(#ea940c)左边框的白色。

在左边栏，我们想要一种更绚丽的效果：一个背景图片(leMonde_sidebar.png)。要想成功使用这个图片，必须先把它拷贝到我们的模块目录。

提示：要保证你已经把必要的图片都拷贝到了主题目录。即使你使用的是父主题的图片，也最好把这些图片拷贝到派生主题的目录。

在我们的左边栏中，我们想用橙色边框把它与主要页面内容区分开。

提示：CSS 与 URL。主题的URL是相对于主题目录解析的。例如，CSS语句url(leMonde_sidebar.png) 将试图在这里寻找这个文件：drupal/sites/all/themes/descartes/leMonde.png.

最后，我们想修改使命语句的显示方式，减少补白（padding），改变背景颜色，并把文本与盒子中心对齐、而不是左对齐。

创建好 new.css 以后，我们还得再做一件事。我们得告诉 Drupal 除了使用父主题的 style.css 以外，还要使用我们的新 CSS。在 descartes.info 文件中加入下面两行就可以做到这一点：
 

stylesheets[all][] = style.css
stylesheets[all][] = new.css

p
这两行明确指示要装载 style.css 和 new.css 样式表。

这些方括号是做什么用的？方括号记号是 Drupal 6 引入的，它是为 .info 文件中的指令指定多个值的一种方法。它们的作用与 PHP 中的数组类似。

上面的每个样式表指令都有两组方括号：stylesheet[all][]。第一组 [all] 指示哪种 media type 的页面使用给定的样式表。

熟悉 CSS 的人认识术语 'media type'。它指的是样式表所应用的输出介质。一般的介质类型是屏幕（对于具有屏幕的设备来说）和打印机（对于打印的页面）。media type 应用于任何浏览器请求的介质类型。

使用介质类型，我们可以为打印机友好的页面指定特别的样式表：

stylesheets[print][] = printed.css

例如，Garland 主题就有打印机专用的 CSS 文件。

第二对方括号[]，作用类似于 PHP 中的数组赋值语法。就像 $my_array[] = 'foo' 把字符串 foo 放在数组的最后，指令 stylesheets[all][] = 'new.css' 把 new.css 放在样式表列表的最后。

清空模板缓存

当开发新模板时，也许需要清空模板缓存，才能使主题的最新修改显示出来。要做到这一点，可以使用 Devel 模块的“模块开发区块”中的 Empty cache 项目。参见第一章了解 Devel 模块的更多信息。

插图 3-6

在对主题的 .info 文件进行了这些修改以后，我们来看看自己的劳动成果吧。

因为我们的主题位于 drupal/sites/all/themes 目录，并且具有一个 .info 文件，Drupal 应该能自动找到它。我们所要做的只是导航到 Administer | Site building | Themes，启用主题，把它设置为默认主题以便测试。

也许你注意到了，我们的 Descartes 主题的截屏显示的却是 Bluemarine 主题。那是因为，我们还没有创建自己的截屏图片（放在主题目录中的screenshot.png）。因此，Drupal“继承”了父主题的截屏。

一旦启用了主题，我们就可以导航到主页查看它的效果了。

提示：不要把管理主题设置为正在开发或测试阶段的主题。那样做可能使你陷入倒霉的困境。主题文件中的错误，可能让你无法访问管理界面。Drupal 的后台管理只应该使用稳定的主题。

我们的新站点看起来应该如下面的截屏所示：

插图 3-7

尽管这个设计中的很多元素看起来与 Bluemarine 主题相同，我们的修改还是很明显的——左、右边栏都不相同，左边栏有背景图像，橙色更多了。

我们刚刚成功地创建了派生主题。只要几个文件就可以做到这一点——而且不需要 PHP 编程。最后看一下 Descartes 主题目录，里面只有我们的四个文件：

插图 3-8

logo.png 文件是从 Bluemarine 主题那里拷贝来的。对于这个主题，我们只创建了三个新文件。

但是，有时少量的 CSS 不足以获得我们需要的观感。有时，我们需要定制模板本身。该怎样做呢？