firefox 65 how do I edit css for toolbar fonts
The add on (Font Changer is no good anymore). How do I edit CSS for bookmarks toolbar font??Its WAY too small on a Mac Air.Thanks
Chosen solution
Sorry, I don't know what add-on it is or when it stopped working.
The reason I asked what rules you have in your userChrome.css file is to suggest how to regenerate it. I will assume you only have the one rule, and you can correct me if I'm wrong.
(A) Select and copy the following style rule code
/* Huge text on bookmarks toolbar */ #PlacesToolbarItems .bookmark-item { font-size: 20px !important; }
(B) Generate and download a userChrome.css
file
Open the following page and paste the above rules into the editor, replacing the sample rule:
https://www.userchrome.org/download-userchrome-css.html
Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)
Minimize that Windows Explorer window for later reference.
(C) Create a new chrome
folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(D) Move the userChrome.css
file you generated in Step B into the chrome
folder you created in Step C
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
Read this answer in context 👍 0All Replies (10)
You can set layout.css.devPixelsPerPx to 1.0 (default is -1) on the about:config page. Adjust its value in 0.1 or 0.05 steps (1.1 or 0.9) until icons or text looks right. Modifying layout.css.devPixelsPerPx affects user interface and web pages (global zoom). If necessary then use an extension to correct the appearance of web pages.
I tried that..didnt help. there might be something specific about the Mac/Firefox environment that needs to be addressed. I tried this.. css code
- PlacesToolbarItems .bookmark-item > .toolbaritems-text { font-size 20px !important;
any other ideas?
26bel said
I tried that..didnt help.
Do you mean changing layout.css.devPixelsPerPx didn't work at all, or you can't find a value that creates the correction proportion of sizes between, say, tab titles and bookmarks toolbar text? Note that if you have a Retina screen, larger values like 2.5 (double 1.25) might be needed.
I tried this.. css code
#PlacesToolbarItems .bookmark-item > .toolbaritems-text { font-size 20px !important;
any other ideas?
You're missing a colon after font-size: but the toolbaritems-text class name might be obsolete, too.
Try this simpler rule in your userChrome.css file:
#PlacesToolbarItems .bookmark-item { font-size: 20px !important; /* Huge text */ }
ok i will try it thanks for the work on it
interesting....that did change the font.... but only a little bit... I will try a higher number... I dont have the retina screen... what do you think is going on ??
I guess it didnt enlarge it..it just kind of seemed like it When I open the cssuser file and edit it is changing the 20px value to 20pxA...??? I save and restart but when I open the css file it shows the 20pxA thing..?? I dont put that A in there..
The userChrome.css file needs to be a plain text file. Perhaps there is a font/formatting issue. Do you have other rules in there?
if I go to Fox 57 can I get around this? At least the old add on Font Changer should work,no?
Chosen Solution
Sorry, I don't know what add-on it is or when it stopped working.
The reason I asked what rules you have in your userChrome.css file is to suggest how to regenerate it. I will assume you only have the one rule, and you can correct me if I'm wrong.
(A) Select and copy the following style rule code
/* Huge text on bookmarks toolbar */ #PlacesToolbarItems .bookmark-item { font-size: 20px !important; }
(B) Generate and download a userChrome.css
file
Open the following page and paste the above rules into the editor, replacing the sample rule:
https://www.userchrome.org/download-userchrome-css.html
Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)
Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)
Minimize that Windows Explorer window for later reference.
(C) Create a new chrome
folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for both Windows and Mac in case the text is not clear.
(D) Move the userChrome.css
file you generated in Step B into the chrome
folder you created in Step C
The next time you exit Firefox and start it up again, it should discover that file and apply the rules.
I got it to work. Much better now at 15x. Needed to restart Mac to take effect, not just Fox. Thanks for the help.