From b3d4cbd8210899bf7b3385e8ff8b32d6918cbd55 Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Sat, 1 Aug 2026 12:15:17 -0500 Subject: add readme and preview pics --- README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 README.md (limited to 'README.md') diff --git a/README.md b/README.md new file mode 100644 index 0000000..7131373 --- /dev/null +++ b/README.md @@ -0,0 +1,93 @@ +# My Firefox userChrome.css +This is my Firefox `userChrome.css`. +This `userChrome` was originally based on tweaks from +[xiaoxiaoflood/firefox-scripts](https://github.com/xiaoxiaoflood/firefox-scripts), +but I was not satisfied with the way many of these looked and so I spent some +time to get them looking like they belong. + +In addition to looking nice, this also attempts to make the browser more +minimal and more functional by removing clutter and maximizing vertical space. + +## Features +* Auto one-line top bar (combines tabs and navbar). + Automatically disabled when the window gets too small via a `media query` +* Chromium style findbar in top right corner +* Consistent placement of new tab button in the top right +* Remove overflow button for tabs and navbar +* Enhanced bookmarks bar readability (adj. margins and padding) +* Widely compatible with Firefox themes +* Compact mode targeted for maximum reading area + +## Preview +![Wide UI preview](./pics/wide.png) +*Wide UI* + +![Slim UI preview](./pics/slim.png) +*Slim UI* + +## Setup +To begin, it is highly suggested that you set `density` to `compact` in the +"Customize Toolbar" menu in order to sace additional vertical space. Note that +this `userChrome` is designed and tested only with `compact` mode, other modes +are not supported. + +It is suggested to install this via [home-manager](https://home-manager.dev/). +If you are not already using `home-manager`, then refer to +[Legacy installation](#legacy-installation). + +### Home-manager (Nix) installation (suggested) +First, refer to this example `flake.nix` that you might use for a +`home-manager` setup: + +```nix +{ + inputs = { + nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable"; + home-manager = { + url = "github:nix-community/home-manager"; + inputs.nixpkgs.follows = "nixpkgs"; + }; + firefox-userchrome.url = "git://git.tjkeller.xyz/firefox-userchrome"; + }; + + outputs = { nixpkgs, home-manager, firefox-userchrome, ... }: { + homeConfigurations.timmy = home-manager.lib.homeManagerConfiguration { + pkgs = nixpkgs.legacyPackages.x86_64-linux; + extraSpecialArgs = { inherit firefox-userchrome; }; + modules = [ ./home.nix ]; + }; + }; +} +``` + +Then configure Firefox in `home-manager` (`./home.nix` in this case) as +follows: + +```nix +{ firefox-userchrome, ... }: { + programs.firefox = { + enable = true; + profiles.Personal = { + id = 0; + isDefault = true; + userChrome = firefox-userchrome.userChrome; + settings = { + "browser.compactmode.show" = true; + "browser.uidensity" = 1; # Compact + }; + }; + }; + # ... +} +``` + +### Legacy installation +To setup `compact` mode, you will need to set the following in `about:config`: +* `browser.compactmode.show` = `true` +* `browser.uidensity` = `1` + (or set this in the aformentioned "Customize Toolbar" menu) + +You can then enable the `userChrome` settings and install `userChrome.css` in +your profile as described +[here (userchrome.org)](https://www.userchrome.org/how-create-userchrome-css.html) +and elsewhere. -- cgit v1.2.3