本站不兼容 8 以前的版本的 Interner Explorer 浏览器(或基于这些版本的 IE 的其他浏览器),并且页面样式不完全兼容 IE 8,我们建议你升级至 IE 9 或改用其他非 IE 浏览器

Mozest™

  • 正在加载用户菜单…

开放、分享、互助

转播到腾讯微博
返回列表 回复 发帖
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

关于这个帖子



本贴是写给 mozine 论坛对 firefox 主题修改与制作感兴趣的同学们的,非常粗浅的介绍了一下 firefox 的主题结构,如果想写出很漂亮的主题,光靠这贴子远远不够,还需要很牛的图形处理能力以及相关的 CSS 知识,大家要努力。

做人要厚道,转载请注明出自 mozine.org,谢谢 。

免责条款:随着 firefox 的主题结构不断更新,也许本贴中的部分内容会由于没有及时更新而不再适用。

写的比较仓促,欢迎大家补充,谢谢。

mozine 论坛相关贴子:
  1. userContent.css, 设置 userContent.css — 改变网页的外观
  2. userChrome.css, 设置 userChrome.css — 改变 FireFox 的外观 (整理编辑中....)
  3. mozine 火狐桌面秀
  4. Firefox 平滑主题教程
  5. Thunderbird 模拟 Tiger Mail 教程
主题下载相关站点:
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

为 Firefox 制作主题


准备工作

我相信每一个用户都有能力制作出自己的主题,不过随着对 firefox 主题认识的逐步深入您会发现这项工作其实并不像想象中的那么简单,anyway,在开始之前您一定要对 firefox 主题具备一定的常识:图形处理文件压缩如何编辑 CSS 文件

Firefox 的按钮使用了标准的 gif, png 和 jpeg 格式并使用了 CSS 来定义浏览器的整个图形界面。

文件压缩

首次制作主题您可以先在别人已经发表的主题上进行修改,为了保持主题的结构完整性以及可能涉及到的授权问题,我建议您可以先使用 firefox 默认主题进行修改,关于这个默认主题,您可以在 Firefox 安装目录下搜索 "classic.jar" 。

XXX.jar 实事上是更改了扩展名的 zip 压缩文件,您可以使用 winrar , winzip , 7z 等解压工具对她进行操作。

附 Classic.jar 路径:

Linux:
* /usr/lib/MozillaFirefox/chrome/classic.jar

Windows:
* \Program Files\Mozilla Firefox\chrome\classic.jar

Mac OS X:

* 转到 “应用程序” 文件夹
* 按住 Control 键猛击应用程序的图标(Firefox的图标),如果你有双键鼠标那就是右键。选择“显示包内容”
* 转到里边的 contents/MacOS/Chrome/classic.jar

注:为了保持 firefox 目录结构的整洁,建议将 classic.jar 复制到别的文件夹进行修改操作。

Classic.jar 目录结构

Classic.jar 根目录下您会发现有一个 skin 目录和 preview.png , icon.png 。

preview.png 由于会出现在 Firefox 主题列表的预览框中,所以建议不要做太大。

在 Classic.jar\skin\classic 目录下包含有以下目录:

browser:Browser 包括了所有的工具栏图标,书签管理器图标以及属性窗口。

global: Global 是 firefox 主题最重要的一个目录,她包含了几乎所有的定义浏览器外观的 CSS 文件。

mozapps:Mozapps 里包括了浏览器附件的所有图标和风格定义,比如扩展管理器,升级向导等等。

help:这个目录下包括了所有定义 help 窗口的主题文件。

communicator:这个文件作用不是很大,不过具体做什么的,我还没有搞清楚 ph34r.gif ph34r.gif ph34r.gif

安装您的新主题



首先您要替换默认主题,将她可以被 firefox 正确识别并安装。那么咱们暂时先给她起个好听的名字,叫 otherside 吧。 " border="0" alt="wub.gif" /> " border="0" alt="wub.gif" /> " border="0" alt="wub.gif" />

复制所要替换的文件

第一步,要将正确的文件放到正确的地方,所以您先建一个文件夹,叫 otherside, 然后将上面提到的几个目录 browser, global, communicator, help 和 mozapps 都放到建好的 otherside 文件夹里,lol 千万别忘了上面还提到的 icon.png 和 preview.png 两个图片。

建立安装文件

Contents.rdf

这个文件的主要作用是将您所更改的图标和 CSS 正确的定义到浏览器界面上去。创建一份 contents.rdf 然后将她放到 \otherside,然后用文本编辑器轻轻的打开她,然后将她作如下修改 (注意文中 otherside 的部分):

代码
<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

  <!-- List all the skins being supplied by this theme -->
  <RDF:Seq about="urn:mozilla:skin:root">
    <RDF:li resource="urn:mozilla:skin:otherside" />
  </RDF:Seq>

  <RDF:Description about="urn:mozilla:skin:otherside"
        chrome:displayName="Otherside"
        chrome:accessKey="O"
        chrome:author="Mozine"
        chrome:description="教你怎样做主题 by mozine"
        chrome:name="otherside"
        chrome:image="preview.png">
    <chrome:packages>
      <RDF:Seq about="urn:mozilla:skin:otherside:packages">
        <RDF:li resource="urn:mozilla:skin:otherside:communicator"/>
        <RDF:li resource="urn:mozilla:skin:otherside:editor"/>
        <RDF:li resource="urn:mozilla:skin:otherside:global"/>
        <RDF:li resource="urn:mozilla:skin:otherside:messenger"/>
        <RDF:li resource="urn:mozilla:skin:otherside:navigator"/>
      </RDF:Seq>
    </chrome:packages>
  </RDF:Description>

  <!-- Version Information.  State that we work only with major version 1 of this
       package. -->
  <RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:otherside:communicator"/>
  <RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:otherside:editor"/>
  <RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:otherside:global"/>
  <RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:otherside:messenger"/>
  <RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:otherside:navigator"/>
</RDF:RDF>
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

install.rdf

( 注:这一部分对于 mozilla 扩展的 install.rdf 也同样适用)

这个文件记录了主题的一些最基本的信息以及指定自动更新路径,并确保主题可以正确的安装到 firefox 上 。从源文件中复制一份 install.rdf 然后将她放到 \otherside 目录下,然后用文本编辑器轻轻的打开她 ,install.rdf 的正确格式如下 :

代码
<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <-- properties -->
  </Description>      
</RDF>


install.rdf 中必须定义的属性:

em:name
主题的名字,别忘了。

代码
<em:name>otherside</em:name>


em:id
您可以在 这个页面 自动生成 GUID,或者从网上下载 GuidGen 来生成 ID 。

代码
<em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>


em:version
版本号
代码
<em:version>4.6</em:version>


em:targetApplication
这个值定义了主题的兼容程序及其最大最小版本号, 如下:
代码
<em:targetApplication>
    <Description>
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>1.0</em:minVersion>
      <em:maxVersion>1.5.0.3</em:maxVersion>
    </Description>
  </em:targetApplication>


提示:
Firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
Thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6}

install.rdf 中选填的属性:

em:description
扩展或者主题的简短描述
代码
<em:description>Creating a Theme for Firefox</em:description>


em:creator
作者 ID,您非要用真用我也没办法。
代码
<em:creator>mozine</em:creator>


em:contributor

贡献者,您可以不写,也可也写很多条。
代码
<em:contributor>baggio@mozine.org</em:contributor>


em:homepageURL
主页链接
代码
<em:homepageURL>http://www.mozine.org/</em:homepageURL>


update.rdf

em:updateURL
自动更新

假如你存放主题的主机在 update.mozilla.org 或者本站的 update 的话就,建议就不要在 install.rdf 中定义自动更新了。

如果你想实现自动更新,首先要在 install.rdf 中定义 em:updateURL,这个 URL 应该是 RDF 格式并且存放在一个最好你有全部管理权限的服务器上 。然后 FF 的更新系统会定期的检查这个 RDF 文件,如果有更新可以自动更新。

当然你也可以使用 PHP 或 CGI 动态生成自动更新的回应 RDF 文档,参数如下:

%ITEM_ID% 被更新的主题的 GUID
%ITEM_VERSION% 被更新的主题的 版本号
%APP_ID% 新版的主题的 GUID
%APP_VERSION% 新版主题的 版本号

比如:

代码
<em:updateURL>http://www.mozine.org/update.cgi?id=%ITEM_ID%&version=%ITEM_VERSION%</em:updateURL>


然后你要自己编写在 em:updateURL 定义的 RDF 文件,然后放到你自己的服务器上:

代码
<RDF:Description about="urn:mozilla:extension:{主题 GUID}">
<em:version><版本号></em:version>
<em:updateLink><更新主题绝对链接></em:updateLink>
</RDF:Description>


附:在这里提供一份小人从 Nicky Blog 上抄袭到的一段参考 update.rdf 文件, 谢谢 Nicky 大大 " border="0" alt="wub.gif" /> " border="0" alt="wub.gif" /> :

代码
<?xml version="1.0"?>
<r:RDF xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/2004/em-rdf#">

<r:Description about="urn:mozilla:theme:{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"><!--主题的32位GUID码,和install.rdf里面的相对应 -->
<updates>
<r:Seq>
<r:li>
<r:Description>
<version>1.5.1</version><!--最新的版本号,必须比install.rdf设置的高(废话) -->

<targetApplication>
<r:Description>
<id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id>
<minVersion>0.8</minVersion><!--和install.rdf里面的<em:minVersion>0.8</em:minVersion>对应 -->
<maxVersion>1.6</maxVersion><!--和install.rdf里面的<em:maxVersion>1.6</em:maxVersion>对应 -->
<updateLink>http://www.site.com/theme.jar</updateLink><!--最新的版本下载地址 -->
</r:Description>
</targetApplication>

</r:Description>
</r:li>
</r:Seq>
</updates>

</r:Description>
</r:RDF>
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

Firefox 主题从 1.5.0.x 到 2.0 的变化



browser/browser.css

下列代码被移除:

代码
/* mail button */

#mail-button {
  -moz-image-region: rect(0px 360px 24px 336px);
}
#mail-button:hover {
  -moz-image-region: rect(24px 360px 48px 336px);
}
#mail-button[disabled="true"] {
  -moz-image-region: rect(48px 360px 72px 336px);


代码
/* mail button */

toolbar[iconsize="small"] #mail-button {
  -moz-image-region: rect(0px 240px 16px 224px);
}
toolbar[iconsize="small"] #mail-button:hover {
  -moz-image-region: rect(16px 240px 32px 224px);
}
toolbar[iconsize="small"] #mail-button[disabled="true"] {
  -moz-image-region: rect(32px 240px 48px 224px);
}


下列代码发生了改变:

1.5.0.x 中
代码
/* ::::: go button ::::: */

#go-button {
  list-style-image: url("chrome://browser/skin/Go.png");
  -moz-image-region: rect(0px 20px 20px 0px);
  padding-top: 2px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}


2.0 中变为:
代码
/* ::::: go button ::::: */

#go-container {
  -moz-box-orient: vertical; /* for go button flex hack */
}

#go-button {
  -moz-box-flex: 1; /* expand to fill toolbar height */
  list-style-image: url("chrome://browser/skin/Go.png");
  -moz-image-region: rect(0px 20px 20px 0px);
  padding-top: 2px;
  padding-bottom: 2px;
  -moz-padding-start: 3px;
  -moz-padding-end: 5px;
}


1.5.0.x 中
代码
#go-button[disabled="true"] {
  -moz-image-region: rect(0px 60px 20px 40px);
}

#go-button > .toolbarbutton-text {
  display: -moz-box !important;
}


2.0 中变为
代码
#go-button[disabled="true"] {
  -moz-image-region: rect(0px 60px 20px 40px);
}

#go-button > .toolbarbutton-icon {
  margin: 0;
}

#go-button > .toolbarbutton-text {
  display: -moz-box !important;
  margin: 0 2px 1px 2px !important;
}


在 2.0 中新加入以下代码:

代码
#places-bookmark {
  list-style-image: url("chrome://browser/skin/bookmarks/Bookmarks-toolbar.png");
  -moz-image-region: rect(0px 24px 24px 0px);
}

#places-subscribe {
  list-style-image: url("chrome://browser/skin/page-livemarks.png");
  opacity: 1.0;
}

#places-subscribe[disabled="true"] {
  opacity: 0.3;
}

#bookmarksBarShowPlaces {
  list-style-image: url("chrome://browser/skin/places/places-icon.png");
}


/* Personal toolbar */
.toolbar-drop-indicator {
  height: 16px;
  width: 5px;
  margin-bottom: -8px;
  position: relative;
  background: url('chrome://browser/skin/places/toolbarDropMarker.png') 50% 50% no-repeat;
}

.toolbar-drop-indicator-bar {
  display: none;
  height: 16px;
  margin-bottom: -16px;
  margin-left: 4px;
  position: relative;
}

.toolbar-drop-indicator-bar[dragging="true"] {
  display: -moz-box;
}

toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  -moz-appearance: none;
  background: Highlight !important;
  color: HighlightText !important;
  list-style-image: url('chrome://browser/skin/places/folderDragOver.png') !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}

.bookmark-item[dragover-into="true"] {
  background: Highlight !important;
  color: HighlightText !important;
}

.bookmark-item[dragover-top="true"] {
  -moz-border-top-colors: #000000;
}

.bookmark-item[dragover-bottom="true"] {
  -moz-border-bottom-colors: #000000;


help.css 中

以下代码被添加:

代码
#context-copy[disabled="true"] {
  visibility: collapse;
}


extensions.css

以下代码由 1.5.0.x 中
代码
extension[disabled="true"][compatible="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}

在 2.0 中变为:
代码
extension[disabled="true"][compatible="false"] .extension-item-description,
extension[satisfiesDependencies="false"] .extension-item-description,
extension[incompatibleUpdate="true"] .extension-item-description {
  color: #C77173;
}


profileSelection.css

以下代码由 1.5.0.x 中
代码
#profiles > listitem {
  list-style-image: url("chrome://mozapps/skin/profile/profileicon.gif");
}

在 2.0 中变为:
代码
#profiles > listitem {
  list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
}


相关知识库



很可惜,我知道大家很期待这部分,可是技术文档都是英文的,最关键的部分我实在没有时间翻译了,所以只好给出大家相关链接,如果有时间一定会补上,不好意思:

XUL (XML User Interface Language)

XULPlanet

HTML (HyperText Markup Language)

XML (Extensible Markup Language)

RDF (Resource Description Framework)



在线安装:

如果您有自己的网站,想将自己制作的主题放到自己的主页上直接供 firefox 用户在线安装,下面的 javascript 可能会派上用场:

代码
<a href="java script:InstallTrigger.installChrome(InstallTrigger.SKIN,
'otherside.jar', '我做的主题')">安装我制作的主题</a>


Update 中国 发布:

如果您想将自己制作出的主题发布到 update 中国,可以在 mozine 开发者主题区发贴,格式如下:
作者:
版本号:
兼容:
简介:
更新日志:
缩略图:


如果您比较羞涩,也可以在 mozine 论坛直接给我发消息,或者给我发 email : baggio.corleone(at)gmail.com,在下一定会及时处理。

注意:修改自别人主题的作品在发布时必须征得修改许可授权,请各位作者一定要注意。
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

firefox 1.5 以后的皮肤优先用 chrome.manifest, 这样简单一些。
(当然 Contents.rdf 方式仍然可用)

使用 chrome\theme_name.jar 结构的,
内容为
skin global theme_name jar:chrome/theme_name.jar!/global/

不想压缩为jar的,
skin global theme_name global/ 之类的方法(要注意文件路径)。

这样的好处是一个简单的 chrome.manifest 即可, 没有必要去写好几个Contents.rdf 。

其缺点是做出来的主题不可能兼容于 Firefox 1.0 。
修改别人的主题要授权……我还不知道呢,误解了
现在应该删除我的帖子里的主题吗?
可以的话,如果我不小心犯了什么错误,请及时的告诉我,谢谢
我把教程编成了电子书,斑竹同意的话,可以发出来共享
引用 (花小蛮 @ 2006年5月28日 10:32 AM) <{POST_SNAPBACK}>
修改别人的主题要授权……我还不知道呢,误解了
现在应该删除我的帖子里的主题吗?
可以的话,如果我不小心犯了什么错误,请及时的告诉我,谢谢



修改别人的要授权-------我是这样理解的:


修改了以后不能以原来的名字发布。也就是不能混淆视听,让人将修改版当作原版。

如果原主题授权协议是 GPL, 那么就可以在其基础上替换图标, 少量修改后换个名字, 就是一个新的主题。注明一下参考了某某主题便是。
提问
默认的主题解压后,browser等5个目录在skin\classic\下
这样,怎样编写contents.rdf?
按照文中的例子
是不是应该吧classic目录改成otherside
还有,整个contents.rdf的内容就是下面这些吗?
<RDF:li resource="urn:mozilla:skin:otherside:communicator"/>
<RDF:li resource="urn:mozilla:skin:otherside:editor"/>
<RDF:li resource="urn:mozilla:skin:otherside:global"/>
<RDF:li resource="urn:mozilla:skin:otherside:messenger"/>
<RDF:li resource="urn:mozilla:skin:otherside:navigator"/>
which tough guy bestowed four stars for my topic...
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

先回答人家的问题然后再灌,觉得星星太多我给你换成警告?tongue.gif
引用 (花小蛮 @ 2006年5月28日 11:15 AM) <{POST_SNAPBACK}>
提问
默认的主题解压后,browser等5个目录在skin\classic\下
这样,怎样编写contents.rdf?
按照文中的例子
是不是应该吧classic目录改成otherside
还有,整个contents.rdf的内容就是下面这些吗?
<RDF:li resource="urn:mozilla:skin:otherside:communicator"/>
<RDF:li resource="urn:mozilla:skin:otherside:editor"/>
<RDF:li resource="urn:mozilla:skin:otherside:global"/>
<RDF:li resource="urn:mozilla:skin:otherside:messenger"/>
<RDF:li resource="urn:mozilla:skin:otherside:navigator"/>



@花 MM ,

不好意思,那天没有中文输入,就没有回你,现在补上。

contents.rdf 这个文件最主要的作用就是要所有你写的 CSS 定义到 FF 界面上,关于她的修改要看你具体改哪个主题了,这里只是举了个例子,别担心这个,大不了以后你做的主题的安装文件都让 otherside 帮你改。

如果你修改别人的主题要到各大网站发布的话,最好还是跟原作者联系一下,如果没有授权只好发到论坛内部交流了。

做好了电子书记得给我发一份啊,不过这个帖子我总觉得还不是很全面,以后会不定期的修订的,只是最近实在没有时间。

对了,我已经代表楼上的金哥哥加你的 MSN 了 ph34r.gif ph34r.gif ph34r.gif
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

引用
对了,我已经代表楼上的金哥哥加你的 MSN 了

你看,你看。

月亮的脸悄悄的在改变~
没有人能以智慧、聪明、谋略敌挡耶和华。马是为打仗之日预备的;得胜乃在乎耶和华。
秘密基地: 妖精集中营 | 二小姐私家作坊 | otherside
引用 (baggio @ 2006年5月31日 7:35 AM) <{POST_SNAPBACK}>
对了,我已经代表楼上的金哥哥加你的 MSN 了 ph34r.gif ph34r.gif ph34r.gif


黑暗来临了……
请问要把标签栏改成默认的样式要修改哪里,
引用 (寒翌 @ 2006年9月6日 5:40 PM) <{POST_SNAPBACK}>
请问要把标签栏改成默认的样式要修改哪里,


那要看你使用的主题对 TAB 都做了哪些改动了。
Old man dead, Young girl live.
----- www.NiDaYe.orG -----

自己很想莱diy一下的说
希望能有成果吧

初次查看,跟进.

初次查看,跟进.

谢谢共享
菜鸟路过 泪流满面……
有木有简单一点的教程啊。。。

看呆了。好长啊。。
长知识了啊
很有用啊