Css定制Drupal主题风格


 Css定制Drupal主题风格

  “主题”是Drupal站点的基本外貌和感觉。有时一个特定的站点会安装不止一个的主题。如果站点管理员提供了多个主题,你可以为你的帐号选择你喜欢的默认主题。

  Drupal的官方站点提供了许多主题风格,具体见:

  http://drupal.org/project/Themes

  其中,Spreadfirefox是我最喜欢的主题风格,着名的 spreadfirefox.com 使用的就是这款主题。

  除Drupal的官方站点外,还有许多其他机构或个人提供Drupal的主题风格,通过Google可以搜索到这些风格。

  Drupal 主题风格安装

  Drupal 主题风格的安装非常简单:

  + 在 http://drupal.org/project/Themes 下载新的主题风格

  + 阅读主题风格包中的 README 和 INSTALL 文件,看该主题风格包的安装是否需要一些特殊的步骤

  + 检查一下主题风格需要的模板引擎是否已安装

  + 将主题风格上载到Drupal的themes目录中

  + 通过“管理-》主题”启用该主题风格,并将其设置为默认风格

  Drupal的主题定制非常灵活,可以定制每个区块定制的风格。如果懂PHP的话,几乎可以做出可以想得到风格来。实际上,在大多时候我们主要是通过图片+CSS来定制,这是一种最简单的定制,也不需要懂得太多的PHP知识。

  在themes目录下的每个主题目录中,有一个style.css文件。定制CSS的关键是搞清楚CSS元素控制的对象。但许多人搞不清楚CSS元素控制的对象,在这方面花了不少时间。其实只要选对工具,这实际上是非常容易做的。

  这个强大的工具就是Firefox。大多数人只知道Firefox是一个浏览器,实际上Firefox提供了大量网页开发的工具。例如:

  + 选定一部分网页内容,通过右键菜单的View Selection Source功能,可以查看选定部分网页的源码。这是一个杀手级的功能,再也不必为在庞大的HTML源码中找不到相应的目标内容而头痛了。

  + 菜单 Tools-》Page Info 可以看到非常详细的网页内容,包括表单、链接、多媒体等信息

  + 菜单 Tools-》DOM Inspector 可以对网页的HTML、JavaScript、CSS等内容进行很方便的分级浏览

  Firefox的功能太多,一时半刻说不完,我们还是回到CSS定制上面来。这需要用到一个Firefox的插件,插件名称是Web Developer,可以在Firefox的网站上下载到这个插件。

  安装好Web Developer插件后,就可以用其提供的功能来定位对象的CSS控制元素:

  + 插件的CSS菜单下有一个View Style Information功能非常好用,当你的鼠标电击到网页的某项内容,就能看到该项内容所使用的相关CSS内容。

  + 在Information菜单下有一个Display ID & Class Details功能,能在网页上显示所有的ID和Class信息。

  Web Developer插件是专门为网页开发人员提供的一把宝刀,功能太丰富了,你们就慢慢去体会吧。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3