【美化Firefox】基于css的UI美化+更好的图标
firefox吧
全部回复
仅看楼主
吧务
level 11
暗巷潜光 楼主
本帖主要总结我个人使用这么多年对于Firefox的折腾和优化的最终总结,基本算是全网独一份最好的体验优化了。楼主走了很多弯道,故留下这份贴子让更多人抄到最好的作业。
Firefox调教好了会是你最顺手的浏览器。
[封面来自 https://www.bilibili.com/video/BV1UP411x7Vt/?vd_source=4a0e9b84e961a9e9d32c571f3b4a0e6d ]
2025年03月27日 08点03分 1
吧务
level 11
暗巷潜光 楼主
★章节一:关于userchrome.css
◇userChrome.css文件的作用是什么?
◇在使用userChrome.css自定义之前,用户需要了解什么?
◇用户在哪里可以获得关于自定义规则和userChrome.css的帮助?
◇如何将火狐浏览器恢复到其默认状态?
◇将火狐浏览器重置为其默认状态
◇禁用并移除userChrome.css
2025年03月27日 08点03分 2
吧务
level 11
暗巷潜光 楼主
◆userChrome.css文件的作用是什么?
对于userchrome.css,简单来说,它是除了Firefox内置的自定义功能(定制工具栏),火狐浏览器主题(Firefox color可以制作自己的主题)以及其他类型的插件(发现并安装附加组件来为 Firefox 增加功能)之外,Firefox用户还可以通过应用名为userChrome.css的可选文件中的样式规则,对他们的浏览器用户界面(UI)进行更改。
火狐浏览器的用户界面由类似网页的元素(HTML和XUL元素)构建,并使用CSS进行样式设计。用户可以设置火狐浏览器在启动时查找userChrome.css文件,因此文件中的规则可以重新设计用户界面的各种元素。例如,自定义规则可以改变许多元素的颜色和大小,隐藏它们,或者重新定位它们。
__________________________________________________
◆在使用userChrome.css自定义之前,用户需要了解什么?
用户应该预料到他们的一些自定义规则在未来可能会停止正常工作,而在极端情况下,这可能会对用户界面造成严重问题。火狐浏览器是一个正在进行中的项目,为了允许持续的创新,Mozilla无法保证样式元素不会改变。当引入新的功能和新的用户界面设计时,它们通常需要不同的HTML和XUL标签,而这些标签的样式也将随之发展。因此,Mozilla并未正式支持自定义样式规则。
__________________________________________________
◆用户在哪里可以获得关于自定义规则和userChrome.css的帮助?
Mozilla的支持论坛为这种类型的自定义提供了非常有限的点对点帮助。我们鼓励有userChrome.css问题的用户通过其他论坛和网站寻求帮助和信息,例如userchrome.org网站(https://www.userchrome.org/),Reddit上的r/FirefoxCSS论坛(https://www.reddit.com/r/FirefoxCSS/),或者Matrix上的社区驱动的#firefoxcss房间(https://chat.mozilla.org/?_gl=1*18amcbf*_ga*MTI3MzM1NDUzMy4xNzM3MTAzMDA1*_ga_2VC139B3XV*MTc0MzA2NDkyMi43LjEuMTc0MzA2NTk1MS4wLjAuMA..#/room/#firefoxcss:mozilla.org)。github上也有一些集合(原地址https://github.com/FirefoxCSS-Store/FirefoxCSS-Store.github.io 直达链接:https://firefoxcss-store.github.io/
__________________________________________________
◆如何将火狐浏览器恢复到其默认状态?
如果在更新后火狐浏览器的用户界面突然出现问题,并且用户曾经创建过一个userChrome.css文件,他们可以使用火狐浏览器的故障排除模式(即“排障模式”。在浏览器右上角菜单>帮助>排障模式 下打开)来快速禁用他们的自定义规则,并查看是否有任何差异。如果他们想撤销他们的自定义并恢复火狐浏览器到其默认的用户界面,用户可以使用以下方法中的一种。
__________________________________________________
◆禁用并移除userChrome.css
用户可以通过以下步骤禁用并移除他们的userChrome.css文件,以便在火狐浏览器启动时不加载:
在 地址栏 里输入about:config,然后按 回车。
有时会出现警告页面。点击 接受风险并继续,以打开 about:config 页面。
搜索toolkit.legacyUserProfileCustomizations.stylesheets偏好设置,并通过点击Reset
将其设回false。
在配置文件夹的chrome文件夹内移除userChrome.css。要找到配置文件夹,可以在地址栏输入“about:profiles”进入配置文件夹管理页面。
2025年03月27日 09点03分 3
吧务
level 11
暗巷潜光 楼主
经过上面的理论, 你应当对Firefox的UI有一定的了解。如果你想自己动手开始对Firefox的美化,有前端开发知识的可以立即上手,无非是css的语法,使用css选择器定位浏览器UI元素,复制它们的ID选择器,使用属性名和属性值更改样式。➤如何定位浏览器UI元素?
1.首先打开 开发者工作台,在高级设置里勾选以下选项
2.之后使用快捷键Ctrl+Shift+Alt+i即可打开父进程浏览器工具箱(可以在设置里勾选“不自动隐藏弹窗”以便选择浏览器右键上下文菜单(context menu)的元素)
2025年03月27日 09点03分 5
吧务
level 11
暗巷潜光 楼主
★userchrome.css作业
前言:userchrome.css从零开始写费时费力,而且普通人也没有css基础(虽然2小时就能学到基础),所以8U可以参考使用我的CSS作业,这也是本帖主要的核心内容
在写这个帖子之前,Github、Reddit不乏一些优秀的css文件,但是随着浏览器版本更新,一些css可能会失效(例如css的ID选择器更改,可以重新关联修正)。我使用过很多别人写的优秀项目,例如TYHfox、ArcWTF-1.2-firefox,还有一些基于chrome、edge所设计的样式。但是这些在今天(release版本136.0.3,Nightly版本138.0a1),大都已经因缺乏维护而造成部分代码块已经失效,整个样式也没有那么好看了
所以本帖所推荐的Firefox-plus项目则是持续维护、且设计优秀的项目,也是本人使用时间最长、参与过维护和提交代码的项目
2025年03月27日 09点03分 6
吧务
level 11
暗巷潜光 楼主
✦Firefox-plus项目(Github原地址:https://github.com/amnweb/firefox-plus, 我维护的克隆库:https://github.com/1247343406/firefox-plus/tree/main,我所作出的更新在合并到原项目的main分支之前会更新一些。但是注意我的克隆库main分支主要是用于提交到原项目,分支1是我自己用的版本):
✦✦✦✦✦✦✦✦✦✦✦✦✦✦
下面的链接是我正在使用css,已经在原项目基础上进一步优化过,可以直接取用
通过网盘分享的文件:Firefox-plus开箱即用.zip
链接: [有效] https://pan.baidu.com/s/1ywPoKLB9gE5gVykLqbEWQA?pwd=ijhj 提取码: ijhj
✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦
这边摘一下Github上挂的预览图
2025年03月27日 10点03分 7
吧务
level 11
暗巷潜光 楼主
下面的链接是我正在使用css,在原项目基础上进一步优化过,可以直接取用
✦✦✦✦✦✦✦
通过网盘分享的文件:Firefox-plus开箱即用.zip
链接: [有效] https://pan.baidu.com/s/1ywPoKLB9gE5gVykLqbEWQA?pwd=ijhj 提取码: ijhj
✦✦✦✦✦✦✦
2025年03月27日 10点03分 8
吧务
level 11
暗巷潜光 楼主
下面是对于浏览器图标的更改,也就是此帖封面,以下是预览:
它来自B站的@侃侃我的 的视频[https://www.bilibili.com/video/BV1UP411x7Vt/?vd_source=4a0e9b84e961a9e9d32c571f3b4a0e6d ]
对于这位up重绘的图标,我使用ps重新着色输出了一份用于Nightly版本的紫色狐狸。并且up主原本给出的现成ico格式图标压损可能较大,我重新生成过一遍,清晰度应该是要比原文件要更好的
以下是图标文件。对于各桌面系统的图标更改方式可以自习搜索着看
✦✦✦✦✦✦✦
通过网盘分享的文件:Firefox icons512.zip
链接: [有效] https://pan.baidu.com/s/1PmYY5YXWAg7sdcC4ib18Lg?pwd=ybsv 提取码: ybsv
✦✦✦✦✦✦✦
2025年03月27日 10点03分 9
吧务
level 11
暗巷潜光 楼主
对于Firefox-plus项目,我在最新更改中添加了对Nightly版本的标签组、休眠标签页功能的图标支持。这些还没有被合并到原项目。大家可能直接取用我的文件可能更一步到位[呵呵]
2025年03月27日 10点03分 10
1