CSS Injector

允许管理员CSS在页面输出的基础上配置rules.It的有用的添加简单的CSS调整，而无需修改网站的官方主题

让设计者可以完全控制一个站点的内容在浏览器中的显示，自定义主题（如Super Duper Chefs中使用的Nitobe）可以使每一个网站与众不同。但是有些时候使用CSS来对站点的展示做一点点修改也是很有用的。它们允许设计者无需去改动决定站点结构的底层HTML来修改站点的字体、颜色，等等。
      CSS Injector 模块使管理员能够在站点管理后台的界面中将这些小片段放入站内，而不需要去修改当前主题的文件。这个功能在Drupal.org发布新的主题的时候非常有用——如果你修改你的主题放入你自己的CSS，那当你下载新的主题的时候，这些修改很容易丢失。把它们放入CSS Injector则能够保存它们，即使是你改变了主题。
      CSS Injector有很多高级选项，包括可以条件式的给某些特定的页面添加CSS规则。例如，如果你的CSS仅对首页发生作用，你就可以确定它不会把一些不必要的规则强加给全站。你也可以给你的CSS指定一种媒体类型，它使将添加样式信息仅在页面被打印的时候发生作用成为可能。最后，每个规则还能利用Preprocess CSS（预处理CSS）复选框来控制Drupal是否将这些规则融入当前的主题CSS中去。在大多数情况下，这样做能节省时间，因为这样的话你的访问者的网页浏览器只需要一次性从你的网站服务器中下载所有的样式表。如果你要把大量的CSS代码仅用于一到两个页面，那关了预处理从而让这些代码独立可能更加高效。否则的话，就启动预处理。

操作：美化界面
本节我们将做最后一些调整来使评论看起来更漂亮更整洁，如图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”按钮保存。 

       配置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带来的变化真大呀！

While I generally do all of my CSS work in my themes, I've found the following CSS Injector rules are really handy, since they work independently of the theme and can be applied to the site administration theme, too:

Print Stylesheets

Add on every page.

Media: Print

Tweaks to node edit form

Add on only these pages:

• node/add/*
• node/*/edit

#blogrimage