解决drupal主题中的问题

在你构建网站的所有努力中，对于你的用户来说，最重要的就是站点的外观了。为了使你的drupal主题对于每个浏览器，每个模块，用户所选的主题都兼容的话，你需要花费很大的功夫。

首先你需要熟悉基本的CSS概念（Cascading Style Sheets）。关于Css的资源可参看CSS Discuss 或者HTML dog 。在CSS Zen Garden有一篇非常好的概述文章，介绍了Css的强大。

 

一定要通过XHTML 1.0 Strict验证。

 

现在有很多品牌的浏览器，而每个品牌的浏览器又有多个版本，而每种浏览器都有特定厂商维护的，所以你很难掌握一个浏览器在特殊的情况下会干些什么。这就带来了不兼容问题。如果你把注意力放到了这些不兼容性上，就会把问题复杂化，也使得你很难获得他人的帮助。只有当你使用通过验证的XHTML和CSS，并且它在符合标准的浏览器上能够正常工作的情况下，你才可以开始调试。人们经常听到设计者抱怨“但是但是但是，如果我让它通过合法性验证以后，那么外观就会再次变得丑陋起来，我不想再干第2遍这样枯燥无味的工作了”。在这种情况下，设计者得到的漂亮的外观，是建立在错误（bug）之上的！而在错误之上再进行调试，是理应被禁止的。

而事实上：一个经过验证、干净的布局在90%的情况下都能正常工作。在剩下的10%中，9%的问题很容易就得到了修复，而只有1%的情况需要更多的努力。真的！

 

如果你想验证你的整个站点，你可以使用这些工具。

 

你的页面不可能在所有的地方看起来都一样

 

另一个需要重点注意的地方是，HTML和CSS的本质。它们意味着在不同的地方有着不同的外观。比如，我的移动手机不能为你显示基于javascript的6栏布局。而且它也不应该能够。Safari 和Konqueror决定不支持表单中的特定样式（出于安全性和桌面兼容性考虑）。大的屏幕将对你的字体重新调整大小，这将破坏你的固定布局。而旧式的显示器则使用的是更大一些的字体大小集。而网络较慢的用户常常看不到图片。或者甚至是CSS。

 

所以你要记住，你的样式对于浏览器来说仅仅是一个建议，建议它以特定方式显示。而它不是一个命令。

 

管理drupal主题不兼容性的工具

 

原文：http://drupal.org/node/37156

 译者：葛红儒， Think in Drupal,

  1. 我们推荐你使用一个遵从标准的浏览器作为起点，比如Firefox。Firefox允许你对你网页的某些部分进行高亮显示，右击“查看所选区域的源文件”，可以帮你理解你主题使用的CSS类。理解CSS类是如何作用于底层的xhtml的，是理解你主题的关键所在。
  2. 使用标准的CSS命名规范。我们推荐为你的CSS类采用这些命名规范。
  3. 为你的主题选择一个合法的DOCTYPE类型，并且包含一个DocType Declaration(DTD)。
  4. 为了帮助分析你的HTML 和CSS，我们推荐你为Firefox安装Firebug插件。这个工具非常有用，它允许你查看你的HTML和CSS，并实时的对其进行修改，从而评估修改所带来的效果。另一个非常有用的Firefox插件是Web Developer toolbar。它包含了许多方便的功能。
  5. FireFox扩展插件查看格式化源文件，为你展示格式化的，代码着色过的源文件，并为每个元素提供可选的CSS信息。
  6. 首先你需要确保你的HTML或者xHTML通过合法性验证，然后才能开始修改你的CSS来修正你的bugs。Firefox 的Web Developer toolbar（web开发者工具栏）内置了一个web验证器。Opera也内置了合法性验证，只需要按下Ctrl+Alt+V就可以了。
  7. 一个更高级的工具是Watchfire WebXACT tool，可用于检查代码，分析HTML页面，定位错误。
  8. 如果你发现了一个模块输出了非法的XHTML，你需要为该模块提交一个问题（issue），里面附上截图，以说明问题所在。
  9. 你可以使用Lynx viewer来查看搜索引擎是如何看待你的站点的。
  10. 在IE下面，你站点网页中定位问题，可以参考下面的文章进行解决：Position Everything Internet Explorer Primer（IE中对所有东西的定位，初级读本）。
  11. 在Quirks mode（奇特模式）中，你可以找到许多问题的解答。

Drupal版本:

解决drupal主题中的问题(1)

跨浏览器兼容性(FireFox, Internet Explorer, Opera, Safari)

很难在所有的浏览器下检查你的主题。这里有一些工具，能够帮助你在多个浏览器下检查你的主题。

  1. Browser Shots是免费的，但是获取截图需要花费一些功夫。
  2. BrowserCam是收费的，有24小时的试用期。 

在Windows上，你可以使用Internet Explorer，还可以下载Firefox 或者Opera。在Linux上，你可以使用Konqueror，一个基于KHTML的浏览器，而Safari用在MacOS上，Opera, Firefox可在Linux上使用，而IE也可运行在WINE。在Mac OSX上，你可以使用Safari，下载Firefox 或者Opera。

 

颜色和图形问题

  1. 如果你想尝试选择颜色的话，你可以使用颜色方案（Color schemes）。
  2. 如果在你的日志中生成了未能找到favicon的错误，你可以使用这两个工具来创建一个favicon，favicon from pics 和 favicon generator（生成器）
  3. 要检查对色盲用户的影响，参看Vischeck

 

选择一个基主题

如果你要选择一个主题作为起点的话，对于基于CSS的主题来说，Zen 或 Foundation是不错的选择。如果你想使用表格来管理布局的话，可以使用BlueMarine。

 

特定于模块的CSS

一些Drupal模块自带了一个默认的CSS文件。你应该使用一个工具，比如开发者的工具栏，来检查模块的CSS是否对你的元素起作用，以及所引起的问题。当你安装一个新的模块时，你可以到模块所在的文件夹中看一看，它是不是包含了一个CSS文件。

 

你主题中的实际调试问题

 

对主题的调试没有简单的方案可行。如果你遇到了问题，那么你最好选用简单的基主题，或者尽可能的选择一个接近你最终目标的能够工作的主题。学习你主题中的CSS类，对于理解在哪里修改CSS至关重要。通过IRC可以找到其他的主题开发者，你可以把你做过的写成文当，简明教程。把你的主题提交到Drupal.org，这样他人可以对你的工作进行检查并提出反馈意见。和PHP程序员交朋友，他们能够帮你理解底层的PHP主题模块是如何工作的，这对你的工作也很有帮助。考虑相互帮助，以提高自己的技能。

 

本页的作者为来自于CivicSpace Labs和Theodore Serbinski的Kieran Lal, 和Trae McCombs。如果你想贡献自己的力量，或者让Drupal的主题制作更简单的话，可以加入主题邮件列表，或者直接联系Kieran。

 

 

Drupal版本:

基本的drupal主题帮助

drupal主题目标

 

对你站点drupal主题的改进,可以帮助你完成许多目标.特别是,对drupal主题的改进可以帮你完成以下业务目标:

  • 为你的站点带来流量
  • 帮你增加销售量
  • 为站点用户提供更多的信息
  • 帮助站点用户相互协作.

本文的目的是,帮助你实现下列的主题开发目标:

  • 小的设计修改不会带来浏览器兼容性问题
  • 在你的drupal主题上实现设计者的wireframes.
  • 选择一个基主题以进行定制
  • 基于一个已存在的主题构建一个新的主题

 

 

改进Drupal中的主题帮助

 

在最近的一个Drupal管理员用户体验的调查显示,制作主题是最难的一个Drupal管理任务.我们做了一系列的采访,更好的了解到了主题制作者在开发主题时,需要完成的目标和任务.

 

 

基本Drupal主题任务

 

无论你使用的是什么样的主题,下面的这些基本的主题任务,都是你必须掌握的.

  • Find and open a Cascading Style Sheet(CSS) file for your theme
  • 为你的主题查找和打开一个CSS文件
  • Copy and paste CSS code
  • 复制和粘贴CSS代码
  • Learn the CSS attributes in your theme
  • 在你的主题中学习CSS属性

 

我们推荐你使用Firefox,再装上两个扩展插件,开发者工具栏和查看格式化源文件.我们还建议你使用标准的CSS ID名,与Andy Clarke 和 Eric Meyer建议的一样.

  • 修改颜色
  • 使用另一主题的一部分.例如,将CivicSpace管理主题拷贝到你的站点主题里面.
  • 如何修改一个已有主题的布局.比如,修改列数,页首和页脚的位置,主体的可变性与静止性.

 

 

困难的主drupal题任务

我们给出了一些需要详细解释的困难的主题任务.一些任务既是基本的任务也是困难的任务,我们需要为其花费更多的墨水,以解释这些任务的难点.

  • CSS布局开发
  • 找出一个好的基主题作为起点

我们在项目模块(project module)添加了分类功能,这样就允许了对主题所进行的分类.

  • 修改已有drupal主题
  • 学习CSS类和IDs

 

我们推荐你使用Firefox,再装上两个扩展插件,开发者工具栏和查看格式化源文件.我们还建议你使用Eric Meyer的标准CSS类名.

  • 如何为一个类添加内边距(padding)或者外边距(margins)
  • 从一个drupal主题中删除文本和图片.比如,删除“submitted by”，这可能是也可能不是主题问题。
  • 如何修改表单的默认输出，通常情况下都是非常困难的
  • 当模块生成的XHTML与drupal主题相冲突时，如何进行调整

 

应该向该模块提交一个问题。里面要包含一个展示冲突页面的图片，以及它在一个基本主题下是如何显示的。从模块中摘出相应的XHTML代码片断，并指出期望的XHTML应该是什么样的。

 

  • 使用PHP变量
  • 禁止对容器使用固定的宽度
  • 对于一些复杂的或者灵活的设计，比如fullheight，需要大量的工作来实现max-width 和min-width。
  • 当插入一个设计者想要的图形效果时，要保证在IE下面也能正常工作。
  • IE和Firefox的兼容性问题
  • 从头编写一个drupal主题 

原文：http://drupal.org/node/39451

 译者：葛红儒， Think in Drupal,

Drupal版本: