你的位置: iPc 首页 > 全部文章 > 应用技巧 > 阅读文章
科学X网    Office    苹果中国    微软中国    VPS

怎样自定义修改IE 8分组标签的颜色的方法

03
四月
Windows Internet Explorer 8 浏览器(以下简称为 IE 8)新增的一大特色功能就是标签(选项卡)的颜色分组。在同一个 IE 窗口中,如果某个(或多个)标签是在另一标签中点击链接、以“在新标签中打开”的方式打开的,IE 8 就会自动将这两个(或多个)标签以相同的颜色分组标记。(via Alxies)

怎样自定义修改IE 8分组标签的颜色的方法

 
在默认设置中,IE 8 的标签初始为淡蓝色(RGB = 227,238,251),第一次分组后变化为浅绿色(RGB = 140,227,190)、第二次变化为冰蓝色(RGB = 185,205,246)、第三次变化为淡黄色(RGB = 255,251,209)、第四次变化为浅紫色(RGB = 222,160,228)。如果继续出现第五次分组,将重新由浅绿色开始重复四色循环。直到相同颜色的同组标签被关闭到只剩一个,或者用户手动撤消颜色分 组,标签才会恢复为默认的淡蓝色。
 
 
笔者个人认为 IE 8 的这种设定并不算很智能。假设我正在用 IE 8 查看新浪体育,有十几条感兴趣的新闻想看。可能我第一次点开了三条新闻、三个标签,看完后逐一关闭;第二次点开了两条、看完又关闭;第三次又点开了三 条… 这时 IE 8 的标签就会反复不断地变色,看起来太花哨了。其实无论我打开多少次,这个窗口的所有标签都是来自新浪体育的,并没有必要进行颜色分组。只有当我在这个窗口 中打开了除新浪体育外的其它标签时,才真正需要用颜色加以区分。

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

 
 
言归正传,在默认的设置中,IE 8 定义的淡蓝-浅绿-冰蓝-淡黄-浅紫的颜色顺序是固定不变的,用户无法自行修改这些颜色或调整其出现的先后顺序。对于有些用户而言可能觉得无所谓、而对于 包括笔者在内的另一些用户来说,可能很希望自行设置 IE 8 的分组标签颜色。主要原因有:
 
1.默认的五种颜色都有些偏冷,需要红色、橙色、紫色等暖色调加以调和;
 
2.默认的五种颜色轮换顺序缺乏规律可循、不容易记忆,如果能够按照红-黄-绿-蓝-紫的大致的彩虹顺序轮换则比较醒目,同时也方便用户想起这是第几次分组;
 
3.众所周知在同一 IE 窗口中每次只能有一个标签处于前台、其余标签处于后台,在 IE 8 默认设置中只有那一个处于前台的标签拥有颜色渐变、处于后台的其它标签都是单调的纯色,应该加以修改,使后台标签也具有颜色渐变;
 
4.当鼠标悬停在处于后台的标签时,这个标签的颜色改变很不明显,用户不太容易根据颜色变化判断鼠标是否已悬停在后台标签上,笔者在微软新闻组中已经见到有人抱怨,难以分清悬停前后的颜色变化。
 
综合以上原因,笔者决定对 IE 8 的分组标签颜色进行一次彻底的修改。
 
IE 8 的分组标签颜色由 IE 8 程序文件 Windows\system32\IEFrame.DLL 中的 UIFILE 定义,使用 Resource Hacker 打开此文件(推荐用 Resource Hacker,eXeScope 修改 UIFILE 不如 Resource Hacker 方便),展开 UIFILE 分支,Windows XP 用户修改 UIFILE 中的 20481、Windows Vista 用户修改 UIFILE 中的 20737。
 
 
1.后台标签的单色修改:
 
按照由简至难的顺序,我们首先修改单色的后台标签。在 UIFILE 中搜索字符串 rgb(227,238,251),找到下列语句:
 
<IETabOverlay background = "themeable(rgb(227,238,251),buttonface)" />
 
这段语句定义了后台标签初始的淡蓝色(RGB = 227,238,251),我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。
 
接下来紧随着这段语句,我们可以看到:
 
<if class="group1"><IETabOverlay background = "rgb(140,227,190)" /></if>
 
这段语句即定义了当 IE 8 进行第一次分组时,将标签变化为浅绿色(RGB = 140,227,190)。
 
依此类推,我们可以继续找到 <if class="group2">、<if class="group3">、<if class="group4">,分别代表第二次、第三次、第四次的颜色变化,根据自己的喜好修改相应的 RGB 值即可。
 
附注:IE 8 后台标签默认颜色设置对照:
 
初始值:(RGB = 227,238,251)
第一组:(RGB = 140,227,190)
第二组:(RGB = 185,205,246)
第三组:(RGB = 255,251,209)
第四组:(RGB = 222,160,228)
 
 
2.后台标签由单色到渐变色的修改:
 
下面笔者介绍一下如何将后台标签由单色升级为渐变色,如果希望保持后台标签为单色,可以跳过这部分内容。
 
以后台标签初始的淡蓝色语句为例:
 
<IETabOverlay background = "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)。例如:
 
假设将
<IETabOverlay background = "themeable(rgb(227,238,251),buttonface)" />
 
替换为
<IETabOverlay background = "themeable(gradient(rgb(195,221,251),rgb(242,246,251),1),buttonface)" />
 
那么后台标签就可以由默认的淡蓝色(RGB = 227,238,251)升级为从(RGB = 195,221,251)到(RGB = 242,246,251)的淡蓝色渐变了。
 
依此类推,<if class="groupX"> 后面的语句也可以按此修改,从而将所有分组的后台标签全部由单色升级为渐变色。
 
 
3.鼠标悬停在后台标签时的颜色修改:
 
在 IE 8 的默认设置中,当鼠标悬停在后台标签时,后台标签会从单色变化为一个不明显的渐变色。例如初始的淡蓝色(RGB = 227,238,251),悬停时会变为从(RGB = 163,201,248)到(RGB = 242,246,251)的淡蓝色渐变。虽然悬停后换成了渐变色,但却与默认的单色实在太接近了。这也是新闻组中那位仁兄抱怨看不清的原因。
 
笔者认为当鼠标悬停在后台标签上时,还是按照 IE 7 的方案将其改变颜色比较醒目。在 IE 7 的默认设置中,后台标签原本为银色渐变、鼠标悬停后显示为淡蓝色渐变,比 IE 8 醒目多了。
 
如需修改鼠标悬停在后台标签时的颜色,在 UIFILE 中搜索字符串 (rgb(163,201,248),rgb(242,246,251),找到下列语句:
 
<IETabOverlay background = "themeable(gradient(rgb(163,201,248),rgb(242,246,251),1), buttonface)" />
 
这段语句定义了当鼠标悬停在后台标签时初始的淡蓝色渐变,我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。
 
依此类推,接下来紧随着这段语句可以依次找到 <if class="groupX">,不过这些语句的格式略微有所改变,需要在最后重复一下此种渐变色在鼠标悬停之前的单色。例如 <if class="group1"> 语句为:
 
<if class="group1"><IETabOverlay background = "themeable(gradient(rgb(21, 227,140),rgb(242,246,251),1), rgb(140,227,190))" /></if> 
 
可以看到它重复了一下在鼠标悬停之前的浅绿单色(RGB = 140,227,190)。我们按照它的格式修改相关的 RGB 值就可以了。
 
需要注意的是,如果之前已经按照方法 2 将后台标签由单色升级为了渐变色,在这里重复时也必须替换为相应的渐变色。
 
附注:IE 8 鼠标悬停在后台标签时默认颜色设置对照:
 
初始值:从(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.前台标签的渐变色修改:
 
现在还剩下最后一个修改的元素,就是 IE 8 窗口中唯一的一个处于前台的标签。前台标签在默认的设置中也采用了渐变色,但是也与后台标签相差不大。好在这个唯一的前台标签比其它后台标签要高一些,因此颜色接近的问题可以忽略。
 
如需修改前台标签的颜色,在 UIFILE 中搜索字符串 (rgb(195,221,251),rgb(242,246,251),找到下列语句:
 
<IETabOverlay background = "themeable(gradient(rgb(195,221,251),rgb(242,246,251),1), gradient(buttonhighlight,buttonface,1))" />
 
这段语句定义了前台标签的渐变,我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。
 
依此类推,接下来紧随着这段语句可以依次找到 <if class="groupX">,不过这些语句的格式略微有所改变,需要在最后重复一下此种渐变色的第一种颜色。例如 <if class="group1"> 语句为:
 
<if class="group1"><IETabOverlay background = "themeable(gradient(rgb(104,218,169),rgb(242,246,251),1),gradient(rgb(104,218,169),buttonface,1))"  /></if>
 
可以看到它重复了一下渐变色的第一种颜色(RGB = 104,218,169)。我们按照它的格式修改相关的 RGB 值就可以了。
 
附注:IE 8 前台标签默认颜色设置对照:
 
初始值:从(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)
 
 
至此,我们便完成了后台标签、有鼠标悬停的后台标签、前台标签在初始值以及四种分组时的全部颜色修改。
 
 
根据上述方法,我们完全可以按照自己的喜好,设计一套属于自己的 IE 8 分组标签颜色方案。本文结尾处的附件截图是笔者自己设计的一套颜色方案,标签初始颜色为淡粉色渐变、悬停时为粉红色渐变。四种分组分别为:浅红色(悬停橙 红色)渐变、浅黄色(悬停黄绿色)渐变、草绿色(悬停蓝绿色)渐变、蓝紫色(悬停浅紫色)渐变,按照粉-红-黄-绿-紫的顺序轮换,大体上遵循了彩虹方 案,供大家参考。在截图中,所有的 Windows 主页均为后台标签、Windows XP 主页为鼠标悬停时的后台标签、Windows Vista 主页为前台标签。
关于本文
  • 属于分类:应用技巧
  • 本文标签:
  • 文章编辑:
  • 流行热度:正在感受现场气氛...
  • 生产日期:2009年04月3日 - 13时35分00秒
各种回音
  1. 说: 回复他/她

    厉害

  2. 说: 回复他/她

    早就不用IE了。

  3. 说: 回复他/她

    还是习惯用傲游 装IE8 只是用他的内核···

  4. 说: 回复他/她

    厉害啊 高人
    不过我倒想是根据链接来变更颜色
    比如同一个二级域名 同一种颜色

  5. 说: 回复他/她

    灵魂行者,你好,我是一亿度,贵站转载的我的几篇文章,与我要求的转载方式有很大差异,转载文章的超链接,锚文本必须是原文标题,而不是“一亿度”,如果方便,请做修改,如果觉得修改麻烦,请删除文章,谢谢!

  6. 说: 回复他/她

    不知道博主不回答我,却允许楼上这样攻击我(不知道是不是马甲?),是何意图。请你作出正面回复,本人从不受威胁,如果楼上的话也是你的意思,那可真是让我失望和震惊!

    动辄“不想在互联网上混”的发出威胁,一副痞子口气,好像对你没有什么好处!

  7. 说: 回复他/她

    一亿度你好,非常抱歉我没有留意到你的留言,之前转载时也没看清楚你的转载要求。我已经根据你的要求修改了全部的文章了。请相信我并无任何意图与你作对,大家都是做站的,我非常尊重每一位勤劳的站长。那网友的言论我已经删除,他并不是代表我的观点,我在此向你道歉。

  8. 说: 回复他/她

    原来是这样,我误会你了,非常不好意思:(

  9. 说: 回复他/她

    自从老爷我用上了Fx和Gdi++就再也不用其它的浏览器
    可悲的地方是我喜欢上淘宝
    ……
    也就是付钱的时候切换到ie

  10. 说: 回复他/她

    如果我没有搞错,浏览器上首先出现多标签的是傲游(Maxthon),此后大家使用傲游的理由就是支持多标签,此后所有的浏览器都增加了这一功能,而傲游此后也没有更大的突破,但由于习惯于傲游的人太多,现在傲游还可以占据着不错的市场。
      IE7开始就增加了多标签(选项卡)功能,而在IE8 浏览器新增的一个特色功能就是标签的颜色分组。本人对标签的分组曾经考虑了相当长一段时间,在IE8出来之前我就有想过通过颜色分组了,但同时又感觉仅仅通过颜色来标示,使用体验也未必会提升太多。现在我能想到的最好方案,就是通过层次来区分,这个方案在三年前本人的作品上都已有尝试过,感觉还是不错的,现在就做到蓝蜂浏览器上,大家看看效果。

    效果图在本人的博客上, http://bluebee.blog.51cto.com/

  11. 说: 回复他/她

    真的非常厉害,用了怎么久的IE今天才发现其中的玄机。

微博评论箱