在Firefox下使用Stylish+DOM Inspector定制界面

在Firefox下使用Stylish+DOM Inspector定制界面

来源: | 浏览: 3827 | 评论: 0发表时间: 2013-12-28 07:13:16

Firefox浏览器最为强大的就是它的定制性与扩展性,Stylish是一个可用于Firefox的扩展,它可以让你自定义css来控制页面的显示方式.而由于Firefox浏览器也是有DOM结构的,所以也可以用Stylish来自定义火狐的界面,实现最个性化的定制.DOM Inspector是用来帮助查找DOM结点的一个工具.



首先,你的Firefox需要安装Stylish和DOM Inspector这两个扩展,它们都可以在火狐的扩展中心搜索到.


现在的软件很多都有个"换皮肤"的功能,充分说明了定制个性化的界面已经成为现在用户的需求了~而Firefox浏览器就提供了最为强大的定制性,比如在新版的Nightly中,火狐加入了新式的UX界面,不过作为一些老用户来说,这个新界面现在还是有点难以接受= =. 所以果断用Stylish改变它!


火狐UX界面

这是火狐的UX界面,可以看到出现了圆弧的梯形标签,而石博文则更喜欢棱角分明的方形标签,还有就是标签的高度非常高,现在的屏幕长宽比越来越大,这样高度的标签页使得可视高度又缩小不少~


定制火狐界面

经过一阵折腾之后,终于把标签页弄成了喜欢的样子:)


先来介绍一下DOM Inspector这个扩展,它可以获得各种xul的DOM结点,简单说,就是可以获得各个控件的id或者class选择器,有了这些选择器,就可以在Stylish中使用css来定制它的样式啦~


DOM Inspector

在地址栏输入 chrome://browser/content/browser.xul ----这就是Firefox界面的xul地址----就可以看到下面出现了Firefox的界面,而上方则显示出了各个节点的名称.


实战

比如现在想修改标签页字体的颜色,先打开DOM Inspector.


DOM Inspector

点击工具栏有个鼠标下带个圆圈的图标,然后点击标签页,这时DOM Inspector就会定位到标签页这个节点上.


DOM Inspector

点击不同的节点,下面显示的图像就会给当前选择的节点绘制一个红色的边框,方便观察.经过分析,控制标签页文字的应该是.tab-text .tab-label这两个类选择器.到此,DOM Inspector的任务就结束了.


Stylish

下来打开Stylish,创建一个样式,输入css代码来改变文字颜色,有时因为存在默认样式,所以最好在后面加个!important表示我们写的样式具有高优先级.


Stylish

保存(或预览)后可以看到标签的文字颜色已经变成了红色.


附:方形标签的CSS代码


相关文章
没有人评论过此文,还不快抢个沙发
  • 昵称: *
  • 邮箱:
  • 网址:
  • 记住我的信息
  • Color
  • Red
  • Blue
  • Code
  • bash
  • cpp
  • css
  • java
  • js
  • perl
  • php
  • python
  • ruby
  • sql
  • xml








最新评论