drupal主题中 集成color模块实践
让我们以Garland为例.最重要的文件位于themes/garland/color子目录中:
base.png
它包含了主题的基本设计,它是合成的,并将被切分成多个图片.
color.inc
这个文件包含了用来对主题着色的所有参数.参看下面.
preview.css
这个样式表是用来在颜色修改器上生成预览的.
preview.png
这个图片是用来在颜色修改器上生成预览的.
color/color.inc的使用,使得颜色挑选器出现在主题的设置中.它是一个规范的PHP文件,其中包含一个$info数组,其值如下:
Schemes（方案）
<?php
array('schemes' => array(
'#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
'#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
'#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
'#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
'#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
'#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
'#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
'#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
'#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
'#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
'#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
'#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
'#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
'#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
'#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
));
?>
这个条目包含了一个简单的数组,里面为预定义的配色方案.每个条目必须有5个颜色,一个标题,其格式如上所示.
第一个方案是作为参考用的,必须与主题的默认图片和样式表紧密匹配.否则,最终的颜色可能就是不是用户想要的了.关于颜色是如何计算的,更多信息可参看'stylesheets'(“样式表”)一节.
要拷贝的图片
<?php
array('copy' => array(
'images/menu-collapsed.gif',
'images/menu-expanded.gif',
'images/menu-leaf.gif',
));
?>
这个数组包含了一列不能修改的图片.它们将和生成的图片和样式表放置在一起.
填充区和梯度
为了对图片着色,我们创建一个和基图片一样大小的目标图片,并且画出彩色区域和一个梯度.我们可以使用(x, y, width, height)声明区域的坐标,从而定义它们的位置,这样做非常灵活.
<?php
array('gradient' => array(0, 37, 760, 121));
?>
You can specify one vertical two-color gradient.
<?php
array('fill' => array(
'base' => array(0, 0, 760, 568),
'link' => array(107, 533, 41, 23),
));
?>
你可以为每个调色板颜色声明相应的区域.而在该区域中就会使用选择的颜色进行填充.可用颜色有'base'(基本), 'link'(链接), 'top'(顶部), 'bottom' (底部)和'text'(文本).
切图
接着,你要进行切图了,你需要在基图片上定义相应的区域.这里,你还需要使用(x, y, width, height)作为坐标,以及在样式表中所用到图片的名字. The logo and screenshot slices are special and always take the same filename.标志和截图(logo和screenshot)有些特殊，它们采用一贯的文件名。截图需要被重新调整大小，调整为150x90像素。
<?php
array('slices' => array(
'images/body.png' => array(0, 37, 1, 280),
'images/bg-bar.png' => array(202, 530, 76, 14),
'images/bg-bar-white.png' => array(202, 506, 76, 14),
'images/bg-tab.png' => array(107, 533, 41, 23),
'images/bg-navigation.png' => array(0, 0, 7, 37),
'images/bg-content-left.png' => array(40, 117, 50, 352),
'images/bg-content-right.png' => array(510, 117, 50, 352),
'images/bg-content.png' => array(299, 117, 7, 200),
'images/bg-navigation-item.png' => array(32, 37, 17, 12),
'images/bg-navigation-item-hover.png' => array(54, 37, 17, 12),
'images/gradient-inner.png' => array(646, 307, 112, 42),
'logo.png' => array(622, 51, 64, 73),
'screenshot.png' => array(0, 37, 400, 240),
));
?>
文件
最后，你需要为你的主题声明文件所在的位置。你需要为预览准备一个图片和样式表，还需要一个基图片。
<?php
array(
'preview_image' => 'color/preview.png',
'preview_css' => 'color/preview.css',
'base_image' => 'color/base.png',
);
?>
* 在Drupal6中，Color.module不再需要基图片了，这意味着不使用图片也可以使用该模块。
样式表
color.module将会读入一个主题的style.css文件，以及使用@import语句引入的其它样式，并创建一个新的style.css文件。它将使用一个调色板颜色作为参考，根据上下文，修改CSS中的颜色。
-
Links（链接）: 使用'link'颜色，根据规则它适用于一个元素。
-
Text（文本）: 使用'text'颜色，根据规则它适用于color: styles中。
-
Base（基本）: 'base'颜色，适用于其它所有地方。
然而，如果样式表中的一个颜色与参考颜色中的一个完全匹配的话，那么将会忽略上下文，而将会使用相匹配的那个颜色。
例如，假定你默认的参考颜色为深蓝色（dark blue），但是你把它修改为了红色（red）.你的默认样式表包含了浅蓝和灰紫色，都相对于这个参考颜色。
最终颜色(紫红色和棕色)与红色的差别，类似于原始颜色与蓝色的差别。用技术术语来说：色调，饱和度和亮度上的相对差别将被保存起来。
如果你发现color.module使用了错误的参考颜色，可以尝试将不同的部分放到独立的CSS规则中，每一个都使用自己的选择器{ ... }，这样就不会和上下文冲突了。
注意，如果你在修改颜色方案以后，编辑了你的样式表，你需要重新提交颜色方案，以重新生成颜色偏移后的版本。
如果希望样式表中的一些颜色不被修改，你需要在它们的CSS上面放置下面的标记：
/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/
你只能在你的style.css文件中使用这个标记。它在全局都适用，所以如果你在一个引入的样式表中使用它的话，@import语句下面的所有颜色都将被保留起来。
使颜色相匹配
生成的图片，与生成的样式表中的颜色一定要匹配，这一点非常重要。否则，边缘看起来就会异常丑陋。
为了能够匹配起来，基图片中的像素在区域中必须使用一个简单的颜色，因为在这里必须与CSS定义的颜色相匹配。因为我们不知道CSS定义的颜色出现在基图片中的哪个位置，我们可以使用一个全局复合颜色，它在整个设计中都是相同的。Garland使用了白色。注意，在Garland基图片中，的确包含了比如灰色和黑色像素，但是只有出现在图片使用它作为背景颜色的区域(例如，页首)。除了白色以外，黑色或者灰色也是很好的候选。
<?php
array('blend_target' => '#ffffff');
?>
刨根究底的人可以阅读一下color.module中的代码，特别是_color_shift()函数，这能帮助你理解这是如何实现的以及为什么这样。
PHPTemplate的修改
最终，你需要在你的主题中适用color.module的钩子。我们以一个PHPTemplate主题为例，但是这也适用其它的引擎。
在你主题的template.php文件中，添加下面的代码片断（Drupal 6.x）：
<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function phptemplate_preprocess_page(&$vars) {
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
}
?>
在Drupal 5.x中，你需要添加下面的代码：
<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
return $vars;
}
return array();
}
?>
这将允许模块覆写你主题的logo，样式表和截图。如果你要在_phptemplate_variables中作其它的修改，你需要将它们合并到这段代码中。