应用场景:有时候客户需要对网站界面的颜色进行自定义修改,比如改变头部颜色、页脚颜色等等。幸运的是Drupal本身带有color模块,可以帮助你做这些事情。同时Drupal 7默认主题bartik也借用color来实现网站颜色的自定义,是个不错的案例。
准备工作:建立一个裸的bartik子主题:在sites/all/themes下面新建一个bartiksub文件夹,直接复制bartik的info文件,并改名为bartiksub.info,添加"base theme = bartik" 并删除info文件中声明的css规则。
第一种玩法:在主题设置中添加一个用来改变input框颜色的功能
适用场景:对主题小部分进行修改,不需要color模块即可实现
第一步,创建theme-settings.php文件并添加以下内容:
'textfield',
'#title' => t('Text input background color'),
'#default_value' => theme_get_setting('input_background_color'),
'#description' => t('Select a color to use text inputs/设置输入框颜色.'),
// 调整权重.
'#weight' => -2,
);
}
第二步:在.info文件中为它添加一个默认值:
settings[input_background_color] = yellow
第三步:在template.php文件中加入,并清除缓存
function bartiksub_preprocess_page(&$variables) {
$color = theme_get_setting('input_background_color');
drupal_add_css('input { background-color:' . $color . ';}', 'inline');
}
于是你会发现,页面上的搜索框变成了黄色。
第二种玩法:在主题设置中通过color模块来改变input框颜色,并且实现预览功能
适用场景:需要对网站多处进行修改颜色,如头部、页脚搜索框等。
首先做完文章开始的准备工作。然后将bartik主题中的color文件夹,复制到自己的主题中;同时将css文件夹中的colors.css文件复制到自己主题中的css文件夹下,形如css/color.css。
第二步,在.info文件中声明这个color.css文件:stylesheets[all][] = css/colors.css。
第三步,修改color.inc文件。该文件是理解color picker的关键之一。本文仅修改一处内容,建议读者将文件中的其他配置一一阅读一遍。
'fields' => array(
...
'inputbg' => t('Text input background'),
),
'schemes' => array(
'default' => array(
'title' => t('Blue Lagoon (default)'),
'colors' => array(
...
'inputbg' => '#666',
),
),
第四步,修改colors.css文件,添加:
input{
background: #666;
}
第五步,在preview.html文件中第20行添加 <div id="preview-input"><input type="text"/> </div>
第六步,在preview.css文件中加入:
/* 为预览中的输入框加上一点样式 */
#preview-input input {
padding:5px;
border:1px solid #ddd;
margin-bottom:1em;
}
第七步,在preview.js文件中加入:
$('#preview #preview-input input', form).css('background-color', $('#palette input[name="palette[inputbg]"]', form).val());
说明:以上两种玩法可以相互配合或者各自独立,按照具体情况来用。