你现在的位置:首页 > PHP网站建设知识库 > Drupal > 正文

Drupal7主题的个性化修改

Drupal 标准安装后,网站的架构已经基本可以满足多数人的需要,但是从外观设计上,却有些千篇一律。接下来就有了另外的一个问题,那就是,如何能够让自己的网站更有个性?虽然大家都可以到Drupal的网站上下载不同的主题风格,可毕竟那些都还是别人的设计,如果你想用自己的网站Logo, 自己的图形背景,又该怎么办呢?让我们看看Drupal 是如何控制网站的外观设计的。

前面讲过,Drupal系统主要由三大部分组成:Drupal 核心、Drupal 主题和Drupal模块。其中,系统核心的作用是提供Drupal中最基本的运行架构和通用功能。不同的可选模块,则主要提供针对特定用途的用户应用,完成诸如信息发布、客户关系管理、网站相册之类的特定功能。换名话说,无论是Drupal的核心,还是其它功能模块,主要的用途都是具体的功能实现。

网站的外观和风格,包括网页导航、图形背景、字体风格和色调、页面中的内容分块呈现方式等,主要通过Drupal的主题来控制。讲到这里,大家应该知道,要想让网站的外观有个性,主要的途径就是修改它的主题了。

要改变Drupal 7网站的主题,最直接的方式是使用从Drupal.org下载的现成安装包,解压缩到Drupal安装目录下的“sites/all/themes”目录中,然后到网站管理后台启用即可。试着修改网站的缺省主题,就可以看到网站外观的巨大变化。这就是Drupal扩展性设计所带来的巨大灵活性。Drupal 7目前还未正式发布,支持它的主题风格还不是很多,但作为测试目的,已经足够了。

接下来进入正题:即便你找到了自己喜欢的主题风格,也肯定不希望自己的网站使用该主题缺省自带的全部图像和设计风格,总有一些东西,需要修改成你个人的个性化内容。下面我们先学习一个最简单的途径,通过修改缺省主题的设置,快速修改Bartik主题的页首背景图片。

Drupal 中的每种主题,主要通过三种途径控制网站的外观,一是网页的模板,二是网页的层叠样式表文件(CSS文件),三是经常用于导航设计的javascript脚本。模板文件确定了要在网页中呈现哪些内容,以何种顺序来呈现。层叠样式表则确定了这些内容应该如何在一个网页范围内进行布局。Javascript决定了网页导航等动态元素如何对用户的鼠标移动、点击等行为作出响应。三种技术综合应用,可以设计出截然不同的网站主题。

Bartik 是Drupal 7安装时自带的主题,因此位于缺省安装目标下的themes目录中,缺省状态下,它的模板和CSS文件都位于这个目录下的各个子目录中,是原始的主题文件。根据Drupal的工作原理,一旦我们对该主题进行了个性化设置,就会在“sites/all/defualt/files/color/”目录下生成记录用户个性化定义的子目录,包含图片、CSS文件、Logo等。因此,我们对Bartik的个性化修改,就从这里入手。

在对Bartik主题进行个性化之前,必须先进入网站后台管理界面,点击Drupal 7工具栏上的网站外观(Appearence)按钮,确定Bartik 是否是当前缺省的主题。如果不是,可点出Bartik 主题下面的设置为缺省(Set Default)按钮,将其设置为缺省主题。

\

如果Bartik已经是缺省主题,就可以直接点击其下的设置按钮,对其进行个性化定制了。Bartik 主题包含几种不同的颜色集,缺省的是Blue Lagoon。我们可以任选其一,在此基础上,分别对页首顶部、页首底部和文本颜色等进行修改。然后再选择下面的不同选项,确定是否显示网站的Logo、名称、口号等内容。当然,作为个人网站,你肯定也不想使用Drupal的缺省Logo和快捷图标(favicon),这里只要去掉相应选项上的钩选标记,就可以上传自己的logo和快捷图标了。全部设置完成后,点击确认,保存设置即可。

\

打开Drupal主目标下的Sites/all/default/files/color/目录,就可以看到一个类似于 “bartik-08537859” 的子目录。在我的机器上,这个目录中包括两个文件:一个是colors.css, 一个是logo.png。这就是网站缺省的logo和CSS样式表文件。把你准备用作网页顶部背景的图片拷贝到这个目录下,然后用文本编辑器打开colors.css文件。我的背景图片文件名为bg.jpg。
 colors.css文件中有这么几行:
#header {
 background-color: #6ba7cc;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#20648d), to(#6ba7cc));
background-image: -moz-linear-gradient(-90deg, #20648d, #6ba7cc);
}
 在其中加上一行:
 background-image: url(bg.jpg);
最后就成为这样: 
#header {
background-color: #6ba7cc;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#20648d), to(#6ba7cc));
background-image: -moz-linear-gradient(-90deg, #20648d, #6ba7cc);
background-image: url(bg.jpg); 
}
保存并关闭colors.css文件。然后刷新浏览器,查看网站的主页。此时页面顶部的背景图像应该已经改变。 如果你对css比较熟悉,可以做进一步的个性化,这里不再赘述。

必须提醒的是,每次通过Bartik设置选项进行该主题的自定义,都会在sites/all/default/files/color下生成一个新的子目录。因此以前的设置和定义都会失效。这时可以重新复制你的图片文件到新目录,并对colors.css进行修改,以展现个性化设计。