philwilson.org

Making a bigger back button in Firefox

09 March, 2025

I've been hacking Firefox CSS to make the "Back" button bigger since 2004.

Here's the latest version, so that you can have small toolbar buttons except for the Back button, which for obvious Fitt's law reasons, you want to be bigger by default.

This is what it will look like:

And when you're hovering:

  1. Enable userChrome.css
    1. Go to about:config in your address bar
    2. Search for toolkit.legacyUserProfileCustomizations.stylesheets
    3. Set it to true
  2. Find your Firefox profile folder
    1. Go to about:support and find "Profile Folder"
    2. Click Open Folder
  3. In the chrome directory (create it if it doesn't exist), create a file called userChrome.css
  4. In that file add this CSS:
toolbar[mode="icons"] #back-button .toolbarbutton-icon {
	border-radius: 0 !important;
}
toolbar[mode="icons"] #back-button .toolbarbutton-text {
	display: block;
	border-radius: 0 !important;
}
  1. Restart Firefox - done!

I found out what the relevant styles to apply were by using Firefox's Browser Toolbox.

You can also do something similar by applying one of the CSS files (to your userChrome.css as above) from MrOtherGuy's firefox-csshacks repository.

See other posts tagged with firefox css and all posts made in March 2025.