对以前评论过的人隐藏资料输入部分

这个功能在很多博客都可以看到，让常客不再重复看到资料输入框，需要的时候点击就可以展开修改。另外预先显示评论者自己的全球阿凡达，用回形针别在右上角。下面欢迎来自天鹅海的组合大城小爱里的，小爱同学 做群众演员：

js 隐藏代码参考了 享总的文章，另外多了个享总没有提到的细节，展开和收起按钮按下之后会把焦点放到相应的输入框内，也就是多执行一个 .focus(); 以下是“更改”按钮 onclick 时执行的 jQuery 脚本：

$('#author_info').slideDown('fast');
$('#author').focus();
$('#show_author_info').hide();
$('#hide_author_info').show();

如果访客 cookies 中有曾经评论过的 email 信息，则预先显示头像。在 comments.php 中合适的地方先判断是否存在 email, 如果有则输出一个头像。

<?php if ( $comment_author_email ) {
    echo '<a href="...">' . get_avatar(
    $comment_author_email, 40 ) . '</a>';
} ?>

为了看上去生动些，头像被旋转了 10 度，这是用 CSS 实现的，参考我那篇关于 CSS3 动画的文章。这有一些浏览器的局限性，比如 Chrome Windows 一直有个 bug, 在图像被旋转后，边缘不能反锯齿；Firefox 则一直不能对无 padding 的图像进行圆角，除非图像处在背景中。于是我把 Firefox 下链接的 border 圆角也一并拿掉了。

动态的输入框浮动

GluedIdeas Subtle 主题原来是有输入框浮动的，但使用的是 position: fixed; 现在改成 jQuery 来做，在页面滚动的时候浮动是动态的了，顺便还兼容了 IE. 代码来自 CSS-Tricks.

可展开的表情按钮栏

表情按钮收起来了，放在大输入框内，点击则展开。同样是由 jQuery 来执行的，按钮按下的时候做三件事情：焦点放到大输入框里去；用 jQuery .toggle() 脚本来展开或收起表情按钮；按钮本身切换一个 class, 在笑脸和关闭叉叉之间切换。

$('#comment').focus();
$('#smilies_toolbar').toggle('fast');
$('#toggle-smilies').toggleClass('close');

新的评论回复样式

回复别人的评论时出现一个黄色的提示条，类似于博客界出名的 绿条禅，同时有个小箭头指向被回复的评论。

评论回复是基于枫叶的插件 WordPress Thread Comment, 经过了枫叶和我的一些修改，目前这样已经完全符合我的需要了。喜欢这个插件的朋友不妨去插件页进行捐助，支持开发。

评论列表

左侧评论列表也有一些小的变化，比如回复会比较小一些，编号字体换成了 Georgia, 以前我没有放上每条评论的链接，现在也放在了编号上，只不过颜色还是灰色的。

最后

如果出现显示问题可能需要刷新一下，避免使用浏览器缓存，最近的改动挺多的。另外如果您发现滚动很卡，可以回复我说一下浏览器和电脑配置

更新

本文发布 3 小时，评论数达到 98 条，当然主要是几个朋友在疯狂灌水啦，除了我自己之外差不多就是：ELL Jimmy Xu Sunny lisker, 大家都在盖楼──往地下室盖。

WordPress Thread Comment 这个插件是限制回复层数的，但仅仅是在超过层数的时候不输出回复按钮，而数据发往服务器并不验证。之前在 @terryxxy （上面的 Sunny）博客上我就在说，改动很简单，只需要 Firebug, 或者 Safari, Chrome 上类似的自带调试工具。找到评论输入框下面用来发送相关数据的两个 <input type="hidden">:

<p>
    <input type="hidden" id="comment_reply_ID"
    name="comment_reply_ID" value="0" />
    <input type="hidden" id="comment_reply_dp"
    name="comment_reply_dp" value="0" />
</p>

在 value 里填入想要回复的评论 ID 和深度 dp 就可以了。这也是按了回复按钮之后会通过 javascript 修改的两个数值。这样就可以无限回复下去了。你猜最后回复到了地下多少层？B31! 以前我只在回复前标一个 "Re", 今天为了大家盖楼方便，把地下楼层编号 B2 B3 也输出了

然后新的问题出现了，每层回复都会在左边缩进，比如 margin-left: 20px; 算算地下 31 层得多少，早就撑破了。锲而不舍的 Jimmy Xu 同学不光一直往下破，而且还在截图

于是呢，我在插件设置页加入了一点判断，当楼层数 $deep > 14 的时候多输出一个 class="min-width", 然后让它 margin-left: 0; 效果是在地下 14 层之后不再缩进。但 Jimmy 同学 觉得不满意，最后我的方案：

<?php echo ' style="margin-left: ' . ceil(30/sqrt($deep)) . 'px; "'; ?>

进行了 margin-left = 30除以(楼层数开平方)再取整，第一层回复 30px, 第四层 15px, 到第 25 层，margin-left 就只有 6px 了。于是呢，从线性变为弧线，看看最后的效果：

另外下面是 @terryxxy 在 70 条评论的时候的截图，点击查看完整全图 http://img.ly/z8O

C S S不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画，里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘，IE8 都不行，在这个 IE 特别是 IE6 居高不下的国度怎么办，由它去吧。

兼容性

据 MDC 的文档，支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的，但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示，但比较弱，阴影不能模糊。

阴影文字和发光文字

一个最简单的阴影文字是如下这样写的，其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值；5px 代表阴影的模糊半径，取值越大，阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。

text-shadow: 1px 2px 5px #888;

text-shadow: 0 0 10px #fd8;

浮雕文字

浮雕文字效果在 Mac OS X 和 iPhone 中随处可见，由于阴影半径很小，一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则：深色文字浅色背景，用白阴影，浅色文字深色背景，用黑阴影。

text-shadow: 0 1px 0 #eee; 凹进效果

text-shadow: 0 -1px 0 #123; 凹进效果

text-shadow: 0 -1px 1px #eee; 凸出效果

text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/

多重阴影

在上面所列的新版浏览器中都已经支持多重阴影，可以达到一些特殊的效果，不过注意，如果文字和背景颜色接近，IE 下就杯具了。

text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;

text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;

text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;

text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;

text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

鼠标悬停切换

让鼠标悬停的时候改变状态是个不错的主意，有很强的互动的感觉。阅读器中可能看不到效果。另外，在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影，这是另一个应用于块模型的阴影属性，写法和 text-shadow 一样，但需要写两条：-moz-box-shadow 和 -webkit-box-shadow.

把鼠标放到按钮上切换阴影

半透明阴影颜色

有时候需要做的阴影不想它模糊半径太大，又不能太黑，于是从黑色改为灰色──问题来了，灰色的阴影在深色背景上很难看。

text-shadow: 1px 2px 3px #888; 杯具了

这时候要用到 rgba 颜色，在红绿蓝之外还有第四个值 alpha 通道，取值在 0~1 之间。下面的阴影是黑色，但是半透明了。半透明阴影的适应性明显更强，在模糊半径很小的时候，也能透出底下的背景色来。

text-shadow: 1px 2px 3px rgba(0,0,0,0.5);

动态阴影

搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程，仅 Chrome, Safari 等 WebKit 浏览器有效。

把鼠标放到文字上，阴影在 0.5 秒内聚拢

上图是一个鼠标悬停动画的例子，如果将以下代码应用到全局 CSS 中，则所有带链接的图片都会有如上图动画：

a img {
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-out;
}
 
a:hover img {
    opacity: 1;
    -moz-transform: scale(1.05) rotate(2deg);
    -webkit-transform: scale(1.05) rotate(2deg);
}

如果要求仅应用于 class="logo" 的图片，则将选择器改为：

a img.logo {...}
a:hover img.logo {...}

如果要求应用于 id="footer" 的 div 下所有图片，则将选择器改为：

#footer a img {...}
#footer a:hover img {...}

到这里，所有的工作都完成了，挺简单吧？下面进入详细分析说明。

transform: 形变目标值设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);

上面的例子仅仅应用了 transform: rotate, 在鼠标悬停的时候逆时针旋转。除了 rotate, 还有 scale, translate, skew, matrix 等用法，想要深入把玩可参考 Animation Using CSS Transforms.

transform-origin: 形变中心点设定

兼容浏览器: Firefox 3.5, Chrome 2.0, Safari 3.1

-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;

默认值在对象的正中，X Y 值均为 50%. 更改数值可移动形变中心。下面两个例子，左边是 100% 100%(右下角), 右边是 0%, 100%(左下角):

transition: 过程动画设定

兼容浏览器: Chrome 2.0, Safari 3.1

-webkit-transition: all 0.2s ease-out;

-webkit-transition 是一个神奇的属性，它定义了动画过程的类型、时间、时间轴曲线。all 表示对所有变化应用动画，包括 transform, opacity; 后面两项是时间和时间轴曲线，可以有如下赋值：

以上 demo 来自 Transition Timing Functions, 展示了 transition 时间控制的强大，而且上面的 transform 是可以多重叠加的，配合 transition, 能做些什么大家想象一下吧！

opacity: 不透明度

兼容浏览器: 除了 IE

这是一个较为广泛支持的属性，前面早已没有了私有前缀(-moz, -webkit). 使用也很简单，让正常状态的图片稍微透明显示，鼠标悬停的时候恢复不透明，更加醒目。它同样可以在时间轴上受 transition 控制，试试看这个示例。

text-shadow: 文字阴影

兼容浏览器: Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 3.1

text-shadow: 0px 1px 3px black;

以上赋值分别代表 X轴偏移，Y轴偏移，阴影扩散尺寸，颜色。应用到按钮、标题等处有很好的浮雕效果，同样的风格在 Mac OS X, iPhone 系统界面中有大量应用。

结语

• 限于篇幅，本文示例所用的 CSS 不明文列出，有兴趣可以查看页面源代码，就嵌在正文中。
• 目前 CSS3 还在草案阶段，很多属性还有私有属性前缀，能兼容新属性的浏览器在用户比例上也还是少数。话说回来，谁指望 IE Trident? 屁股都要笑掉。
• Gecko 真的已经落后 WebKit 好多了，CSS, JS, 而且还没算上 WebKit 在 iPhone, Android 等移动平台的成就。Gecko 在这方面基本还是零吧。

Bright Focus

用 Stylish 或者 Greasemonkey 加载它，高亮颜色可以自己修改。它不光让输入框、按钮在激活的时候发光，连点击链接的 a:active 也发光了，当然，并没有改动 a:hover. 不过我个人并不太喜欢链接发光。不需要那么多行，只要两行就可以了，其实。

Outline Inputs Like Safari

这是一个极简单的脚本，只影响输入框和按钮，不过颜色和样式有点丑，需要修改。

自行添加到 userContent.css

这是我采用的办法，不需要扩展，修改 Firefox profile 下面的 userContent.css 实现，添加如下样式：

input:focus, select:focus, textarea:focus {
    -moz-outline: 2px solid #ebc476;
    -moz-outline-radius: 3px;
}

和上一个脚本相比，主要添加了一个 CSS 圆角。-moz-outline-radius 即是轮廓的圆角，-moz-border-radius 则是 上篇文章 说过的边框圆角。

让网站支持输入框高亮

以上修改是在用户本地进行的，要把它搬到您的网站或者博客中，只需要将上面的样式添加到 CSS 表中就可以了。由于我的输入框已经有了一个边框圆角，那么需要再增大一下轮廓圆角的半径，并加上 !important 让它优先：

input:focus, select:focus, textarea:focus {
    -moz-outline: 2px solid #ebc476;
    -moz-outline-radius: 5px !important;
}

整理文章分类，基于 Silk Icons 为每个分类加上图标：

并且在 Denis 的帮助下实现了侧栏“最新文章”“随机文章”前显示文章所属分类图标。加上之前的 评论者 favicon, 已经有点小华丽喽

翻页按钮的样式

赶潮流学习了下 CSS 圆角，于是将 Pagebar 翻页按钮样式化成这个样子：

圆角样式仅支持 Firefox, Chrome, Safari, 其它浏览器下仍是方角。有兴趣可以查看我的 style.css 另外 CSS 圆角也运用到了评论输入框、鼠标放到图片链接上的样式 等地方，就不细说了，推荐阅读 sofish 的教程。

左上角的加载标签

在页面加载的时候显示一个友好的提示，尽量挽留一下急性子的访问者吧。实现方法请参阅 aw 和 Shawn 的文章。

标签云链接的鼠标悬停颜色

Simple Tags 生成的标签云可以按文章多少自动分配链接的颜色，但是鼠标放到链接上就不再改变颜色了。试试看本文右边的“热门标签”，像普通链接一样有 hover 样式，代码如下：

.st-tag-cloud a:hover {
color: #E58802 !important;
}

题图和插图

图片的重要性是显见的，题图则可以一开始就吸引读者浓厚的兴趣。大猫 的题图一向很大很咸湿，我习惯用 128x128 的兔子图标。用 logo 做题图也不错，比如 cnBeta 的文章会自动套用话题 logo, 详细到有关鲍尔默的文章都有一个他的猴子头像。也许这样一个图片没有太多实际意义，但心理上的效果明显。不然门户网站的编辑为什么总要凑两张图片然后标题里称“组图”呢，就是要你点。

题图适合用浮动一侧的样式，按 ctrl+u 查看本文代码，就会发现我把题图所在的 <img> 标签放在了最前面，并加上了 style="float: left; margin-right: 5px" 让它浮动在左边。这个样式不适合用全局 CSS 来做，因为每个题图需要的边距都不同，而且自己定义的 CSS 样式不会传递到阅读器中。

插图不宜太大，如需大图，用缩略图做个链接。最近我给图片上的链接加了个样式，让读者更容易察觉链接，如右所示。（自定义 CSS 只在原文生效，阅读器里没有）如果觉得不错，可以在 代码 中搜索 piclink 查看。

如何强调和高亮

通常我们用 粗体 或者 高亮 来强调重点，但不可多用，不然就没有重点了。将文字弄成红色不是很好的办法，我的英文老师曾告诉我们 ALL CAPS is shouting, 所以我觉得红色的文字也显得不够礼貌。

html 格式标注的使用

行文中常用的 html 格式标注包括 h3, h4, ul, ol, li, blockquote 等，一般来说正文中的子标题不应该太大号，h3, h4 就可以了。ul 叫做无序列表，ol 叫做有序列表，li 用来标注列表中每一条项目，blockquote 是区块引用。写列表时，手动写入 1...2... 是很不规范也没有效率的做法，应该使用 html 标注，多用用编辑器的预览模式和代码模式，很容易学会：

这是一个区块引用，可看作一个有缩进的段落。引号图片是在 CSS 中定义的，在阅读器中不会有。

上面的例子中我将 ul 每条项目前做成了绿色圆点图标，这是在本站 CSS 中定义的，到阅读器中不会有这样的效果，但 ul, li 作为标准 html 标注，一般会被显示成黑色圆点的样子，标题字号、行距什么的都不会错，只是会换成缺省样式，或者阅读器里定义的样式。

合适的子标题、列表可以让文章层次分明，井井有条。如果对它们应用样式，推荐在全局 CSS 中进行，不宜过多地将格式写到 style="" 中，麻烦不说，到阅读器中就会花花绿绿的了。一个典型的错误就是指定整段文字的颜色，要是博客是深色底浅色字，到阅读器里就成浅色底浅色字了。使用 CSS 可以让样式具有更大的适应性。

写完了

OK, 如果您读到这里，就说明我这篇文章还不算失败

使用方法

下载 Gmail 皮肤 和 Google 日历皮肤，把这两个 CSS 文件放到 Firefox 配置文件夹下的 chrome 文件夹，编辑这个文件夹下的 userContent.css (没有则新建一个), 添加两行：

@import url(gmail.css);
@import url(gcal.css);

重启 Firefox 就可以了。或者用 Stylish 直接加载上面的 CSS.

常见问题

这两个皮肤定义的字号都小于宋体的标准字号 12px, 中文显示效果不是很好。解决办法是将 Firefox 选项 › 内容 › 字体&颜色 › 高级 › 最小字体大小 定义为 12, 这会影响所有网页。或者，老肥推荐使用 gdi++ 渲染的强抗锯齿字体，真的比宋体好看不是一点点。

我们期待

下图来自作者网站，他们的下一个发布将是 Google Reader Redesigned!

更新：感谢 鲜果 Plus 脚本的作者 CIH 的推荐，这样鲜果用户也可以实现自动全文了

您需要使用 Firefox 的用户脚本管理器 Greasemonkey, 它近日更新的 0.8 版已支持最新版本的 Firefox 3. 让 Google Reader 获取全文 feed 的脚本是 google reader full feed changer, 或者 直接安装它。装好之后，离完成就只剩最后一点点设置了：

以 新浪体育新闻 为例，打开一篇新浪上的原文，按 ctrl+u 查看页面源代码，发现正文部分是用 <div class="artibody"> 标注的，那么修改一下刚才的脚本，该脚本通常位于 Firefox 配置文件夹下：

%appdata%\Mozilla\Firefox\Profiles\****
\gm_scripts\googlereaderfullfeedchan.user.js

编辑它，在第九行以下，添加一个 SITE_INFO:

{
  url: 'http://(sports|rss).sina.com.cn',
  xpath: '//div[@class="artibody"]',
  charset: 'gb2312' //非必需
},

保存脚本文件，F5 刷新 Google Reader, 看看新浪的 feed 吧，已经是文首截图的样子了 现在您知道了如何添加一个 SITE_INFO, 添加一下您需要看全文的 feed 信息，以后就省事喽。注意事项：

• 如果网站域名和 feed 域名不一样，需要把两个域名都写进去，比如：

  url: 'http://(site.com|feed.feedsky.com)',

• class 和 id 都可以识别
• 如果出现乱码，在该网站页面源代码中搜索 charset, 设定进 SITE_INFO 中
• 目前该脚本还不能对付 cnBeta, 因为 cnBeta 的文章地址设置了一个跳转重定向。没关系，订阅 feeds.feedburner.com/cnbeta_full 就好了

.widget li {
  white-space: nowrap;
  overflow: hidden;
}

视其父容器属性的不同，在 IE 下可能无法截断，那么在上面两句后再跟一个 width 定义就可以了。如果不喜欢一个字被切成两半，或者想多显示一行引言，可以这样做：

.widget li {
  height: 3.6em;
  overflow: hidden;
}

这里是给每个 <li> 限定高度，溢出部分截断。em 是一个相对的单位，调试一下选一个合适的数值，一行两行都可以实现，像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性，我没有试过，不知道好不好用

• 内部链接

  内部链接一般是推荐一下读者可能会感兴趣的以前的文章，可以增强关联性。它可以一定程度上打击抄袭，虽然有些人会把链接抹掉，但总比没有的好。我的 favicon 设计系列 被很多人转载过，其中不乏故意隐匿出处的人，但由于插图多，他们没工夫挨个删，里面的内部链接也跟着幸存下来了。还有一篇 如何为 blog 建立一个高效的标签系统，我故意在文中留下了一个纯文本的链接（当然也是为了展示 URL 的需要），它也在抄袭者手中幸存了。在这样一个大环境里，对付抄袭没有什么特别有效的办法，但是也不要老是在文中提自己的名字——照顾一下正经读者的感受吧。

• 外部链接

  外部链接就是方便读者点击相关内容的，很重要。最好给链接加上 title 属性（鼠标放上去显示的文字），描述一下这是一个什么内容，比如写上对方文章的标题。这样读者可以自己决定看不看，有个预览。

• 是否在新标签中打开

  在本页打开的链接，读者可以自行决定是否新标签，而在新标签打开的链接，基本上是强制性的。有个现象，就是国内网站的新标签链接远远多于国外网站，从门户到论坛，大家已经习惯被剥夺选择权了。这个很难一刀切，在新标签打开吧，容易招致反感；在本页打开吧，读者可能就忘了回来，况且新标签是有实际作用的，当读者需要新老都保留的时候。我这里是内部链接本页打开，外部链接新标签。当然不是说就推荐您这么做，但我的个人忠告是内部链接最好不要新标签，内部和外部是两个系统，我不希望我的标签栏被一个网站占据。

• 给读者一个新标签提示

  更进一步的说，一个链接是否新标签并不直观，给读者选择权的同时，是否能够像链接的 title 那样，有个预览和心理准备？这里我推荐一个 WordPress 插件 External Links, 它可以给外部链接自动加上这样的一个弹出小图标。如果您不是 WordPress, 或者像我一样希望不通过插件就实现这样的效果，也可以通过 CSS, 给链接的 a 标签加上 class="external", 然后添加 CSS 描述：

  a.external {
  background: url(...) no-repeat center right;
  padding-right: 13px;
}

  对以前的文章，我导出 xml, 搜索替换 target="_blank" 为 target="_blank" class="external" 再导入就搞定了。类似的，我还做了一个 下载图标。

• 已访问过的链接的区分

  这是一个看上去不显眼，实际上挺重要的东西，读者可以从链接的外观区分是否访问过，提高阅读效率。通常的办法有：改变颜色，加下划线、下点线等。我的代码：

  a, a:link {
  color: #bb6f02;
  text-decoration: none;
}
a:visited {
  text-decoration: underline;
}
a:hover, a:active {
  text-decoration: underline;
  color: #e58802;
}

  链接没有下划线，鼠标放上去有，访问过的链接也有。

差不多说完了，希望能对您有所帮助。祝天下所有小盆友们，和童心未泯的老盆友们节日快乐

echo $ns_options["start_html"];  //修改为：
echo "<li style='background-image: url(" . $url . "/favicon.ico)'>";

即用 $url 获取评论者的网站地址，将 /favicon.ico 作为列表图标。但是已知的问题有两个：没有 favicon, 或者 favicon 并不在默认地址。我用目前上榜的 5 个网友测试了一下，显示效果如下：

其中 kaka 的路径错误，kerby 和 Dickey 的文件存在，但显示有有问题。对前一种情况，总不能去分析对方的 header 来获取吧，太不现实。后一种情况，我也没弄明白为什么… 或者，可以让获取错误的时候显示 css 里定义的默认列表图标？欢迎高手给指导一下

去掉工具按钮的下拉箭头

工具按钮旁边的下拉箭头（比如前进、后退按钮右边）没有多大实际作用，点右键就可以弹出下拉菜单，这比按那么小的箭头方便多了。况且很多时候我都是用快捷键代替，或者把后退按钮绑定到鼠标中键，这对 Windows 资源管理器同样有用。去掉这些下拉箭头需要编辑 Firefox 配置文件中的 UserChrome.css，这个文件通常在:

%appdata%\Mozilla\Firefox\Profiles\
xxxxxxxx.default\chrome\userChrome.css

其中的 %appdata% 可以直接在资源管理器中输入，会自动定向过去，典型位置会是： C:\Documents and Settings\{USERNAME}\Application Data 。在 UserChrome.css 中增加一段：

.toolbarbutton-menubutton-dropmarker {
display: none !important;
}

重启 Firefox, 下拉箭头就了。用 { display: none !important; } 还可以隐藏掉很多东西，比如不常用到的右键菜单条目——请参考 如何隐藏 Firefox 各处右键菜单中的多余项。

减少工具按钮之间的间距

这需要改动当前皮肤，可以在配置目录下的 extensions 里面找到皮肤文件 .jar, 解压之后找到 globaltoolbar.css 搜索一下 "min-width", 不同皮肤语句写法可能不同，这里不详细说了。

隐藏“转到”按钮

相信这个按钮很少会被按到，因为大家在地址栏输入文字之后一般都直接回车吧。那么在地址栏输入 about:config ，找到布尔值 browser.urlbar.hideGoButton ，双击它，改成 true 。

可变的搜索框宽度

单纯改变搜索框的宽度可以在 UserChrome.css 中增加：

#search-container, #searchbar {
max-width: 400px !important;
width: 400px !important;
}

不过这里我推荐一个我一直用的扩展： Searchbar Autosizer :

• 方便地设定最大和最小宽度，最小设为 0 的时候搜索框宽度为当前搜索引擎名称的显示宽度。
• 随着字符的输入，搜索框逐渐变宽。
• 回车之后清空已输入的文字。（可选）
• 回车之后跳转回默认搜索引擎。（可选）

改完这些是不是觉得工具栏整洁了许多？如果您有好的点子欢迎指教！

但是既然 上一篇教程 我们用 Fission 实现了状态栏主要功能的向上整合，那么我们不妨也把 Gmail Manager 放到工具栏去，伪装成默认邮件按钮的样子（默认的邮件按钮已经被 Firefox2 拿掉了）：

1. 在 Gmail Manager 的设置中将所有 Gmail 帐户工具栏选项中的隐藏未读计数和隐藏邮件地址钩上，全局设置的工具栏选项中的打开帐户的时候重置未读计数不要钩。

2. 右击 Firefox 工具栏，在自定义中把 Gmail Manager 按钮拖到工具栏上合适的位置。做完这些，Gmail Manager 已经能在工具栏上工作了，正常的时候图标为红色，有未读邮件的时候图标变成蓝色，并且在窗口右下角弹出新邮件摘要。如果您希望对它的外观做一些美化，请继续阅读：

3. 首先要找到修改需要的图标，一般我们会把它改成和当前 Firefox 皮肤的工具栏图标风格一致的样子，可以去 Firefox 的扩展文件夹里找找皮肤里面带有的工具栏图标全集，在这里：（下面用我在用的皮肤 MacfoxII 为例）

%appdata%\Mozilla\Firefox\Profiles\
xxxxxxxx.default\extensions

找到皮肤所在文件夹里的 .jar 文件，用压缩工具解开它，搜索一下里面名字带有 "toolbar" 的文件，找到工具栏图标在 browsertoolbar.png 和 toolbar-small.png 里面，把里面的第一排邮件标准图标在 Photoshop 里切下来待处理，注意保留它的透明背景。

4. 在上面的扩展目录里找到 Gmail Manager, 打开 .jar 了解目标格式。 图和CSS 都在

gmanager.jarskinclassic

该处图标定义了离线、连接错误、正常、新邮件四种状态，并且有大图标和小图标两份。另外有两种尺寸的 loading gif 动画。下面是我做的，可以存下来替换掉该处同名文件：

本来我还自定义了 loading gif 动画：两个 throbber.gif，但 gif 和背景的融合比较麻烦，有兴趣可以自己做，过程类似。

5. 修改 overlay.css。上面的图标尺寸已经和原来的有了区别，所以必须在 css 里修改图片的 rect 值。找到 css 文件最末尾的 /*** Large icon images ***/ 和 /*** Small icon images ***/，改这 8 处图标的 rect 值，rect 如何知道？ 比如上面的新邮件大图标在 gm-large.png 中的 上，右，下，左 坐标分别为 0, 108, 26, 81, 那么：

.gm-icon[status|="gm-account-state-logged-in"][newMail="true"] {
-moz-image-region: rect(0px 108px 26px 81px); /* New mail */
}

6. 更新修改过的文件到 .jar 中（需要关闭 Firefox） ，重启看效果：

地址栏显示页面加载进度：
这是 Fission 的招牌功能，就不多说了，而且很多优秀的 Firefox 主题还内置有进度条样式，直接就可以和 Fission 搭配，比如我在用的主题 MacfoxII.

地址栏显示鼠标指示链接：
安装好之后在设置里面把这个功能启用就可以实现。也许您对默认的显示方式不满意，那么在

%appdata%\Mozilla\Firefox\Profiles\xxxxxxxx.default\
chrome\userChrome.css

中加入以下代码可以定义链接文字的样式：

#urlbar[fission-link] .textbox-input-box {
color: mediumblue;
background-color: aliceblue !important;
}

字体和背景颜色可以用 mediumblue 这样的颜色名称，也可以用十六进制代码，这里是颜色名称/代码表。上面的图例没有定义背景色，如果您高兴，也可以加些别的 CSS 样式比如字体、倾斜、右对齐什么的。

指示链接时的地址栏图标当然也可以改。准备好一个透明背景的手形图标比如左边这个，把它转换成 Base64 编码，替换掉下面这个文件里的

#urlbar[fission-link] #page-proxy-deck

字段里面，"base64," 之后，“)” 之前的内容：

%appdata%\Mozilla\Firefox\Profiles\xxxxxxxx.default\
extensions\
{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}\chrome\fission.jar\
content\fission\fission.css

下面的代码格式都是

需要隐藏的项目A,
需要隐藏的项目B,
需要隐藏的项目C
{ display: none !important; }

注意项目之间用半角逗号分隔，最后一个项目后面没有逗号。花括号里的是隐藏命令，!important 表示优先级。下面列出的可隐藏的项目看名字都是一目了然，我就不多解释了。
另外，#context-sep-stop 表示页面右键菜单“停止”下方的分割线，如果你把它上方的东西都隐藏了，当然应该把分割线也一并拿掉。类似的还有书签右键菜单中的 menuseparator。
编辑好需要隐藏的项目之后，把命令添加到 Firefox 的配置目录下这个文件中：

%appdata%\Mozilla\Firefox\Profiles\
xxxxxxxx.default\chrome\userChrome.css

如果没有这个文件就新建一个，默认状态下那里会有一个文件叫 userChrome-example.css ，用它另存也行。

隐藏页面右键菜单项：

#context-back,
#context-forward,
#context-reload,
#context-stop,
#context-sep-stop,
#context-bookmarkpage,
#context-savepage,
#context-sendpage,
#context-sep-viewbgimage,
#context-openlink,
#context-sep-open,
#context-bookmarklink,
#context-sendlink,
#context-sep-copyimage,
#context-sendimage,
#context-setWallpaper,
#context-printpage,
#context-smartsearch
{ display: none !important; }

隐藏书签菜单项：

menuitem[label="Bookmark This Page..."],
menuitem[label="Bookmark All Tabs..."],
menuitem[label="Organize Bookmarks..."],
menuitem[label="Organize Bookmarks..."] + menuseparator,
menu[label="Bookmarks Toolbar Folder"]
{ display: none !important; }

隐藏书签项的右键菜单项：

#bookmarks-context-menu menuitem[label="New Bookmark..."],
#bookmarks-context-menu menuitem[label="New Folder..."],
#bookmarks-context-menu menuitem[label="Sort By Name"],
#bookmarks-context-menu menuitem[label="Sort By Name"] + menuseparator,
#bookmarks-context-menu menuitem[label="Open All in Tabs"],
#bookmarks-context-menu menuitem[label="Open All in Tabs"] + menuseparator,
#bookmarks-context-menu menuitem[label="Open"],
#bookmarks-context-menu menuitem[label="Open in New Tab"],
#bookmarks-context-menu menuitem[label="Open in New Tab"] + menuseparator,
#bookmarks-context-menu menuitem[label="New Separator"],
#bookmarks-context-menu menuitem[label="New Separator"] + menuseparator,
#bookmarks-context-menu menuitem[label="Cut"],
#bookmarks-context-menu menuitem[label="Paste"],
#bookmarks-context-menu menuitem[label="Paste"] + menuseparator,
#bookmarks-toolbox #main-menubar
{ display: none !important; }

隐藏书签栏下拉最后的"open in tabs"

.openintabs-menuseparator, .openintabs-menuitem
{ display: none !important; }

隐藏工具栏上的下拉箭头，比如前进后退旁边的：

.toolbarbutton-menubutton-dropmarker
{ display: none !important; }

Acid2是由Web Standards Project所设计和发起的一项关于css标准支持以及各种html渲染的标准化测试，旨在促使各家浏览器推进网页标准化。你可以用你的浏览器访问一个由复杂的html/css语句所编写的考核页面，该页面应该呈现一个黄颜色的笑脸：

目前能通过测试的浏览器(内核名称)仅有: Safari(WebKit) / Opera(Presto) / Konqueror(KHTML)

Firefox 仍未能通过测试，据说测试中的3.0能通过。下图是Firefox 2.0.0.3(Gecko)的答卷：

我们再看看 IE7 和 IE6... 天哪怎一个惨字能够形容...

Internet Explorer 7.0 (Trident)

Internet Explorer 6.0 (Trident)