Cent Browser 图标美化教程

Moka

分享一个完美替换 Cent Browser 图标的教程，此方法同样适用于 Chrome 及衍生的浏览器。
之所以写这个教程是因为先前有位网友提议让官方更新图标，我才知道原来有同道中人，官方更新图标不是简单的事，其实我们可以自己动手更换喜欢的图标。
本教程所使用的 logo 为本人设计制作的，有动手能力的亲可以换成其他 logo，方法一样。
在绘制这个 logo 之前我一直都用的 Chromium 的 logo，因为 Chromium 的 logo 比较耐看，Chrome 颜色太鲜艳容易审美疲劳。

替换后效果如下：

　
　
　
教程开始，以 Cent Browser 3.7.2.33 版本为例
首先到我网盘下载所需要的工具和文件，直接将整个文件夹下载下来就行了
链接:https://pan.baidu.com/s/1UaGzm9idwQDLeSspvtV7Iw 密码:t7e5

一、替换任务栏图标

• 这个比较简单，直接将“Google Profile.ico”替换到 User Data\Default 目录即可
• 如果图标没有刷新，同时按下 Win+R 呼出运行，输入 ie4uinit -show，点确定刷新图标缓存
  
  

二、替换程序图标

• 下载工具 Restorator 2007，链接:https://pan.baidu.com/s/1JkhqRpAWF5AEmb1qN3s1ww 密码:iryg
• 将文件解压出来，先双击一次“!)安装.reg”注册软件，之后再运行 Restorator.exe
• 同时按下 Ctrl+O，定位到 Cent Browser 目录，双击 chrome.exe 打开
• 左侧资源树里依次展开 chrome.exe，图标，IDR_MAINFRAME，将“Google Profile.ico”直接拖拽到 IDR_MAINFRAME 上替换，如下图所示：
  
• 点击菜单：文件 - 保存，或者快捷键 Ctrl+S 直接保存，原文件会自动备份
  

三、替换主题图标

• 到 Cent Browser 安装目录，3.7.2.33（对应你所使用的版本）文件夹下，找到 chrome_100_percent.pak, chrome_200_percent.pak, resources.pak 三个文件复制出来，粘贴到刚刚下载的“图标”目录
• 拖动 chrome_100_percent.pak 文件到 unpack.bat 上，当出现“用 unpack 打开”字样时松开鼠标，如下图所示：
  
• 之后会出现一个cmd窗口，然后目录会多出一个 chrome_100_percent_unpacked 文件夹，双击打开 chrome_100_percent_unpacked 文件夹，找到 Cent Browser 的logo，并记录其命名，3.7.2.33版本是 301.png, 10318.png, 10319.png, 17227.png 这四个文件，301.png 是一个16分辨率的图标，10318.png 是32分辨率，其他两个不清楚，好像不替换也行。
  
• 找到对应文件后，打开下载的“100”目录，将里面四个文件替换到 chrome_100_percent_unpacked，如果不是 3.7.2.33 版本，文件命名可能不同，根据上一步找到的文件改名替换即可
  
• 替换后将 chrome_100_percent_unpacked 文件夹拖到 pack.bat 上，当出现“用 pack 打开”字样时松开鼠标，之后同样会出现一个cmd窗口，新的 chrome_100_percent.pak 就打包好了
  
• chrome_200_percent.pak 的替换参考步骤 2-5，只不过目录由“100”换成“200”，里面的图标都是放大一倍的，最后就是 resources.pak，里面有三个图标 10150.png, 10151.png, 10152.png 分别对应 64, 128, 256 分辨率，同样方法重新打包，图标目录换成“RES”
• 三个都打包好后，先退出浏览器，将三个新pak文件复制到 3.7.2.33 文件夹下，替换原文件，然后你就可以访问： chrome://welcome, chrome://settings/help 或者 chrome://newtab 看看效果了。
  
  

四、替换 Win10 开始菜单图标

• 因为没有用 Win10 系统，所以不知道是否可行，将 VisualElements 文件夹下的两个文件替换到 Cent Browser\3.7.2.33\VisualElements 下，具体结果等网友们反馈
  

Moka

沙发福利，我自个儿使用的新标签页 custom.css，喜欢的可以自行添加进去，效果如图：


CSS代码如下，背景图片在 chrome://settings/cbNewTab 更换，建议不要超过100KB，Chrome 尿性，不然打开新标签页会比较慢

1. html[bookmarkbarattached]  #logo-img,html[bookmarkbarattached] .page-switcher,html[bookmarkbarattached] #footer-border,html[bookmarkbarattached] #footer-menu-container{display:none!important}
   
2. #ntp-search-button{opacity:.48;cursor:pointer}
   
3. #ntp-search-engine-list ul.ws_drop_down li a[id]{cursor:pointer}
   
4. #ntp-search-engine-list ul.ws_drop_down li a[id]:hover{background:#e0f5ff}
   
5. #ntp-search-engine-list ul.ws_drop_down li:nth-child(5n+1){font-weight:bold}
   
6. #card-slider-frame{bottom:0!important}
   
7. #card-slider-frame .tile-page-content{padding-top:90px}
   
8. #card-slider-frame .real.focusable:hover{transform:scale(1.05)}
   
9. #card-slider-frame .real.focusable:active{transform:none;transition:.06s ease-out}
   
10. #card-slider-frame .real.focusable,#card-slider-frame .real.focusable .thumbnail-wrapper,#card-slider-frame .real.focusable .title{transition:.18s ease-out}
    
11. #card-slider-frame .real.focusable .thumbnail-wrapper{border:1px solid rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;box-shadow:none;overflow:hidden}
    
12. #card-slider-frame .real.focusable:hover .thumbnail-wrapper{box-shadow:0 6px 24px 3px rgba(15,66,108,.24)}
    
13. #card-slider-frame .real.focusable:active .thumbnail-wrapper{border-color:rgba(0,0,0,.24);box-shadow:0 -3px 24px 3px rgba(15,66,108,.36);transition:.06s ease-out}
    
14. #card-slider-frame .real.focusable .thumbnail{border-radius:0;max-width:100%;opacity:1}
    
15. #card-slider-frame .real.focusable .thumbnail-shield{display:none}
    
16. #card-slider-frame .real.focusable .color-stripe{background:transparent!important}
    
17. #card-slider-frame .focusable .title{max-width:calc(100% - 24px);padding-left:12px;padding-right:12px;display:inline-block;background:rgba(0,0,0,.3);color:rgba(255,255,255,.75)}
    
18. #card-slider-frame .focusable .launch-click-target{display:inline-block}
    
19. #card-slider-frame .real.focusable:hover .title{color:#fff}
    
20. html[bookmarkbarattached] #footer{height:36px;background:transparent}
    
21. html[bookmarkbarattached] #footer #dot-list{display:block;margin:0 auto!important;text-align:center}
    
22. html[bookmarkbarattached] #footer #dot-list .dot{display:inline-block;margin-top:6px}
    
23. html[bookmarkbarattached] #footer #dot-list .dot:hover .selection-bar{border-color:rgba(255,255,255,.6)}
    
24. html[bookmarkbarattached] #footer #dot-list .dot input{color:transparent}
    
25. html[bookmarkbarattached] #footer #dot-list .dot.selected .selection-bar{border-color:#2aacff}

复制代码

Admin

感谢大佬分享~

莣叻洎莪の

建议官方出一个一键更换图标的设置

Moka

Admin 发表于 2019-3-15 23:16
感谢大佬分享~

客气客气

Moka

莣叻洎莪の 发表于 2019-3-16 00:28
建议官方出一个一键更换图标的设置

这功能虽然很好，但觉得有点不实际，logo就像一个品牌一样，哪能随便让客户换

lforl

我觉得官网可以多出内置几个图标，有时候我想同时运行两个cent，便于区分。
本来想用cent+谷歌原版，原版实在不习惯。虽然我选了不同的图标。

任务栏上图标相同不好区分了。

Admin

lforl 发表于 2019-3-21 21:58
我觉得官网可以多出内置几个图标，有时候我想同时运行两个cent，便于区分。
本来想用cent+谷歌原版，原版实 ...

新建多个浏览器用户不就有不同的图标了么？

lforl

Admin 发表于 2019-3-22 17:16
新建多个浏览器用户不就有不同的图标了么？

太妙了，原来用户是这个意思！如此用法：两个不同的账户，上同一个网站。

原来还有这个功能，甚妙

Admin

lforl 发表于 2019-3-23 19:10
太妙了，原来用户是这个意思！如此用法：两个不同的账户，上同一个网站。

正常应该是会在任务栏显示你的用户头像的，例如这样，没显示是不正常的，不知道是不是你用了经典主题的原因