操作：美化界面

本节我们将做最后一些调整来使评论看起来更漂亮更整洁，如图4-18。

      图4-18，评论最终效果

      设置CCK显示字段选项

      虽然我们的产品评论内容类型把所有的数据都排列好了，我们的产品列表页面看起来也很不错，单独的评论仍然看上去有点邋遢。幸运的是，我们可以用CCK模块的显示设置来调整每个字段在评论中的显示。

      进入Administer→Content management→Content types (admin/content/types), 点“the Product review type”的“Edit”连接,然后再点击 “Display fields” 标签 (admin/content/node-type/review/display)。如表4-19填写好字段设置，它将理顺评论信息的显示。完成后，点 “Save”按钮保存。

      表4-19，产品评论内容类型的显示设置

      配置CSS Injector

      修改CCK显示设置使评论干净了不少，但是概要信息仍然显得有点难看。在第11章，我们会讲到 Drupal输出主题HTML的一些基本知识，但是现在我们可以利用CSS Injector给界面添加一些CSS规则来改进这个问题。我们将把概要区的宽度缩小并把它放在每个评论的一旁，把它弄成一个浮动边栏而不是一个头部信息 放在每个评论的顶部。方法如下：

      1、进入Administer→Site building→Modules (admin/build/modules) 并启用“the
Other: CSS Injector module”。

      2、进入Administer→Site configuration→CSS Injector (admin/settings/css_injector)，点 “Create a new rule” 添加新的CSS规则。

      3、规则命名为“Floating Amazon fields”，并且将下列文本放入CSS代码域中，你在图4-19中可以看到表单的全貌。

       div.fieldgroup {
  border: 1px solid lightgrey;
  float: right;
  padding: 10px 2px;
  width: 200px;
  font-size: .9em;
}
div.field-label-inline-first {
  float: left;
}

不喜欢打字？不用担心。此代码还可以在书籍的源代码
assets/ch04-reviews/amazon.css文件中找到，供复制和粘贴。

       4、点击“Save”按钮添加新的规则。

       因你的网络浏览器的设置不同，你可能需要先清除浏览器的缓存才能看到该样式的变化效果。你清除后，回到原来添加的产品评论，你会看到现在的评论看起来更吸引人多了，如图4-18.CSS带来的变化真大呀！