【教学贴】大家一起做“唐韵” · 菜鸟学做主题

【教学贴】大家一起做“唐韵”·菜鸟学做主题
大家一起做“唐韵”&菜鸟学做主题

前言
本贴不是“唐韵”主题发布贴，如果你只是想下“唐韵”来看 看，请看这里https://www.firefox.net.cn/newforum/viewtopic.php?t=2980。
我搜索了google，对firefox主题制作中文资料很少，所以把我 这几天走的弯路整理了一下，后来者可以借鉴一二。
以下内容都是学做主题的初级内容，欢迎高手指正。
PS.取这个题目的另一个原因是我实在不是一个适合作主题的人 啊～强烈的召唤喜爱“唐韵”主题的人一起建设它。


闲话少说，进入正题。
一、工具篇（软件篇）
结合官方推荐，总结如下：
1、Firefox，简称FF。这个……好像是废话 ＝ ＝||官方推荐 安装DOM Inspector，我装了，好像正常不能启动，所以从来没 用过。- -|建议安装。
2、压缩、解压软件。winzip，winrar就足够了。
3、制图软件，推荐Photoshop（简称PS）。其他也可以。至于w indows自带的画笔。。。好像就太简陋了点。。。。。。
4、文字编辑软件，windows自带的记事本和写字板足够了。

个人建议可以准备如下资料：
1、搜索软件，当然windows自带的搜索功能也够用了。
2、看图软件，winxp自带的浏览功能也可以。（55555555～～ ～我的机器只能装win2000）
3、CSS编写辅助软件，TopStyle，不过别寄太多的希望～～
还有《样式表中文手册 》网上有下，同样不必寄太多的希望～ ～
4、成套图片素材。

软件可以下，素材可以找，大家可能对做主题的人有什么技术上的要求 更关心一点：
1、细心。
2、耐力。
3、能禁得住别人鄙视。（= =||）
这就足够了。

对以下内容或技巧足够了解的话，有助于你的效率：
1、photoshop
2、CSS
3、DOM Inspector
4、英语
如果上述四项都不过关的话。。。。。。
哈哈，握手，那你和我的水平是一样的，我们一起开始我们的f irefox主题制作的研究吧。

二、解压、制作与安装

大家都知道，下载的主题是一个jar文件，其实这就是一个zip 文件。把后缀名改成zip，就可以解压了。
以唐韵为例，把唐韵解压到一个文件夹下，文件夹下面应该有 如下内容：
文件夹: browser
文件夹: communicator
文件夹: global
文件夹: mozapps
文件: contents.rdf
文件: icon.png
文件: install.rdf
文件: preview.png
（见图1）
PNG是图片文件，icon.png是唐韵的图标，preview.png是主题 管理器(themes)里面预览的图片。（=  =||图片中灰色是因为windows不支持png文件的透明～～～）
你可以继续浏览各文件夹，可以看见里面有该主题所有图标， 都以图片方式放在里面，还想什么？拿起ps，把图片改成你喜 欢的。（如果你的水平不幸和我相似，那= =||我们不会做图， 我们改其他浏览器的皮肤可以吧～）

简单的说：
各文件夹里主要是以.png为后缀名的图片文件和.css为后缀名 的样式表文件。
.png图片文件主要用于firefox各部件的图标，.css文件可以用 记事本（写字板）打开，主要是各个部分的风格设定。啦啦， 你问怎么设定的？这就需要.css知识了。（偷偷告诉你，我也 不会的 = =||技巧问题，我们改天讨论。）

改好了的文件怎么放回去，聪明的你一定想到了，压缩后，把 后缀名改回.jar，拖到主题管理器(themes)中。
这里有一个问题，如果你已经安装了唐韵，必须先卸载再安装 。
当你把唐韵改得面目全非后，你当然不愿意这个主题再叫唐韵 ，而且你也不愿意你的主题和唐韵不能共存（为你支持唐韵， 一鞠躬～），所以还要做如下修改。

首先改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">
-----以上内容不能修改。
  <em:id>{85F35110-E42C-4a89-895B-1165361DBFB1}</em:id>
-----如果你要发布一个单独的主题，必须有一个自己id，这个 id官方说有三种方法取得，微软的GUIDGEN程序，Unix下面那什 么什么软件（不懂的说），还有到molliza官方irc用一个什么 什么命令可以得到。
    <em:version>0.02</em:version>
-----主题的版本，你自己编吧。

    <!-- Target Application this extension can install  into,
         with minimum and maximum supported versions.  -->
    <em:targetApplication>
      <Description>
 <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
------以上内容不能修改。特别是此处的id，修改以后不能安装
        <em:minVersion>0.10</em:minVersion>
        <em:maxVersion>1.01</em:maxVersion>
------适用的firefox最小和最大版本号，可以不修改。
      </Description>
    </em:targetApplication>

    <!-- Front End MetaData -->
------以上内容不能修改。
    <em:name>唐韵·Tang</em:name>
------主题名称
    <em:description>Tang,the Chinese skin. 纪念曾经的
myie2，为了喜爱的firefox</em:description>
------主题的简介
    <em:creat
or>Design by imrockit and HgS, Modify by  Lococo</em:creator>
------主题的设计者，在里面写你自己的名字吧     <em:homepageURL>http://www.firefox.net.cn</em:homepageU RL>
------主题的主页，呵呵，我用的主页很熟悉吧？
    <!-- Front End Integration Hooks (used by Theme  Manager)-->
-------以上内容不能修改。
    <em:internalName>Tang</em:internalName>
-------你的主题简称，建议简称不要太复杂= =||
  </Description>

</RDF>
-------以上内容不能修改。

contents.rdf文件也要做相应的修改 = =||虽然不改似乎也没 有什么影响
首先查找类似这样的句子， <li  resource="urn:mozilla:skin:Tang"/>
搜索 skin:后面的名字，这里是“Tang”，把“Tang”改成你 在install.rdf改得简称，也就是<em:internalName>后面跟的 名字～

现在，可以压缩，如果用winrar,记得压缩为zip格式，然后后缀名更名为jar,
现在你可以安装看看你的成果了，祝你玩的愉快。

---------
ps.看上去很复杂？其实是因为我说了很多废话，最后还要说的是：欢迎加入唐韵修订的队伍，打造最in的唐韵～～

Lococo
2005年3月6日
转载请注明出自www.firefox.net.cn

好东东阿

老兄，你真是太伟大了，再次谢谢你！！！

“CSS我基本是完全新手，以下内容部分取自网络。
http://www.w3cn.org/index.html 网页设计师

因为我学CSS只是为了做 FF的主题，所以很多只是知其然，不知其所以然。

先举例：
这是主题预览区域的一段CSS表述，老规矩，解说的部分用红字表出

/* :::主题预览区域::: */ /*和*/是注释标志，无作用。
.themePreviewArea{   {号前是设计部分的名称，主题预览区名是themePreviewArea，｛｝一对是描述的开始和结束，这些一般不能改。改了FF就不知道如何调用内容了
  border: 2px solid;每一句要有一个结束符;，这里定义的是边界，边界宽2px
  PADDING:10px;定义主要内容与边界的距离，这个叫不叫留白？
  margin: 10px 10px 10px 10px;定义边界与外界的距离= =||这句话好象应该放在border前面的
  -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow;定义上边界的颜色，前色是系统3D暗影，后色是系统3D色彩。不调用系统颜色也可以写成：#FFF #F00
  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;右边界颜色，前色3D 高亮，后色3D亮阴影
  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;底边界颜色
  -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow;左边界颜色
  -moz-border-radius: 4px;边界圆角设定，呵呵，上面5个好象是mozilla专用CSS代码
  background-image: url("chrome://mozapps/skin/extensions/themebg.png");背景图像。
}结束符，千万别忘记了

这里主要注意一下图片的引用，应该是这样的格式，
url("chrome://mozapps/skin/extensions/themebg.png")
和我们习惯描述window下的引用有不同
ulr("chrome://   图片来自于主题，不用改。
mozapps   还记得打开主题，下面的文件夹名么？这是图片所在的第一层文件夹名。也就是mozapps文件夹。
/skin  这个不能改。
/extensions/，  图片在mozapps下的extensions文件夹下
themebg.png，图片文件名
简单的说吧，就是2点
1、要加chrome://标记，代表引用主题压缩包中的图片
2、在第一层文件夹后面要加上/skin/。

附上css3D描述图，希望对大家有一点帮助。

------
呵呵
做主题不难，就是在判断哪块区域要改哪段CSS代码比较麻烦，很多的时候要反复试
但是这一块比用ps设计精美的图标还是简单多了
＝＝||我不会PS，不会自己设计图标，哭。
此外，要命的是我还非常没有创意，如果找不到的图片，就只能空着。

好帖. 支持一下楼主.
希望 唐韵 这个主题越来越好, 喜欢啊.

另: 菜单栏最右侧有个图标的吧, 原来.
感觉没有了还不太习惯呢, 我看楼就就把扩展里 更新的那个'八卦'的动画放在这儿好了, 没载入完就动, 完成了就停下, 停下图标颜色弄得稍浅一些就可以了.
另外, 状态栏的进度条, 能不能弄成连续的墨迹啊, 中间断一次感觉也不是很好, 楼主参考一下.

呵呵。楼上对进度条的看法和我有同感啊。
我试过，把那个图从中间截开，左右颠倒过来接上就挺不错的。

呵呵。把进度条改了一下....

还差RSS图标一套、
adblock 图标，这个找到了也不一定我能修改
滚动条按钮图片、
各部位背景图～～～～
继续研究css中～

然后我不喜欢最后 jar做的太大，有什么可以去掉的？

支持楼主.

另, 菜单栏右侧的图标偶知道改哪了, 我实验也出现那个图标了, 看楼主的主题里对应位置也改了, 但不知为什么没生效(在我这儿菜单栏最右侧是空的, 载入中不能显示动画), 以下是我改后成功的代码, 楼主参考一下.

/* ::::: throbber ::::: */

#navigator-throbber {
  -moz-appearance: none !important;
  -moz-user-focus: ignore;
-moz-box-pack: center;
list-style-image: url("chrome://browser/skin/icons/throbber-small.png");
min-width: 0;
height: 24px; 这个值可以调整菜单栏的高度
  margin: 0 6px !important;
padding: 0 !important;    
  background: transparent !important;
border: none !important;  
}

#navigator-throbber .button-box {
background: none !important;
padding: 0 !important;
}

#navigator-throbber[busy="true"] {
  list-style-image: url("chrome://browser/skin/icons/throbber-small.gif");
height: 24px;
}

另: 标签载入中的动画只播一遍, 画轴展开一次就停了, 我也动了一下, 改了一下那个Gif, 让它一直动, 直到完成(完成后好像会自动换成一只笔的图标).

再有, 希望楼主能改进一下 导航工具栏, 退, 进 的按钮, 退的按钮, 在按下去时会牵动整个导航栏右移, 不是很舒服啊.

标签载入中的动画的确只播一遍，我故意的。
原因：卷轴全启，网页全开，而不是网页打不开，卷轴居然合上重来，。。。。这个有点觉得没道理
update的太极图也是故意设定只循环放4遍的
原因：觉得它不停地转，肯定有人看着看着就会晕Di

那个进退的问题，现在正在修改～

卷轴全启，网页全开
===============

事实上, 网页可能没有载完, 或还是空页状态, 它就全开了. 载完会变图标的.

卷轴居然合上重来，。。。。这个有点觉得没道理
===============
不过, 即然楼主这么认为, 那就这样好了, 那样我可能就要麻烦一点, 载下你的更新来, 还要自己改下载入的动画, 希望楼主不要怪罪才好, 各有所好啊.

不知道为什么我得用代理才能连上这里
我还以为是社区出了问题
：（
已经更正到0.04了
coolstar14看来又要继续修改了。

ps.有什么精彩的地方一定要分享。

非常的棒！

楼主在标签上鼠标悬停后出现的信息的字体，字体颜色，背景颜色怎么改？