I want to increase the font size for the tabs and bookmarks ONLY
I'm a web designer, trying to move away from Chrome because of privacy/security issues. I'm also 63 years old. My eyes are old. The text size on the tabs and bookmarks is very difficult to read. I don't want to increase the size of everything else - ***just the tab and bookmark text***. I've tried the fix seen elsewhere in the community for this question, but that doesn't change the size at all. If I increase the size, say by Zoom, that's a problem with my page layout. Can anyone help, please?
I'm on a Mac, but using an LG monitor, so no Retina display.
All Replies (11)
Try to add the following code to your userChrome.css:
:root .tabbrowser-tab {
font-size: 15px;
}
For the bookmarks:
:root .bookmark-item { font-size: 15px !important; }It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.
On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.
You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.
See also:
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- toolkit.legacyUserProfileCustomizations.stylesheets = true
Modified by cor-el
Sorry it took so long. I've been crazy busy.
Those didn't work at all.
BTW, I'm no expert, but I can CSS all day long! Because web designer.
I did make sure the preference was set to true. It was. I'm sure I missed something.
I even tried changing the 15px to 20. No change after turning FF off and on again.
Isn't there an add-on that would make this process easier?
But look at your screenshot. Your file name is userChrome.css.txt.
So you're a web designer, right?
Modified by TyDraniu
Have you considered the global scaling factor?
Global Scaling Factor
The following setting governs both the content area and the "chrome" area (toolbars and tabs).
(1) In a new tab, type or paste about:config in the address bar and press Enter. Click the button promising to be careful.
(2) In the filter box, type or paste devp and pause while the list is filtered
(3) The layout.css.devPixelsPerPx usually has a value of -1.0 meaning "follow the system scaling." You can edit that to a positive number to set your own scaling.
Double-click the preference and change its value to 3.0 (if you have a Retina display) or 1.5 (if you do not have a Retina display) and then click the blue check mark button to save the change. What do you think? You can edit this value up and down as needed, but please be careful not to use too low a value because then everything will get really tiny. If necessary, the button at the right end of the bar will reset to the default and you can start again.
Can you find a level that works for you?
If web content is now too large, take a look at the default zoom on the Settings page:
jscher2000, first of all, that's pretty embarrassing, to miss the .txt in the file name. I definitely know better. I removed it.
Second of all, that didn't fix it. I did quit and restart FF. Considering I changed the text as a test to 20px, it it should have been huge. The change did not take.
Third of all, I don't want the web content changed at all. I just want the tab text and bookmark bar text larger. I really can't assess how a design will look to most visitors if I'm changing the size. I just need the tab text and bookmark bar text larger, because it's quite small, as others have complained.
I have an LG monitor, not a Retina display.
Thank you, though.
You can open the library in a tab and increase the zoom of that tab. Enter the following in the urlbar of a new tab; you can bookmark it and open it like any other bookmark. chrome://browser/content/places/places.xhtml
Modified by Terry
Note that the first rule in your screenshot shows a stray 'f' next to ":root .bookmarks-item {f"
Modified by cor-el
I want to get out of web stuff so bad. 18 years later. I'm tired, and it's not fun anymore. I'd rather paint (I'm also a professional artist).
I removed the f (thanks for catching that), quit and relaunched FF. It didn't work.
This is becoming quite the project. I'm getting suggestions (thank you for the effort, though) that just don't address what I want. Apparently, the only way I can supposedly change the extremely small text on the tabs and bookmark bar (who signed off on that? Some 20-year-old with great vision? Their day will come) and nothing else is to keep futzing with code to get it to work. Or live with it. I don't like either option.
I think I'll just go back to Chrome.
Again, thank you for your time.
Can you confirm that userChrome.css is in the correct location ?
Location used for the main profile that keeps your personal data (Root Directory on about:profiles).
- ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default-release/chrome/userChrome.css
In Mac OS X v10.7 and later, the "~/Library" folder in the Home directory is a hidden folder.
You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> More Troubleshooting Information -> Profile Folder/Directory:
Windows: Open Folder; Linux: Open Directory; Mac: Show in Finder - https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data