不用装扩展也可自定义 Chrome 滚动条的样式

标签: Google技巧 Chrome Chrome Extensions CSS | 发表时间:2011-08-31 15:49 | 作者:musiXboy iVane
分享到:
出处:http://www.guao.hk

有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了。其实咱们可以自己动手,丰衣足食。首先在自己的系统里找到如下这个.css文件:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

用任何一款文字编辑器打开之,加入以下代码:

::-webkit-scrollbar-track-piece{
	background-color:#fff;
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:50px;
	background-color:#999;
	-webkit-border-radius:4px;
	outline:2px solid #fff;
	outline-offset:-2px;
	border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
	height:50px;
	background-color:#9f9f9f;
	-webkit-border-radius:4px;
}

保存之后重新打开你的Chrome浏览器,看到变化了吧?其实这些都是基础的CSS代码,所以你可以随心所欲的定制。比如你觉得滚动条太细了,即可编辑以下这段代码里的宽度:

::-webkit-scrollbar{
	width:16px;
}

另外,其实Chrome的Web Inspector也是可以通过修改CSS来定制页面风格的,其CSS文件地址:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

Via GTricks


© musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ), 2011. | 7 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料
Post tags: , ,

相关 [定义 chrome] 推荐:

如何自定义Chrome上的扩展程序图标

- Outman - Chrome迷
大概都知道的,如果你不喜欢某个Chrome的扩展程序图标,你可以选择右击图标中的“隐藏按钮”隐藏它. 隐藏后,程序依旧在后台运行,只是不会出现在你的屏幕视野中了. 如果你不喜欢默认扩展程序的图标,但你又经常使用这些扩展程序(就像下图那“天气”预报的图标,我承认这是一款好的程序,但图标做得实在是难看),那是不是代表你每天必须都要忍受这些难看的图标呢.

如何自定义 Chrome 扩展按钮的图标?

- Ivy - 谷奥——探寻谷歌的奥秘
如果你遇到了一个很实用的Chrome扩展,但作者拥有不敢恭维的艺术细胞做了一个很难看的扩展按钮始终影响你的Chrome美观性怎么办. 除了将其隐藏掉,其实你还可以替换它的图标. 首先,你需要找到这个扩展的目录,每个操作系统都不同:. 进入这里,你会看到很多很多毫无章法的目录,你需要挨个打开,看看其中的图片即可分辨出哪个目录是哪个扩展的.

不用装扩展也可自定义 Chrome 滚动条的样式

- iVane - 谷奥——探寻谷歌的奥秘
有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了. 其实咱们可以自己动手,丰衣足食. 首先在自己的系统里找到如下这个.css文件:. 用任何一款文字编辑器打开之,加入以下代码:.

Chrome三岁啦!

- Yousri - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
发布者:Google中国公关部. 今天,我们迎来了Chrome浏览器的三岁生日. 过去三年来,网络世界不断激发着我们的灵感,将网络的力量注入所有应用程序和网络体验中. 同时,所有的现代浏览器也在速度、简易性和安全性方面有了显著的提升. 为了庆祝Chrome的生日,我们制作了一个互动的信息图形,向大家展示主要的互联网技术和浏览器的演变进程.

Chrome 14发布

- Woooon - Solidot
Google发布了Chrome 14浏览器. 主要改进了Mac OS X Lion支持和激活Native Client(NaCl). 新版的特性包括:支持Web Audio API规格,允许Web应用支持富音频处理(演示);启用NaCl,允许第三方以非特定平台二进制的形式安全的执行原生码,NaCl为浏览器新能力开启了大门,如在浏览器中原生运行Vim编辑器.

ActiveX for Chrome 登陆 Chrome 官方扩展库

- Tony - Chrome迷
三个星期前,我们报道了 Chrome迷论坛会员 eagleonhill 打造出了首款可以在 Chrome 上使用 ActiveX 控件的扩展,引来了不少网友的关注. 不过当时的版本还非常初级,问题也很多,并且没有发布到官方 Chrome 扩展库中,很多用户表示不敢用. 经过作者的努力,现在这枚扩展已经修正了大量的Bug、给用户提供了一些预定义设置.

Chrome Extensions:超強大的 Chrome Remote Desktop!

- 阿良 - TechOrz 囧科技
Cloud Computing 令目前大部份用戶要做的,都可以在一個瀏覽器當中完成. 不過,雖然目前 HTML5 的技術開始普及,但總有些動作不能在 Browser 中完成,而日前 Chromium 團隊開發的全新 Chrome Extensions,大概可以補充到 Browser 不足之處. (...)閱讀全文Chrome Extensions:超強大的 Chrome Remote Desktop.

Chrome 易用技巧:我的Chrome

- 甜菜 - 煎蛋
我只是按照自己的想法和需求,简单改造了一下Chrome,将它变成了独一无二且为我服务的玩具. 我爱这种小清新式的个性化,实用、简洁、且让别人摸不着头脑 :D. 如上图,我的Chrome 界面是这样,它的目的是清爽、放松、没有任何的压迫性,所以我不喜欢Chrome 自带的最常访问的网站快捷框,特别是当你升级到15稳定版后,标签页强制显示的“最常访问的网站”或许会让你不爽,那么就用下面的方法,让自己变回小清新吧.

Chrome GNOME 3 主题

- robby - LinuxTOY
在 GNOME 3 环境下使用 Chrome/Chromium. 那么赶紧看看这款 Adwaita 风格的主题吧. 如图所示,在选项中设置使用系统边框后,Chrome/Chromium 在 GNOME 3 环境下成功还原了 Adwaita 风格,使用 GNOME 3 的铬粉们赶紧上吧. 消息来源:LinuxART.

Chrome Stable 11.0.696.77发布

- HRS - cnBeta.COM
在 Adobe 官方针对 Flash 的最新安全公告公开后,Chrome Stable/Beta/Dev 三个分支迅速同时进行了升级,除了升级内置的 Flash 外没有其他变化,但是由于安全事大,推荐所有用户马上升级.