IE8分组标签颜色的定义与自行修改

互联网 | 编辑: 吴宏 2009-04-08 00:30:00转载

IE8浏览器新增的一个特色功能就是标签(选项卡)的颜色分组。在默认设置中,IE8的标签初始为淡蓝色(RGB=227,238,251),第一次分组后变化为浅绿色(RGB=140,227,190)、第二次变化为冰蓝色(RGB=185,205,246)、第三次变化为淡黄色(RGB=255,251,209)、第四次变化为浅紫色(RGB=222,160,228)。如果继续出现第五次分组,将重新由浅绿色开始重复四色循环。直到相同颜色的同组标签被关闭到只剩一个,或者用户手动撤消颜色分组,标签才会恢复为默认的淡蓝色。如果希望自己修改IE8标签在初始状态以及四种分组时使用的颜色以及颜色的轮换顺序,可以参考本文。
在默认的设置中,IE8定义的淡蓝-浅绿-冰蓝-淡黄-浅紫的颜色顺序是固定不变的,用户无法自行修改这些颜色或调整其出现的先后顺序。对于有些用户而言可能觉得无所谓、能用就行;而对于包括笔者在内的另一些用户来说,可能很希望自行设置IE8的分组标签颜色。主要原因有:

1.默认的五种颜色都有些偏冷,需要红色、橙色、紫色等暖色调加以调和;

2.默认的五种颜色轮换顺序缺乏规律可循、不容易记忆,如果能够按照红-黄-绿-蓝-紫的大致的彩虹顺序轮换则比较醒目,同时也方便用户想起这是第几次分组;

3.众所周知在同一IE窗口中每次只能有一个标签处于前台、其余标签处于后台,在IE8默认设置中只有那一个处于前台的标签拥有颜色渐变、处于后台的其它标签都是单调的纯色,应该加以修改,使后台标签也具有颜色渐变;

4.当鼠标悬停在处于后台的标签时,这个标签的颜色改变很不明显,用户不太容易根据颜色变化判断鼠标是否已悬停在后台标签上。

综合以上原因,笔者决定对IE8的分组标签颜色进行一次彻底的修改。

IE8的分组标签颜色由IE8程序文件Windowssystem32IEFrame.DLL中的UIFILE定义,使用ResourceHacker打开此文件(推荐用ResourceHacker,eXeScope修改UIFILE不如ResourceHacker方便),展开UIFILE分支,WindowsXP用户修改UIFILE中的20481、WindowsVista用户修改UIFILE中的20737。

1.后台标签的单色修改:

按照由简至难的顺序,我们首先修改单色的后台标签。在UIFILE中搜索字符串rgb(227,238,251),找到下列语句:

<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(rgb(227,238,251),buttonface)"/>

这段语句定义了后台标签初始的淡蓝色(RGB=227,238,251),我们可以根据自己的喜好将其修改为自定义颜色的RGB值。

接下来紧随着这段语句,我们可以看到:

<ifclass="group1"><IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/rgb(140,227,190)"/></if>

这段语句即定义了当IE8进行第一次分组时,将标签变化为浅绿色(RGB=140,227,190)。

依此类推,我们可以继续找到<ifclass="group2">、<ifclass="group3">、<ifclass="group4">,分别代表第二次、第三次、第四次的颜色变化,根据自己的喜好修改相应的RGB值即可。

附注:IE8后台标签默认颜色设置对照:

初始值:(RGB=227,238,251)
第一组:(RGB=140,227,190)
第二组:(RGB=185,205,246)
第三组:(RGB=255,251,209)
第四组:(RGB=222,160,228)

2.后台标签由单色到渐变色的修改:

下面笔者介绍一下如何将后台标签由单色升级为渐变色,如果希望保持后台标签为单色,可以跳过这部分内容。

以后台标签初始的淡蓝色语句为例:

<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(rgb(227,238,251),buttonface)"/>

这段语句中的rgb(227,238,251)定义了这是一个淡蓝的单色(RGB=227,238,251),如需将其修改为渐变色,需要将rgb(XXX,XXX,XXX)替换为gradient(rgb(XXX,XXX,XXX),rgb(XXX,XXX,XXX),1)。例如:

假设将
<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(rgb(227,238,251),buttonface)"/>

替换为
<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(gradient(rgb(195,221,251),rgb(242,246,251),1),buttonface)"/>

那么后台标签就可以由默认的淡蓝色(RGB=227,238,251)升级为从(RGB=195,221,251)到(RGB=242,246,251)的淡蓝色渐变了。

依此类推,<ifclass="groupX">后面的语句也可以按此修改,从而将所有分组的后台标签全部由单色升级为渐变色。

3.鼠标悬停在后台标签时的颜色修改:

在IE8的默认设置中,当鼠标悬停在后台标签时,后台标签会从单色变化为一个不明显的渐变色。例如初始的淡蓝色(RGB=227,238,251),悬停时会变为从(RGB=163,201,248)到(RGB=242,246,251)的淡蓝色渐变。虽然悬停后换成了渐变色,但却与默认的单色实在太接近了。

笔者认为当鼠标悬停在后台标签上时,还是按照IE7的方案将其改变颜色比较醒目。在IE7的默认设置中,后台标签原本为银色渐变、鼠标悬停后显示为淡蓝色渐变,比IE8醒目多了。

如需修改鼠标悬停在后台标签时的颜色,在UIFILE中搜索字符串(rgb(163,201,248),rgb(242,246,251),找到下列语句:

<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(gradient(rgb(163,201,248),rgb(242,246,251),1),buttonface)"/>

这段语句定义了当鼠标悬停在后台标签时初始的淡蓝色渐变,我们可以根据自己的喜好将其修改为自定义颜色的RGB值。

依此类推,接下来紧随着这段语句可以依次找到<ifclass="groupX">,不过这些语句的格式略微有所改变,需要在最后重复一下此种渐变色在鼠标悬停之前的单色。例如<ifclass="group1">语句为:

<ifclass="group1"><IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(gradient(rgb(21,227,140),rgb(242,246,251),1),rgb(140,227,190))"/></if>

可以看到它重复了一下在鼠标悬停之前的浅绿单色(RGB=140,227,190)。我们按照它的格式修改相关的RGB值就可以了。

需要注意的是,如果之前已经按照方法2将后台标签由单色升级为了渐变色,在这里重复时也必须替换为相应的渐变色。

附注:IE8鼠标悬停在后台标签时默认颜色设置对照:

初始值:从(RGB=163,201,248)到(RGB=242,246,251)
第一组:从(RGB=21,227,140)到(RGB=242,246,251)
第二组:从(RGB=122,163,245)到(RGB=242,246,251)
第三组:从(RGB=255,240,45)到(RGB=242,246,251)
第四组:从(RGB=204,108,214)到(RGB=242,246,251)

4.前台标签的渐变色修改:

现在还剩下最后一个修改的元素,就是IE8窗口中唯一的一个处于前台的标签。前台标签在默认的设置中也采用了渐变色,但是也与后台标签相差不大。好在这个唯一的前台标签比其它后台标签要高一些,因此颜色接近的问题可以忽略。

如需修改前台标签的颜色,在UIFILE中搜索字符串(rgb(195,221,251),rgb(242,246,251),找到下列语句:

<IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(gradient(rgb(195,221,251),rgb(242,246,251),1),gradient(buttonhighlight,buttonface,1))"/>

这段语句定义了前台标签的渐变,我们可以根据自己的喜好将其修改为自定义颜色的RGB值。

依此类推,接下来紧随着这段语句可以依次找到<ifclass="groupX">,不过这些语句的格式略微有所改变,需要在最后重复一下此种渐变色的第一种颜色。例如<ifclass="group1">语句为:

<ifclass="group1"><IETabOverlaybackground="http://img-article.pchome.net/00/38/59/51/themeable(gradient(rgb(104,218,169),rgb(242,246,251),1),gradient(rgb(104,218,169),buttonface,1))"/></if>

可以看到它重复了一下渐变色的第一种颜色(RGB=104,218,169)。我们按照它的格式修改相关的RGB值就可以了。

附注:IE8前台标签默认颜色设置对照:

初始值:从(RGB=195,221,251)到(RGB=242,246,251)
第一组:从(RGB=104,218,169)到(RGB=242,246,251)
第二组:从(RGB=159,187,243)到(RGB=242,246,251)
第三组:从(RGB=255,244,139)到(RGB=242,246,251)
第四组:从(RGB=215,141,223)到(RGB=242,246,251)

至此,我们便完成了后台标签、有鼠标悬停的后台标签、前台标签在初始值以及四种分组时的全部颜色修改。根据上述方法,我们完全可以按照自己的喜好,设计一套属于自己的IE8分组标签颜色方案。笔者个人建议可以将默认顺序“淡蓝-浅绿-冰蓝-淡黄-浅紫”按照彩虹的大致顺序修改为“淡紫-淡红-淡黄-淡绿-淡蓝”。

最后说句题外话,笔者个人认为IE8的这种设定并不算很智能。假设我正在用IE8查看cnBeta,有十几条感兴趣的新闻想看。可能我第一次点开了三条新闻、三个标签,看完后逐一关闭;第二次点开了两条、看完又关闭;第三次又点开了三条...这时IE8的标签就会反复不断地变色,看起来太花哨了。其实无论我打开多少次,这个窗口的所有标签都是来自cnBeta的,并没有必要进行颜色分组。只有当我在这个窗口中打开了除cnBeta外的其它标签时,才真正需要用颜色加以区分。

假如IE8不是以“在新标签中打开”的方式决定是否颜色分组、而是通过对比每一个标签对应的地址是否来自同一站点决定是否颜色分组,效果可能会好一些。笔者希望IE后续版本能够加以改进。

相关阅读

每日精选

点击查看更多

首页 手机 数码相机 笔记本 游戏 DIY硬件 硬件外设 办公中心 数字家电 平板电脑