跳转到主要内容

5.4 自定义主题设置2

应用场景:有时候客户需要对网站界面的颜色进行自定义修改,比如改变头部颜色、页脚颜色等等。幸运的是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文件并添加以下内容:

第二步:在.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的关键之一。本文仅修改一处内容,建议读者将文件中的其他配置一一阅读一遍。

第四步,修改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());

说明:以上两种玩法可以相互配合或者各自独立,按照具体情况来用。

5.4.png

5.42.png