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 Inform
相关文档:
CSS important
.dialog{margin:4px !important;margin:1px;} /* IE以最后出现的为准, Firefox|Opera|Safari以!important为准 */
CSS DIV半透明
filter: alpha(opacity=50); /*IE支持(范围0-100)*/
opacity: 0.50; /*非IE支持(范围0-1)*/
......
想成为一名CSS专家,仅仅熟练使用CSS选择符(selectors)是远远不够的。还在于对工作的整体规划,工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站,而写CSS本身就是一种享受。 那么我们应该如何创建更具吸引力的样式表?你的样式表应该具有哪些特性呢?通过学习并结合我自己的工 ......
CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。
body {background ......
一、 善用css缩写规则
/*注意上、右、下、左的书写顺序*/
1. 关于边距(4边):
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px (省略的左等于右)
1px 2px (省略的上等于下)
1px & ......
注:"elm"代表某个DOM元素,"xxx"代表某个CSS属性
一、elm.style.xxx 只能获取内联样式里的值
要想获得正确的css值:
IE:elm.currentStyle[xxx]
W3C标准:document.defaultView.getComputedStyle(elm,"")[xxx]
注意:用IE方法返回值可能不是数字,而是auto;用w3c的方法总是会返回数字+单位
三、offsetLeft
......