整理文章分类，基于 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!

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

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

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

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

可以看到宋体是完全的像素字体，处理复杂笔画很吃力；雅黑和 ClearType 的组合的特点是将文字横向渲染，这样横向的笔画基本保持不变；而 Mac 的文字渲染类似于图片的乘方平均算法。有意思的是，在另外的测试中，微软雅黑字体在 Mac 文字渲染下相当出色，而在自家的 ClearType 下复杂笔画汉字出现了黑团（第二图），不得不说 ClearType 实在是个半吊子的抗锯齿方案。

目前已经有 Windows 下模拟 Mac 文字渲染的成熟方案，下载运行 GDI++ 即可。注意 CPU 不支持 SSE2 的机器需要另外的 dll, 可自行搜索。如果将 GDI++ 加入启动自运行，可于快捷方式后添加 -on, 如：...gdi++gditray.exe "-on" (半角引号) 这样可以运行之后自动启用。宋体在 Windows 下是一个不可能完全铲除的字体，如果要彻底……可以用 Replacer 将 已修改好标签的华文丽黑 直接替换掉 %systemroot%\Fonts 下的宋体。

目前 Userstyles.org 上还没有更新到 1.3, 但是已经可以在作者的网站上 下载。Userstyles.org 上已更新。该皮肤支持 Firefox, Opera, Safari 等浏览器，如果不明白使用方法可以参考 作者的文章。由于目前还没有 1.3 的 Greasemonkey 脚本，（直接安装脚本）我又不想为此多安装一个 Stylish 扩展，于是偷个懒，把下载包里面的 css 文件复制到 %appdata%\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\userContent.css 如果这里没有这个文件，需要新建一个。

加载动画是一个有趣的小玩意，一般与页面风格保持一致，可以体现出设计者的用心程度。鲜果 最近也更换了加载动画，您喜欢哪一个？

抓虾 就更有趣了，它的加载动画在不同皮肤下配色不同：

另外在本次 Google Reader 更新之后，Colorful List View 似乎失效了，除此之外 我推荐过的几个 Google Reader 脚本 都还好用。特别是 Google Reader title unread count, 把 title 中的未读计数提到前面来，在显示宽度不够的时候非常实用。下面是我 Firefox 下的 Google Reader 截图：

eMule 的工具栏图标可以直接调用 448x32 的 png 图像，只需要在工具栏右键菜单里选择一个本地图片就可以了，效果如上。下面是几个可以用的工具栏皮肤，可直接保存下来使用，更多可访问 eMule Skin Database.

Update: 由于上传 wp, 文件名被过滤的原因，另存图片之后需要把文件名改成 xxx.emuletoolbar.kad02.png 的样子，即是在 emuletoolbar 前后各加一个点。谢谢 某果 提醒！

要定义个性名称，需要修改 %ProgramFiles%Mozilla Firefoxchromeen-US.jarlocalebrandingbrand.dtd 里面定义的长名称 Mozilla Firefox 和短名称 Firefox. 其中 jar 是压缩包，可以用 7-Zip / WinZip / WinRAR 打开，dtd 则可以用任何文本编辑器比如记事本编辑。注意写入 jar 的时候需要关闭 Firefox. 类似地，关于信息里面的图像可以在 %ProgramFiles%Mozilla Firefoxchromebrowser.jarcontentbranding 里找到，如果您也想改一改的话。

这样仅仅是改了名称，如果您到 官方扩展站 去找些皮肤，再配合上我介绍过的 修改主程序图标、修改浏览器标识，完全可以把 Firefox 伪装成别的什么浏览器的样子，详细做法搜一搜很多的，我就不细说了。

写到这里，美化教程基本上就算收尾啦。下一步打算分享一些 使用技巧，请多关注：）

在 Firefox 的安装路径如下目录放置一个图标文件 main-window.ico 然后重启 Firefox，就这么简单。这个路径的典型位置是：

%ProgramFiles%\Mozilla\Firefox\chrome\
iconsdefault\main-window.ico

如果没有这个目录那么自己新建就是了。但是这只会改变主窗口的图标，如果打开书签窗口什么的还会是默认图标。那么类似地，在这个目录下继续放置：

bookmark-window.ico
deviceManager.ico
downloadManager.ico
extensionsManager.ico
help.ico
jsconsoleWindow.ico
loadDevice.ico
metadata.ico

可以改变相应窗口的图标，按需添加。

然后说武的：参考主程序 firefox.exe 内置图标的尺寸和格式找到或者做好图标，用 Resource Hacker or eXeScope 打开 exe 替换之。提供一个用题图做成的图标 下载，格式和 firefox.exe icon:0 相符，可用于直接替换。该图标版权属于 Everaldo.

去掉工具按钮的下拉箭头

工具按钮旁边的下拉箭头（比如前进、后退按钮右边）没有多大实际作用，点右键就可以弹出下拉菜单，这比按那么小的箭头方便多了。况且很多时候我都是用快捷键代替，或者把后退按钮绑定到鼠标中键，这对 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 的时候搜索框宽度为当前搜索引擎名称的显示宽度。
• 随着字符的输入，搜索框逐渐变宽。
• 回车之后清空已输入的文字。（可选）
• 回车之后跳转回默认搜索引擎。（可选）

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

Hide Menubar

这是最为简单易用的一个，单击 Alt 显示菜单栏，操作完毕自动隐藏。支持 Alt 组合键。

Compact Menu 2

它在 Firefox 1.5 上就已经非常流行，将所有菜单项组合成一个下拉菜单按钮，这个按钮可以放到工具栏上，甚至书签栏前端，按钮图标也可以自定义（需要手动替换扩展目录里相应 .jar 文件里面的资源，具体方法在 上一篇教程 里有提到）

Personal Menu

这个扩展是由 Compact Menu 发展而来的，扩充了几个实用功能：

• 包含上面第一个扩展提供的 Alt 呼出菜单栏功能。
• 自定义菜单项目。可以对菜单里面的内容排序、隐藏，也可以把常用的提到上级目录来，比如我的 Options... 和 Add-ons 就和 File, Edit 等并列且在最前。
• 如果您不喜欢 Firefox 默认在侧边栏展开书签和历史的工具栏按钮，可以换用本扩展提供的书签按钮和历史按钮，它们都是下拉菜单方式，并且可以自定义中键、右键动作。

它提供的历史按钮允许您自定义最多出现多少条浏览历史，在设置里也可以很方便地把除了历史条目之外多余的菜单项隐藏掉。通用的隐藏菜单项方法可以参考我以前的文章：隐藏 Firefox 各处右键菜单中的多余项。下面是我的浏览器效果图，经过了 图标加工 和 菜单精简：

但是既然 上一篇教程 我们用 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; }

何不自己动手diy呢？在下面的例子中可以看到，并不需要很多的工序，你只需要找到合适的大类图标，比如视频图标，音频图标，再加上后缀名称作识别，效果也会非常好，而且直观易于识别。OK，现在我有一个空白的文件图标和一个音符图标（透明背景的png格式），如何来制作一个mp3文件图标：

在Photoshop中打开png图像，把它们按照你喜欢的布局组合到一起。然后用文字工具在合适的位置添加文字，mp3, ogg, wma, 随便什么啦，调整满意之后另存为png图像，也可以把Photoshop文档存下以备今后使用。

最后用图标工具（比如 Stardock IconDeveloper ）把 png 转成 ico：不必输出太高的分辨率，一般WinXP系统图标最多64x64，所以输出五种分辨率，16x16, 24x24, 32x32, 48x48, 64x64, 一定要带alpha透明通道，比较低的色彩格式比如256色什么的没有必要带上。
要注意改变图像大小的时候的像素重组方式，千万不要用邻近像素的方式。可以多试试，选择合适的。

如果你 Photoshop 这些都很熟练的话做起来会非常快。在本文开始的地方我提供了一个我做过的东西的预览图，如果有朋友需要的话可以放出 psd 模板下载，或者我做过的 png/ico 下载。

注：部分素材来自苹果操作系统 Mac OS X Tiger.

老的下载地址失效了，我搜了很久也没找到，于是提供一个汉化破解版，这次文件放在我自己的网络硬盘，保证不会失效：
Windowblinds 5 (5.5(build92*86)) 破解版 备份地址

刚试用了一下，里面带的 VistaWT3 主题是远景出的，相当不错，在我的配置下有任务栏和开始菜单的玻璃半透明效果，Aero 出不来，不知道高配置的 WinXP 下出不出得来。

不过我还是用回 WB4.6 了，放不下 Steve Grenier 的 经典 Tiger 作品 啊……hoho

搜狗的快捷菜单做得还是很贴心的，不需要一直显示输入状态栏，需要按菜单的时候打两个字符，就有菜单按钮了