如何使用 userChrome.css 自定义 Firefox 的用户界面

aunsen
aunsen
aunsen
10
文章
38
评论
2020年6月11日18:39:29 评论 625

由于 userChrome.css 文件的存在,Firefox Quantum 的界面仍然是可以定制的。 你可以编辑这个文件用来隐藏一些不需要的菜单项,将工具栏移动到标签栏的下面,扩展多行的书签工具栏,以及其他通常你觉得不可能的事情。

如何创建您的userChrome.css文件

默认情况下,userChrome.css 文件不存在的,如果要进行调整,应该在 Firefox 配置文件夹中的适当位置创建该文件。
要启动 Firefox 配置文件夹,请在 Firefox 中单击菜单>帮助>故障排除信息。

单击配置文件文件夹右侧的“打开文件夹”按钮以将其打开。


如果在出现的配置文件夹中看到一个 chrome 文件夹,双击进入 chrome 文件夹目录。 但是 Firefox 默认是没有这个文件夹的,没有那我们就新建一个 chrome 文件夹就好了。

通常情况下 Windows 是默认隐藏文件扩展名的。 如果你已经开启文件扩展名,则无需执行此步骤。
在 Windows 8 或 10 上,单击功能区上的“查看”选项卡,然后勾选“文件扩展名”使其可见。 在Windows 7上,单击组织>文件夹和搜索选项,单击“查看”选项卡,然后勾选“隐藏已知文件类型的扩展名”。

现在开始创建 userChrome.css 文件,要注意该文件实际上是 .css 扩展名而不是 .txt 扩展名。“右键新建”>“文本文档”并将其命名为“ userChrome.css ”,确保删除 .txt 文件扩展名,Windows 会警告你正在更改文件的扩展名,单击“是”确认更改。

如何编辑userChrome.css文件

你可以使用任何文本编辑器来编辑 userChrome.css 文件。Windows 附带的记事本文本编辑器也能胜任工作。 如果你需要功能更强大的文本编辑器,可以选择 Notepad3 和 VS Cood。
要在记事本中编辑文件,右键单击它,然后选择“编辑”。

通过复制和粘贴将所需的 css 代码添加到文件中。如果要添加多个代码,请确保格式段落正确。

编辑完成后,点击文件>保存在记事本中,保存文件。

每次你编辑完 userChrome.css 文件时,都需要重新启动 Firefox 才能使更改生效。

注意:Firefox 69 以上版本需要在 about:config 里开启参数才能使用 userChrome.css

步骤如下:

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

在哪里可以找到调整界面的相关代码

如果你了解 CSS 代码以及 Firefox 界面的设计方式,可以自己进行调整,也可以在网络上找到相关代码。

以下是一些入门资源:

Classic CSS Tweaks:来自 CTR 扩展作者的 userChrome.css 项目,CTR 有多经典不用多说了吧,以前必装的扩展。

userChrome Tweaks:一套相当完整的 userChrome.css 项目,包含 Firefox 各个界面。

FirefoxCSS on Reddit:Reddit上的专门讨论Firefox userChrome.css 的版块,也许你可以找到你的答案(需科学上网)。

注意,旧版本的 Firefox 使用的是 XUL 界面,你在网络上发现的旧版 userChrome.css 可能无法在Firefox 57 及更高版本(Firefox Quantum)上运行。

你也可以启用浏览器工具箱来查看 Firefox 浏览器的界面 css, 并作出相应更改。

userContent.css 文件

userContent.css文件可以用来调整 Firefox 的内部界面,例如“新标签页”和“选项”等页面,你可以对其进行编辑调整。
要使用此文件,同样需要在 Chrome 文件夹下创建名为“userContent.css”的文件。

遇到问题的时候怎么办

如果你遇到调整后 Firefox 界面显示有问题,只需将相关代码从 userChrome.css 文件中删除,然后重新启动 Firefox。 如果这样做不起作用,则可以完全删除 userChrome.css 文件,然后重新启动浏览器以清除所有更改并获得原始的 Firefox 界面。

 

aunsen
  • 本文由 发表于 2020年6月11日18:39:29
  • 转载请务必保留本文链接:https://sunbox.cc/firefox-userchrome-css.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: