本章论述如何修改窗口的皮肤。
关于皮肤
皮肤 是一组样式表,图片及应用于XUL的行为文件。 通过使用不同的皮肤,你可以再不改变窗口的功能的前提下改变其外观。火狐提供了一个默认的皮肤,并且你也可以下载到其他的一些。对于所有的皮肤来说XUL是一样的,只是,他们使用的样式表及图片不同罢了。
如果你想让你的火狐窗口看起来更有个性,你可以简单的改变与之关联的样式表文件。当然可以创建一个全新的皮肤来进行进一步的修改。火狐有一个主题管理器用以修改默认的皮肤(尽管在底层代码中,人们把皮肤和用户界面叫“主题”,但实际上他们就是指一个相同的东西)。
皮肤使用 CSS描述,允许你定义绘图元素使用的颜色、边框和图片。再文件classic.jar中包含有皮肤的定义。此包中的全局目录中有一个主样式定义,他用于定义一系列XUL元素是如何显示的。通过修改这些文件,你就能改变XUL程序的外观。。
使用userChrome.css定制
在你的profile文件夹中,'chrome'文件夹下放置一个'userChrome.css' 文件你就可以通过覆盖而不是修改主题包来改变程序外观。当你创建一个profile 是就会创建这样一个文件夹,并且其中会包含一些内容。文件'userContent.css' 定制网页, 文件'userChrome.css' 定制chrome 文件。
下例,把下面这行加到文件的底部,你会发现所有的菜单栏都变成了红色背景。
menubar { background-color: red; }
当你进行了以上修改之后,你会发现所有的火狐窗口都已改变,所有的菜单栏都是红色的。因为他改变了用户样式表,并且作用于所有的窗口。也就是说,浏览器菜单栏、书签菜单栏甚至是查找菜单栏都是红色的。
皮肤包
仅改变一个窗口,你需要修改与XUL文件相关的样式表。比如,为书签管理器的菜单命令增加一个红色的边框,把下面的内容加到classic.jar或你要用的其他主题包的 bookmarksManager.css 文件最后。
menuitem { border: 1px solid red; }
如果你观察一个皮肤包If,你就会注意到其中包含有一系列的样式表及图片。样式表引用图片。当你希望你的程序可以改变皮肤时,你应该避免在XUL文件中直接引用图片。这是因为一个别的什么皮肤设计者可能不希望使用图片,但是如果在XUL文件中直接使用了图片,就会使他的工作变得复杂。请使用CSS间接引用图片,这样就很容易被移除。
使用list-style-image属性,
你可以为按钮、复选框或是其他什么元素设计图形,如下例:
checkbox { list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); } checkbox[checked="true"] { list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); }
这些代码改变了与复选框相关的图形,首先复选框有一个一般的外观,然后为选中的复选框设置了一个新的图像。修饰'checked=true' makes the style only apply to elements which have their checked attributes set to true.
See also : creating a skin for Firefox and CSS getting started
下一节,创建一个新皮肤