This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

firefox 65 how do I edit css for toolbar fonts

  • 10 amsoshi
  • 1 yana da wannan matsala
  • 3 views
  • Amsa ta ƙarshe daga 26bel

more options

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

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

Mafitar da aka zaɓa

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.

Karanta wannan amsa a matsayinta 👍 0

All Replies (10)

more options

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.

more options

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

  1. PlacesToolbarItems .bookmark-item > .toolbaritems-text { font-size 20px  !important;

any other ideas?

more options

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 */
  }
more options

ok i will try it thanks for the work on it

more options

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 ??

more options

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..

more options

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?

more options

if I go to Fox 57 can I get around this? At least the old add on Font Changer should work,no?

more options

Zaɓi Mafita

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.

more options

I got it to work. Much better now at 15x. Needed to restart Mac to take effect, not just Fox. Thanks for the help.