9
30
2010
12

colorpicker: 给 Vim 加一个调色板!

作为一名一直喜欢写网页前端的vimmer,自然会使用Vim来编写CSS了。但是,CSS中经常需要调色。虽然相继有一些工具的出现(见可视化的配置Vim(gVim)配色-colorsel.vim),但一直不太理想。编辑CSS的颜色,不仅需要细致的调色,而且需要方便修改,并且支持从屏幕取色是最好不过了!

既然没有现成的,而自己不管怎么说已经入了GTK的门,就自己写了一个简单的工具。本来有个叫gcolor2的调色/取色工具的,可惜它不支持把取到的颜色输出到标准输出,或者任何其它可被其它程序调用的地方(难道这只是某个大牛闲着没事做时写着玩儿的 :-P)。所以,colorpicker与之类似,只有一个标准的GTK调色板。重要的不同之处在于:它可以和其它程序交互。

还是先放个图吧:

就是这样。从图中可以看到,这个标准的调色板除了支持RGB值,还支持HSV,而后者非常适合对色彩进行微调,不像RGB那样只有机器能够理解。左下角有之前颜色和当前颜色的显示(截图时没注意,都是白色。。。)。之前颜色是可以从命令行设置的,这个很有用(请往下看)。也有取色器,在Linux下是可以取到屏幕上任何一点的颜色的。但根据我使用GIMP的经验,好像在Windows上只能取到本程序的颜色。另外还可以看到,图中显示了“透明度”一项。关注Web前端的童鞋都知道,CSS3支持半透明色彩了,所以,本程序也支持输出rgba(79, 0, 159, 0.51)这样的颜色值。

关于程序自身的介绍就到这儿。下面是在Vim里使用的截图:

我需要输入一个颜色值,于是按了我自己定义的Alt-C键,colorpicker启动了。因为是新颜色,加之之前我没使用过,所以“之前颜色”那里显示的是默认的白色。

颜色已经输入了,但我想换一个颜色,怎么办呢?在普通模式下按cac(change a color)就可以了,“之前颜色”会被置为待修改的颜色,方便进行微调。


PS: 在图中可以看到CSS中的颜色值下方背景被高亮成了相应的颜色。这是使用css.vim实现的。

PS2: 这里演示的是修改CSS文件,但实际上是和文件类型无关的。你可以将它用于任何你想用的文件中。

PS3: colorpicker是独立的GTK程序,所以不一定非要和Vim配合工作啦。Emacs什么的一样可以调用,只要有人写出调用代码。

PS4: 程序在哪里下载呢?请移步我的陈列室。Vim调用部分的代码尚未整理,在我的vimrc中,搜索colorpicker就可以了(共两个函数,截图中可以看到函数名。目前(2010年9月30日)它们处于我的vimrc的前50行内)。


2011年4月9日更新

这里 jiazhoulvke 提供了编译好的 Windows 版程序(以及分离出来的 Vim 配置),当然GTK Runtime 环境还是得装,而且还可能遭遇著名的DLL Hell(如果不幸地出现了,那么请把出问题的 DLL 文件从 GTK 的 bin 目录复制到 colorpicker.exe 所在的目录中)。

2014年11月8日更新:

颜色值的高亮显示可以使用 colorizer 插件了哦~

Category: Vim | Tags: gtk css vim C代码
5
6
2010
2

去掉 WebQQ 和 163 邮箱中讨厌的 UI 元素

这两天 WebQQ 的右上角又出现了红色的文字——“参与WebQQ知识问答,100Q币等你拿”。本以为过段时间它会消失的,结果到现在依然还在。

这红色的文字甚是碍眼,于是它享受了和163邮箱里的红字广告和“安全系数低”一样的待遇——被display:none了。下面是设置方法,前提当然是使用配置性强的火狐浏览器了。

首先确定 CSS 选择器。这个打开 Firebug 看吧。要写多点以免把其它网页的某些元素给选中了。也许可以指定当 URL 匹配时才匹配,但我还不会。我使用的选择器是:

#webqq_top > .top_right > .right_option > a[target=_blank]

选好后我使用 Firebug 的插件 Firefinder 确定了下正确性。毕竟我对 CSS 的高级点的选择器还不熟,没太多信心。要测试效果那可是要重启浏览器滴~

然后打开火狐的个性化配置文件<profile_dir>/chrome/userContent.css。这个 CSS 文件会应用于每个网页。(另外还有个userChrome.css文件是针对浏览器自身的。)在此文件中把那个元素隐藏起来就可以了 :-)

/*
 * WebQQ 讨厌的红色调查/问答链接
 */
#webqq_top > .top_right > .right_option > a[target=_blank] {
  display:none!important; /* !important 是必须的,提高该规则的优先级 */
}

在这个文件里面,还有我为屏蔽 163 邮箱里的红字而写的另外两条 CSS 规则:

/* 
 * 网易邮箱 3.5:不要显示“安全系数低”
 */
a#aWelcomeSecurity0 {
  display:none!important;
}
/*
 * 还有广告
 */
div.links > div.chl > a:last-child {
  display:none!important;
}

一点题外话:继发现网易邮箱不能发送纯文本邮件后,今又确认它每次都把 Google Group 的更新邮件给我扔到垃圾邮件里,太过份了。还是 Gmail 好啊!

Category: 火狐 | Tags: 火狐 css 反广告

部分静态文件存储由又拍云存储提供。 | Theme: Aeros 2.0 by TheBuckmaker.com