drupal样式表

       在下面我们将讨论Drupal是如何通过.info文件来处理样式表的.而在子页面中,我们将讨论更高级的功能,比如通过API添加样式表的功能.完全基于CSS的主题,其样式表的相关信息也可以放在这里.

有几点需要注意。每一个核心组建或者模块都将提供一个默认输出。包括文本标记和相应的样式表。(更多解释，可参看文本标记的覆写)。 由于Drupal的易扩展性，对于主题设计者来说，处理浏览器端的一切，将会是一个极大的负担。这些默认的输出，将会根据主题设计者的判断，作出修改。与主题函数和模板的覆写一样，内核和模块提供的样式表也可以被覆写。不要直接修改。所有的修改都应该放在你主题目录里。

 

注意：

  • 注意，修改样式表时，首先要确保仅用了CSS优化。它位于"Administer > Site configuration > Performance"。如果启用了的话，你将看不到你对CSS所做的修改，除非你清空聚合到一块的样式表。修改完以后，你可以在启用它。
  • .info文件被缓存了。所以样式表的添加或者删除都不会显示出来，直到你将缓存清空。（不要将它与主题注册表混淆了。）为了清空缓存，你可以这样：

    1. 点击位于"Administer > Site configuration > Performance"的清空(Clear)按钮
    2. 如果启用了devel区块的话(devel模块生成的)，点击链接"Empty cache"。
    3. 简单的访问主题选择页面"Administer > Site building > Themes"。

添加样式表：

在默认情况下，如果你主题的.info文件中没有定义样式表的话，将会使用"style.css"文件。添加其它的样式表非常简单，只需要定义一个新的'stylesheets'键，媒体属性(media property)和样式表的名称。注意，定了了定制的样式表后，就不再加载默认的"style.css"了。如果你的主体需要使用它的话，你需要在info文件中明确声明它。

 

; Add a stylesheet for all media
stylesheets[all][] = theStyle.css

; Add a stylesheets for screen and projector media
stylesheets[screen, projector][] = theScreenProjectorStyle.css

; Add a stylesheet for print media
stylesheets[print][] = thePrintStyle.css
   

一些注意点：

  • 注意[]的使用，在[media]和“= styleName.css”之间，使用了[]。
  • 这里定义的顺序，就是样式表在页首出现的顺序。
  • 样式表可以出现在子目录下面，比如stylesheets[all][] = stylesheets/styleName.css.这样易于管理样式表。

覆写内核和模块的样式表:

为了覆写内核或者模块的样式表,可以在主题的.info文件中对其进行重定义。以"system-menus.css"为例。它位于"modules/system/system-menus.css"。使用下面的代码，将会忽略这个样式表，取而代之的是主题下面的拷贝。

stylesheets[all][] = system-menus.css

当覆写模块的样式表时，应该将样式表文件放在你的主题下面，路经和文件名一定要匹配。这样，就使用主题提供的样式表来替换默认的样式表了。

如果添加的样式表，在主题内部不存在的话，将会忽略内核或者模块的样式表。这个特性是在Drupal6.0中设计的，在Drupal 6.3中已被纠正。

 

一些注意点：

  • 覆写一个核心CSS文件，将会阻止加载默认的"style.css"文件。当你需要这些默认文件时，一定要明确的对其进行定义。
  • 覆写的样式表与原始样式表在媒体(media)类型上必须匹配。
  • 样式表内部的所有链接元素必须正确。你需要多检查一下'url()'属性或者'@import'规则，以确保里面的资源确实存在。
  • 样式表在页面头部的出现顺序将被修改。修改以后，将会产生相应的级联效应。
  • 一些内核和模块的样式表是根据条件自动加载的。使用.info文件覆写将会使得这些文件将被永远调用。
  • 如果在主题中的修改不是很重要的话，可以考虑使用CSS选择器来覆写样式表，而不是覆写整个文件。

 

覆写基主题的样式表：

下面的内容适用于子主题。为了在子主题中禁用基主题的一个样式表，你可以在.info文件中重定义样式表。这与覆写模块或者内核样式表的方式相同。

 

基主题和子主题必须包含这一项：

stylesheets[all][] = masterStyle.css
   

如果文件存在于子主题中的话，就使用这个文件，而如果忽略该文件的话，将会阻止加载它。

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

译者：葛红儒， Think in Drupal

Drupal版本:

通过API为drupal添加样式表

       通过.info文件添加样式表,对于大多数主题来说,已经足够了.由于.info文件是静态的，所以不能动态的添加样式表。依据主体是如何处理样式表的，将它们放到一块也是可以的。当你有所疑虑的时候，使用.info文件就可以了。

有两个API函数可用来处理样式表，drupal_add_css 和drupal_get_css。下面是一个动态添加样式表的例子。

将前缀"drop"改为你的主题名。

<?php
function drop_preprocess_page(&$variables) {
  $front_style = path_to_theme() .'/front-page.css';
  $path_style = path_to_theme() .'/path-'. arg(0) .'.css';

  if (file_exists($front_style) && $variables['is_front']) {
    $include_style = $front_style;
  }
  elseif (file_exists($path_style)) {
    $include_style = $path_style;
  }

  if (isset($include_style)) {
    drupal_add_css($include_style, 'theme', 'all', FALSE);
    $variables['styles'] = drupal_get_css();
  }
}
?>

 

在上面的例子中，访问首页，将会加载样式表"front-page.css"，而访问其它页面，则会根据内部路径的不同加载其它的样式表。例如，对于页面，http://example.com/admin，将会使用"path-admin.css"。

 

一些注意点：

  • 根据样式表加载的时间和地点，将会调用drupal_get_css来加载要添加的样式表。在模板预处理页面template_preprocess_page）首先对其进行初始回显。关于预处理器顺序的具体细节，可参看预处理器和变量。
  • 在drupal_add_css存在一个参数，用来聚合添加的文件。当要添加的样式是非常动态的话，可以考虑像前面的例子那样，禁用该参数，这是由于向一个大的聚合文件中添加一个比较小的文件需要重新创建一个新的聚合CSS文件。生效后，加载页面的速度将会变慢，并且耗费更多的带宽。

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

译者：葛红儒， Think in Drupal

Drupal版本:

覆写drupal内核样式表

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

译者：葛红儒， Think in Drupal,

      默认情况下, Drupal安装后,各个部分是带有样式的. 尽管默认样式非常方便,但是当你使用一个主题时,你经常会根据你的设计来修改这些设置.

(Please fill this in as much as possible.)

(请往这里添加更多的相关内容,越多越好)

Drupal版本:

drupal中定制ul list-style

难易程度: 中到高级.

 

例1:基本

在这个例子中,我们将创建一个无序列表(ul),它将在特定区域展示一个光盘,跟着是一列项目,而在网站的其它部分将会隐藏这些信息.接着你可以决定,在你的网站中,你要为哪些列表添加样式.

 

注意:

注意,你一定要在测试站点进行试验,而对于要用到的文件要有备份.

我们将使用一个div,它的名字为"content".你的div的名称可能有所不同.在div中,我们放置ul列表,我们将对其添加样式:

 

<div id="content">
<ul class="unordered_list_in_content">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>

 

在你的样式表中你将使用:

 

ul { list-style-type:none } /* This will turn off all list-style-types in your theme */
#content ul.unordened_list_in_content { list-style-type: disc }

 

现在,你应该可以在你选择的区域看到带有光盘的列表,而不是在网站的其它部分.

 

例2:让我们添加一些有趣的列表样式

在一个主题中关闭所有的list-style,使用:

ul {list-style:none}

代替

ul {list-style-type:none}

 

你可以这样:

ul {list-style:disc inside}

代替

ul {list-style-type:disc}

 

这样你最终的样式表将会是:

 

ul {list-style:none}
#content ul.unordered_list_in_content { list-style: disc inside}

 

 

注意:如果在你的主题中,有多个样式的话,你需要确保没有list-styles来覆写你的CSS,否则它还是显示不出来.

 

注意: list-style-type已被禁用,更多细节参看http://www.w3.org/TR/html401/struct/lists.html.

 

提示:这也适用于节点内部的ul,比如一个page 或者story.

 

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

译者：葛红儒， Think in Drupal

 

Drupal版本:

让drupal支持RTL语言

       添加对RTL(右到左)语言的支持,涉及到覆写横向的样式,可以通过级联和基于相对的样式表进行命名来实现.对RTL样式表的包含是自动完成的.基于站点语言的设置来决定是否包含RTL样式表.

例如,在核心主题Garland中, "style.css"是主样式表.而对于从右到左的语言,比如阿拉伯语或希伯来语,它将会包含"style-rtl.css".对两个样式表的加载次序是,首先加载主样式,然后加载RTL样式.这允许后者对前者的覆盖,从而在主样式中,不用担心RTL样式表中所需要考虑的特殊性. 

这里有一个编码标准,用来管理规则.依赖于横向定位或者纬度的规则,应该带有注释 /*LTR */以指示该属性是特定于从左到右布局的.这包括floats, margins, padding,等等.内置文本应该自动浮动,而主题则通过"page.tpl.php"模板设置文档的语言.

 

例如 基样式:

ul.primary-links {
  margin-top: 1em;
  padding: 0 1em 0 0; /* LTR */
  float: left; /* LTR */
  position: relative;
}
 

相应的RTL样式:

ul.primary-links {
  padding: 0 0 0 1em;
  float: right;
}
 

由于和主CSS文件一起使用,这使得可以非常容易的指出在RTL样式中,哪些地方需要修改.

注意,如果你的主体覆写一个模块的样式,那么与之关联的RTL样式将被忽略,除非你明确的对其进行声明.

 

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

译者：葛红儒， Think in Drupal

Drupal版本: